Table Manners - Do I need to be consistent?

Question

I have a table. For example:

<table>

<tr>
  <td>apple</td>
  <td>big</td>
</tr>

<tr>
  <td>pickle</td>
  <td>small</td>
</tr>

</table>

after some fancy jQuery...

<table>

<tr>
  <td>apple</td>
  <td>big</td>
  <td>10kg  ------ Is this nice to do, any potential issues?</td>
</tr>

<tr>
  <td>pickle</td>
  <td>small</td>
</tr>

</table>

Just for fun: http://jsfiddle.net/Czcby/

Answer 1

You will end up with three cells on the first row and two on the second row.

This will not normally display, but if your styling has margins/border/padding on table cells, it can effect the display and layout of the table.

Answer 2

The short answer, for me, is yes you do.

The more detailed answer is: you don't strictly need to be consistent but it certainly helps if you want your table to look consistent across browsers. Not to mention the fact that being inconsistent now, even though it doesn't seem to cause problems currently, will have a bigger effect when you want to do more to your table, its styling, or the data inside it.

If you check out this JSFiddle in different browsers, you may see different behaviour:

• Chrome and IE8: Render the table as having extra cells that jut out from the two ordinary cells.
• Firefox: effectively looks as though it has extra empty cells in a third column.

Imagine the complications when it comes to styling for these different situations as your table grows.

Arguably, the colspan property is a way around this. I think colspan is pretty ugly; tables should be presented so that you can look at a column header and scroll down it to see the information relevant to that header. Having some other data reaching across into the column is a distraction. But that depends exactly on what you're trying to do.

Presentation and information design issues aside, there may be no way for someone looking at your code to know how many cells end up in each row. Better to have a consistent number in each row so you can check it quickly and easily should you need to anything else with the table or the data inside it. Useful for debugging.

Hope this helps.

Answer 3

There's no problem to do that, however, you may face some formatting issues as there will now be 3 td's on row one and 2 on row two.