/    Sign up×
Community /Pin to ProfileBookmark

When to make forms CSS vs Tables

Copy linkTweet thisAlerts:
Aug 08.2007

I am still not sure when to make a form using CSS or tables. Below is a form that i have using a table but not sure if this should be made with CSS. At what point would you decide to make a form with tables vs CSS? Also is it possible to have the same layout control with CSS? I now know that if you display tabular data you should use a table.

Any help on showing how this could be done with css would be greatly appreciated!

–codeHermit

<form>
<table>
<tr>
<th colspan=”2″ bgcolor=”blue”>Search Rates<br>and Locations</th>
</tr>
<tr>
<td colspan=”2″ nowrap class=”smallText”>
<input type=”text” size=”20″><br>
e.g., “123 Main St., Los Angeles, CA”<br>
or “90000”<br>
<select name=”size”>
<option value=””>Choose a size</option>
<option value=””>5 x 5</option>
<option value=””>10 x 10</option>
<option value=””>20 x 20</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″><a href=”” class=”boldLinkText”>Space Guide</a><br>See examples of what fits.</td>
</tr>
<tr><td align=”right” colspan=”2″><input type=”submit” name=”search” value=”SEARCH”></td></tr>
<tr>
<td colspan=”2″>Already have a reservation?<br><a href=”” class=”boldLinkText”>Make changes here.</a><br><br><br></td>
</tr>
</table>
</form>

to post a comment
CSS

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@blis102Aug 08.2007 — I have not come across a time when non-table based forms didnt work for me. Tables seem to be a crutch for lack of proper CSS knowledge. Here is how you could make your form using non-table techniques:

The HTML:
[code=html]<form>
<div class="formContainer">
<p class="formHeader">
Search Rates<br />
and Locations
</p>
<p>
<input type="text" size="20" /><br />
e.g., "123 Main St., Los Angeles, CA"<br />
or "90000"
</p>
<p>
<select name="size">
<option value="">Choose a size</option>
<option value="">5 x 5</option>
<option value="">10 x 10</option>
<option value="">20 x 20</option>
</select>
</p>
<p>
<a href="#" class="boldLinkText">Space Guide</a><br />
See examples of what fits.
</p>
<p class="textRight">
<input type="submit" name="search" value="SEARCH">
</p>
<p>
Already have a reservation?<br />
<a href="#" class="boldLinkText">Make changes here.</a>
</p>
</div>
</form>[/code]

The CSS:
[CODE].formContainer {
width: 260px;
}
.formHeader {
background-color: blue;
font-weight: bold;
text-align: center;
}
.formContainer p {margin: 3px 0;}
.textRight {text-align: right;}[/CODE]

I would always recommend using non-table approaches to making forms because tables just add in extra markup and are meant to represent tabular based data (spreadsheets etc...). Besides, with semantic HTML you can alter your tables much more freely than using tables.

Hope that helps
Copy linkTweet thisAlerts:
@ray326Aug 08.2007 — That particular form doesn't have the properties you'd normally map to a table; that being [B]label/input -> th/td[/B]. The actual content seems to be presented rather helter-skelter to me, too, but that's another discussion.
×

Success!

Help @codeHermit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...