I want to make a design like this [file attached]
Can I make it using CSS and table ? I’m worried about the gap between text label and the element just under it. Could you please post a sample code how this type of design are obtained.
That’s easy to do, but don’t use a table for this. Not needed at all. What code do you have so far? If you show your html, we can show how to style it.
As Ralph said we usually like for you to try first yourself so we can see what stage you are at and so that we can see you are at least trying 
However, here’s a start:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
fieldset.route {
border:none;
border-top:1px solid #000;
min-height:0;
}
/*clear:floats*/
.route:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .route{height:1%}
form {
margin:0;
padding:0;
}
.route div {
float:left;
margin:0 25px 0 0;
}
.route input, .route label, .route select {
font-size:77%;
}
.route input, .route select {
border:1px solid #666;
}
.route label {
display:block;
padding:0 0 3px 2px;/* adjust to suit*/
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<fieldset class="route">
<legend>Select Route</legend>
<div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div>
<div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div>
<div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div>
<div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div>
</fieldset>
</form>
</body>
</html>
The divs in the fieldset are floated left to get the horizontal alignment. The labels are set to display:block so that the input starts underneath. The space under the label is just made width some padding bottom which can be increased or reduced as required.
As I told , I want to use table …because I want to put such more rows .
This will be hard if using <div> and css solution . I’m interested in table and css solution.
I need a sapmle code to start with . Do you know how this can be done using a table ?
please post a sample how to make this type of design using tables.
Thanks
You can just copy > paste the code given above to make more rows. Tables aren’t appropriate here. But if you want to use a stick to sweep the pathway instead of a broom, it’s up to you.
As Ralph said a table is redundant here and just dead space as it can all be done with css.
If you must use a table then just copy the html into the table cell as required and it will still work. The table makes no actual difference though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
fieldset.route {
border:none;
border-top:1px solid #000;
min-height:0;
width:620px;
}
/*clear:floats*/
.route:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
* html .route {
height:1%
}
form {
margin:0;
padding:0;
}
.route div {
float:left;
margin:0 25px 20px 0;
}
.route input, .route label, .route select {
font-size:77%;
}
.route input, .route select {
border:1px solid #666;
}
.route label {
display:block;
padding:0 0 3px 2px;/* adjust to suit*/
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<fieldset class="route">
<legend>Select Route</legend>
<div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div>
<div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div>
<div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div>
<div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div>
<div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div>
<div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div>
<div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div>
<div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div>
<div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div>
<div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div>
<div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div>
<div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div>
</fieldset>
</form>
<form id="form2" method="post" action="">
<fieldset class="route">
<legend>Select Route</legend>
<table>
<tr>
<td><div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div></td>
<td><div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div></td>
<td><div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div></td>
<td><div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div></td>
</tr>
<tr>
<td><div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div></td>
<td><div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div></td>
<td><div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div></td>
<td><div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div></td>
</tr>
<tr>
<td><div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div></td>
<td><div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div></td>
<td><div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div></td>
<td><div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div></td>
</tr>
<tr>
<td><div>
<label for="departure">From</label>
<select name="departure" id="departure">
<option value="departure">-Select Departure City-</option>
<option value="dCity1">City</option>
</select>
</div></td>
<td><div>
<label for="arrival">To</label>
<select name="arrival" id="arrival">
<option value="arrivalcity">-Select Arrival City-</option>
<option value="aCity1">City</option>
</select>
</div></td>
<td><div>
<label for="departdate">Depart</label>
<input type="text" name="departdate" id="departdate" />
</div></td>
<td><div>
<label for="returndate">Return</label>
<input type="text" name="returndate" id="returndate" />
</div></td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
Note the above code is invalid because I just copied and pasted multiple rules and therefore the ids are all the same which is invalid.
Note that tables should really only be used for tabular data and most experts agree that form data is not tabular enough.