Tables Are Very Sensitive To Gratuitous Line Breaks

A table is a great way to organise content in your blog. With related data positioned above or next to each other, and still allowed to flow from line to line, as a display coded in HTML is designed to do, you can show the various relationships easier. But use tables carefully - they are syntactically sensitive.

The problem is easy to show, by example.

Here's a very simple table - 1 row, 2 cells.

Make this line Appear above this line And make this line Appear just above this line

<span style="text-align:center;"><table align="center" border=1><tr><td><table align="center" border=1 cellpadding="20"><tr><td>Make this line<br>Appear above this line</td></tr></table></td><tr><td>And make this line<br>Appear just above this line</td></tr></table></td></tr></table></span>

Add gratuitous line breaks, which makes it easier to read the source code, and it becomes a bit untidy.

Make this line Appear above this line And make this line Appear just above this line

<span style="text-align:center;">
<table align="center" border=1>
<tr>
<td>
<table align="center" border=1 cellpadding="20"><tr>
<td>
Make this line
<br>
Appear above this line
</td>
</tr>
</table>
</td>
<tr>
<td>
And make this line
<br>
Appear just above this line
</td>
</tr>
</table>
</td>
</tr>
</table>
</span>

If you have "Convert line breaks?" set to "Yes", as many bloggers typically do, every new line in the middle of the table is rendered at the top or bottom of the table. The more cells, columns, and rows present, the worse the problem gets.

Just remove all gratuitous line breaks, carefully, from the "<table> ... </table>" code.

>> Top