-1

Some people believe table is the devil's spawn. Others primarily use to it to format their website. When do you draw the line on tables? When do you feel you're abusing them?

I, personally, use tables only to display data, which in most cases need a table. I've hit a brick wall, though. I need two text boxes to be aligned, would you use tables for this?

I'm thinking of doing something like this:

<table style="border: 0; border-collapse: separate; border-spacing: 10px; margin: 10px auto;">
    <tr>
        <td><label for="username">Username</label></td>
        <td><input type="text" name="username" placeholder="Username"></td>
    </tr>

    <tr>
        <td><label for="password">Password</label></td>
        <td><input type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;"></td>
    </tr>

    <tr>
        <td></td>
        <td><input type="submit" name="submit" class="btn btn-large btn-info" style="float: right"></td>
    </tr>
</table>

Please excuse the inline CSS, I was using it for this example.

Would you draw the line there? Am I crossing this imaginary line? What would you do?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Jordan Doyle
  • 2,976
  • 4
  • 22
  • 38
  • 3
    Tables should only be used for tabular data, so yes, I think you are going over the line. You can line things up using CSS: Make the `Label`s `display:inline-block` with a fixed width. – jalynn2 May 06 '13 at 16:29
  • 1
    It's really quite simple. You're describing that you need a particular presentation. That's a job for CSS not for HTML. Use HTML to describe the structure of the data, not its presentation. – Alohci May 06 '13 at 16:30
  • As jalynn said, or use `display: table`, `table-row` and `table-cell` if you absolutely have to – Bojangles May 06 '13 at 16:30
  • @David - tables immensely bloat up the HTML. – jalynn2 May 06 '13 at 16:30
  • @David Please don't recommend that _ever_ again. Tables are irritating to use, and `
    `s with a bit of CSS is hardly difficult
     – Bojangles May 06 '13 at 16:30
  • 1
    @DavidStarkey that is a very bad practice, please don't post stuff like that here – imulsion May 06 '13 at 16:31
  • I am clearly in the minority so I withdraw my statement. Though call me crazy for thinking `
    ` with a few `` is much easier to use when making, say a calendar, then trying to determine number of `
    ` to use, styling them correctly, etc.     – David Starkey May 06 '13 at 16:41
  • 1
    @DavidStarkey a calendar is tabular data. A website is not. – imulsion May 06 '13 at 16:42
  • This is somewhat a borderline case, IMO. The text boxes don't make much sense unless the labels are aligned with them, so the labels are effectively functioning as row headers. The submit button shouldn't be in the table, though, and the labels should be in ``s if you're going to consider them as headers. – cHao May 06 '13 at 16:42
  • @imulsion Couldn't you consider a form tabular data (or tabular input as it were)? – David Starkey May 06 '13 at 16:46
  • @DavidStarkey possibly. But all i'm saying is it is much better practice to use divs for formatting – imulsion May 06 '13 at 16:47
  • @imulsion I can agree with that, but OP was discussing form elements. Unless your entire webpage is a form, you will likely need to customize beyond basic table usage. As soon as you need to use CSS inside a table, you are likely overstepping the use of `` (with exception of making data-tables pretty). What I was saying was if you needed to align elements in a way that a table (without extra CSS) would work perfectly, then use it.
     – David Starkey May 06 '13 at 16:52
  • If you are interested, I personally feel that the form here http://www.thoughtworks.com/contact-us is pretty well done – lazyprogrammer May 06 '13 at 17:04

3 Answers3

2

To align things, I would use either the <div> element or, if that fails, absolute positioning. Also try display:inline-block on the div element. Why won't they line up? What have you tried? Tables should never be used for formatting. That is an awful practice which tables weren't designed for. Only ever use tables if you are displaying tabular data. Otherwise see above.

imulsion
  • 8,820
  • 20
  • 54
  • 84
  • 2
    ` ` isn't designed for alignment and should never be used as such. It's a Non Breaking SPace, and varies in width depending on browser and OS. Using `
    `s with `display: inline-block` is the best way to go here
     – Bojangles May 06 '13 at 16:31
  • @Bojangles that was meant as an option that should be used as a last resort. I think divs are much better – imulsion May 06 '13 at 16:32
  • 1
    It should _never_ be used, not even as a last resort really. If you find yourself absolutely needing ` ` something else must have gone _horribly_ wrong – Bojangles May 06 '13 at 16:33
  • @Bojangles have edited :) – imulsion May 06 '13 at 16:34
  • Again, so you're basically saying, have two divs in a container, both having `float: left` and `clear: both`? – Jordan Doyle May 06 '13 at 16:40
  • @JordanDoyle it depends on what your layout is. If you could paste a picture of what you want that would help. – imulsion May 06 '13 at 16:41
0

Tables should be used to represent tabular data. Divs are divisions or sections and should be used to group block-elements. Spans are useful when you want to group inline-elements.

Paul Welbourne
  • 1,063
  • 10
  • 16
0

I personally think using tables for layout in regards to forms is OK, especially in the case of some super complicated form - Such as this one: http://www.wolfhair.com/consultation-options/

My reasoning behind this is that if the data that was being inputted into the text fields was actual text and not a text field, it would in fact appear to be tabular data. In fact, if you were to store this information, it would be placed into a table like structure in order to be then pulled from later.

As a demonstration, take for instance your very example. If it were filled out and the text fields were actual data results.

<table border="1">
    <tr>
        <td><label for="username">Username:</label></td>
        <td>MyUsernameRox</td>
    </tr>

    <tr>
        <td><label for="password">Password:</label></td>
        <td>M0stSecurePasswordEv3r</td>
    </tr>
</table>

http://jsfiddle.net/sGq2Q/

Outside of using it to organize and arrange a form, it should not be used for layout.

Michael
  • 7,016
  • 2
  • 28
  • 41
  • IMO, if you're going to use a table, the labels should each be in a ``. If that doesn't make sense, then using a table really doesn't either. – cHao May 06 '13 at 16:53
  • 2
    Normally, I would agree that forms *can* be tabular data (a collection of key/value pairs), but the website you're pointing to is using it exclusively for layout purposes. "Form layout is hard" is not a good reason to ignore the fact that "tables should not be used for layout". – cimmanon May 06 '13 at 17:25