Is tabular data?

Question

From a standpoint of using XHTML 1.0 Strict as DOCTYPE -- would the input tag in XHTML be considered tabular data?

And if not, could someone please give me some good advise on valid XHTML (Strict 1.0) code that I could use in combination with MySQL and PHP? What I need to do is have an input field to the right of another input field (BUT, the right input field is not always in need of being printed on the page), so currently I've only been able to come up with this:

<table>
    <tr>
        <td><input type="text" value="First column"></td>
        <td>...</td>
        <td>...</td>
    </tr>
    <?php if(!empty($column2)){ echo '<tr><td><input type="text" value="Second column"></td></tr>'; } ?>
</table>

So, any other ideas? I'm thankful for any suggestions you may have!

EDIT I should also mention, that I need to have captions above each column (not each input field, but let's say each tr, looking from my example).

Ah, well, just imagine that I wrote instead of "First/Second column". — Nisto, Mar 30 '11 at 19:15
I think you are confusing rows with columns. In your code, the inputs are in different rows, not columns. — Šime Vidas, Mar 30 '11 at 20:01

score 2 · Answer 1 · answered Mar 30 '11 at 19:14

Is <input> tabular data?

I will answer this question with a counter question of:

Is a rectangle a square?

Generally speaking the answer is no, although there are some cases where the answer may be yes.

If your input is tabular in nature, markup in a table makes sense. For example, a table of users with specific preferences/notes would be semantically marked-up in a table.

A table containing a username/password field for login, is not semantic.

The final decision is yours. If you feel that you can make a good semantic argument for the data being tabular, then by all means put it in a table.

Šime Vidas · Answer 2 · 2011-03-30T19:47:09.233

1

An input field to the right of another input field?

Hm, let me see... this?

<div>
    <input> <input>
</div>

Live demo: http://jsfiddle.net/dWPfx/1/

Update: with captions:

<table>
    <tr>
        <th>Name:</th>
        <th>Surname:</th>
    </tr>
    <tr>
        <td><input></td>
        <td><input></td>
    </tr>
</table>

Live demo: http://jsfiddle.net/dWPfx/2/

edited Mar 30 '11 at 19:47

answered Mar 30 '11 at 19:27

Šime Vidas

182,163
62
281
385

I may not have been fully clear. But I also need to have a caption above the input fields. – Nisto Mar 30 '11 at 19:40
@Nisto In that case you are fine to use a TABLE. I will update my answer with the code... – Šime Vidas Mar 30 '11 at 19:45

score 0 · Answer 3 · answered Mar 30 '11 at 19:26

You should be able to do the same thing with divs:

<div style="overflow: hidden;">
   <div style="float: left;"><input value="First Column" /></div>
   <div condition="exists:column2" style="float: left;">
      <input attributes="value column2" />
   </div>
</div>

I think that input and tabular data have nothing to do with each other, though they do not necessarily stand in opposition. The semantics of xhtml data is somewhat open to interpretation. The point is that you shouldn't use tables for styling, even if you can make an excuse in your head like "well the inputs are kind of like tabular data, so it's cool to use a table here."

score 0 · Accepted Answer · answered Mar 30 '11 at 19:29

Your concerns about an input being tabular data or not should not impact your desire for XHTML 1.0 Strict valid markup.

Whether or not an input is tabular or not is a matter of semantics, not validation. Don't get me wrong, semantics are important -- the markup used should describe the content it contains. However, semantics are largely unrelated to whether or not code will validate.

For an input, the requirements to validate is that it (1) be inside a <form> tag and (2) be inside a block-level element such as a <p> or <table> or any other block level element.

Another concern to address is accessibility -- both tables and forms have many accessibility challenges for screen readers and keyboard control. The way a screen reader parses a table may not be how you intended the content to be digested, so the user may end up hearing items read to them out of order, and thus your page will become non-sensical to them. Using keyboard controls to tab between form elements may also be affected by the markup used, since tables may require elements to be placed in the markup in a different order than you intend the user to digest them in the page.

Personally, I do not believe that forms are tabular data, and do not use tables when creating the markup for them. Generally, I use unordered lists. A generic example may be:

<form>
  <fieldset>
    <ul>
      <li>
        <label for="item">Item 1</label>
        <input type="text" name="item" id="item" />
      </li>
      ...
    </ul>
  </fieldset>
</form>

I hope that helps.

The fieldset tag did it for me!! I've definitely missed out on this tag. Accepting this answer. Thank you, RussellUresti! — Nisto, Mar 30 '11 at 22:06

Is tabular data?

4 Answers4