Thursday, October 04, 2007

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

2 comments:

The Tennis Hacker said...

Thank you. You have helped me more than you will ever know.

Fi - WhereFishSing.com said...

Thankyou so much for this post. It has been a god-send. I've had that much trouble with tables in Blogger. And now I know why.