Should tables be used to align form elements in HTML or is this looked down upon?

Question

I like to follow standards and use table-less div based layouts. However using tables to align form fields/textareas and submit buttons is so much easier than using anything else. So is it acceptable from a strict standard perspective?

I see google, facebook among others use tables in their registration pages.

Answer 1

Tables are for tabular data, that's all. Period.

Answer 2

Don't use tables for layouts. Use tables to store data in a chart. HTML is not a presentation language. Presentation is what stylesheets are for.

Google's code is incompetent. Its homepage is intentionally incompetent to conserve bandwidth by limiting characters in its HTML code. Its other HTML code is incompetent, because it is written by incompetent people who don't care about the value of conversing their data to the end user.

Answer 3

You can use <dl> lists, with a little CSS work. In some ways it's less convenient (because you have to size your "label" column manually, pretty much), but in the end the markup is a lot cleaner and it's easier to deal with overall.

With tables, you're forced to group fields according to the layout, and it's totally static once it's on the page. When you use more flexible markup (and smart CSS rules), you can group your form inputs based on their natural relationships.

Answer 4

Tables are prefectly fine to display tabular data.

Styleing a form(fields/textareas and submit buttons) however is best to be done using CSS.

Spend the time to really learn HTML and CSS and it will be worth it. Eventually it will be as easy as using a table once you fully understand CSS.

Answer 5

I use tables for tabular data, but I also use them for data input forms, where there are a lot of data-entry fields. While this may not be considered semantically correct by some, I just find that it is damned near impossible to get everything lined up correctly without using some major CSS gyrations and hacks.

I don't use tables for structural layout, but I will use them for aligning things if it's Just Simpler^TM

Answer 6

By introducing tables into your HTML, you make the maintainability of your code and future use a little less valuable. Browsers are constantly pushing towards an all CSS world and tables are GUARANTEED to always work for tabular data. It's just a COINCIDENCE that tables are easy to use now for formatting. The easiest way to look at it is like this:

Tables --> Tabular data and reporting
CSS --> Design and formatting (use  DIVs)
HTML --> Structure and data/text

While the tables may be easier now, think about how much maintenance it will create down the road, when browsers change their behavior with rendering tables.

Also think about mobile browsers, they tend to render tables differently. A table layout may look awesome on a PC and completely fall apart on a mobile browser.

That being said, at the end of the day you have to use CSS to design the tables, so why not start with CSS and Divs.

Answer 7

Tables can ease the burden in certain forms. I find pure CSS great for single-column forms, however often times I'm dealing with very complex forms with multiple columns and/or require notes, hints, indicators that make using just CSS difficult. For most forms however, pure CSS is the best route to go.

Here's a great getting started with CSS forms tutorial:

http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml

Answer 8

What is the <TABLE/> good for besides tabular data? One thing I like to use it for is 9-slice buttons, so you can easily give things irregular edges or rounded corners while maintaining a center area for content. The following dummy HTML should be easy enough to follow, bearing in mind that top, left, right, and bottom images will have their repeat-x and repeat-y styles set as appropriate to allow them to expand vertically or horizontally:

<table style="border-collapse:collapse">
  <tr>
    <td><img src="top_left.png"></td>
    <td><img src="top.png"></td>
    <td><img src="top_right.png"></td>
  </tr>
  <tr>
    <td><img src="left.png"></td>
    <td> <!-- YOUR EXPANDABLE CONTENT HERE --></td>
    <td><img src="right.png"></td>
  </tr>
  <tr>
    <td><img src="bottom_left.png"></td>
    <td><img src="bottom.png"></td>
    <td><img src="bottom_right.png"></td>
  </tr>
</table>

Some will think this heresy, but I think it's damned convenient. It's layout, but on a micro level. My position is, if it works, use it.

Answer 9

I take a pragmatic approach to these things. I avoid using tables for layout and use CSS if I can get away with it. I fall back to tables though, under some circumstances:

1. I have to have the form layout correct on a lot of different browsers. CSS is easy to learn. But learning all of the idiosyncrasies of all CSS implementations and how to work around them, and how to have them work together, that can be a nightmare.
2. There are some logical form layouts that simply cannot be expressed in CSS as it currently stands, but that CAN be expressed in tables. If you have to implement one of these layouts, you don't have much choice but to go with tables.