Table Rows and Columns Problem

readourlines

Hi I am having problem adjusting table to fit the right layout I want.

here is the code

<table class="easy-table-creator tablesorter" style="width: 100%;">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><strong>Your Contact Information</strong></td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td><strong> </strong><strong>Subject:</strong></td>
<td>[text your-subject]</td>
<td>3</td>
<td><strong>Business Email:</strong></td>
<td>[email* your-email]</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>Maximun 200 Characters.</td>
<td>3</td>
<td><strong>Name:</strong></td>
<td>First Name</td>
<td>Last Name</td>
<td>7</td>
</tr>
<tr>
<td><strong> </strong><strong>Message:</strong></td>
<td>[textarea your-message]</td>
<td>3</td>
<td>__________________________</td>
<td>[text* your-name]</td>
<td>[text* your-name]</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>Include details in your message (e.g. product specifications, company descriptions)</td>
<td>3</td>
<td><strong>Sex:</strong></td>
<td>[radio Sex "Male" "Female"]</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><strong>Contact Address:</strong></td>
<td>Street Address</td>
<td>City (if any)</td>
<td>Province/State (if any)</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
<td>[text Street]</td>
<td>[text city]</td>
<td>[text state]</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
<td>Country</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
<td>[select Country "United States" "United Kingdom" "Canada" "Australia" "Philippines"]</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><strong>3</strong></td>
<td><strong>Phone Number:</strong></td>
<td>Country/Region Code</td>
<td>Area Code (if any)</td>
<td>Number</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
<td>[text countrycode]</td>
<td>[text areacode]</td>
<td>[text number]</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><span>3</span></td>
<td><strong><strong>Fax:</strong></strong></td>
<td>Country/Region Code</td>
<td>Area Code (if any)</td>
<td>Number</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td></td>
<td>[text countrycode]</td>
<td>[text areacode]</td>
<td>[text number]</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><strong>
</strong></td>
<td><strong>Company Name:</strong></td>
<td>[text companyname]</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>3</td>
<td>4</td>
<td></td>
<td>[submit]</td>
<td>7</td>
</tr>
</tbody>
</table>
*

You can checkout the site here http://tsgdemo.tk

johanafm

You shouldn't use tables for layout purposes. Here's a beginning, using different techniques (float and relative+absolute positioning) to position divs according to your design

/* left hand form area - subject & message */
form div.left
{
	float: left;
	width: 400px;
	border: 1px solid red;
}
/* right hand form area - contact information */
form div.right
{
	float: left;
	width: 600px;
	border: 1px solid blue;
}

/* "rows" */
form > div > div
{
	padding: 6px 4px;
	min-height: 18px;
}
/* not the first row */
form > div > div + div
{
	clear: left;
}
/* first cell */
form > div > div > div.inputlabel
{
	float: left;
	width: 120px;
	font-weight: bold;
}
/* second cell */
form > div > div > div + div.input, form > div > div > div + div.inputlabel
{
	float: left;
	width: 220px;
	position: static;
	color: #666;
}
form > div > div.relative
{
	position: relative;
}
/* input element, positioned in "second column", without preceeding div with label text */
form > div > div.relative > div.input
{
	position: absolute;
	left: 124px;
	top: 0px;
	width: 220px;
}
form > div > div.relative > div.input + div.input
{
	position: absolute;
	left: 344px;
	top: 0px;
	float: none;
}

form div.input input[type=text], form div.input textarea
{
	width: 210px;
	/* important! else you get different widths for input & textarea
		in different browsers since they don't all have the same default border style
		for both elements.
		Wether you use groove or something else doesn't matter though. */
	border-style: groove;
}
/* a small left margin for label following a radio input */
input[type=radio] + label
{
	margin-left: 4px;
}
/* the next radio button should have a greater left margin to distance it from the previous label */
input[type=radio] + label + input[type=radio]
{
	margin-left: 14px;
}
</style>
</head>
<body>

<form action="" method="post">
<div class="left">
	<div>
		<div class="inputlabel">Subject</div>
		<div class="input"><input type="text" /></div>
	</div>
	<div>
		<div class="inputlabel">Message</div>
		<div class="input"><textarea rows="10" cols="25"></textarea></div>
		<div style="clear: left; float: none;"></div>
	</div>

</div>
<div class="right">
	<div>
		<div class="inputlabel">Business Email</div>
		<div class="input"><input type="text" /></div>
	</div>
	<div>
		<div class="inputlabel">Name</div>
		<div class="inputlabel">First Name</div>
		<div class="inputlabel">Second Name</div>
	</div>
	<div class="relative">
		<div class="input"><input type="text" /></div>
		<div class="input"><input type="text" /></div>
	</div>
	<div>
		<div class="inputlabel">Sex</div>
		<div class="input">
			<input id="male" type="radio" /><label for="male">Male</label>
			<input id="female" type="radio" /><label for="male">Female</label>
		</div>
	</div>
</div>
</form>

readourlines

hey thanks for this!