Page 11 of 23PREVNEXT

HTML Tables II: Table and cell widths

HTML Table with three rows and two columns

These two columns were given widths of 100 pixels. However, because the content in the lower-right cell exceeds 100 pixels, the cell width is not honored.

In the previous lesson we explained how table widths are simply suggested or recommended values. The same thing goes for cell widths.

Which brings us to finicky rule #2: Content is king. What we mean by that is, if a cell's content is wider than the specified width of the cell, the content will force the cell beyond that width.

For example, in the illustration the two columns have been given a width of 100 pixels. However, notice how the right column is getting pushed beyond 100 pixels because of the ABCDEFG... in the bottom row. It is also squishing the other column, causing it to be smaller than 100 pixels.

This usually occurs when you put long words or URLs into your cells. But it can also happen if you insert a wide image as well.

Page 11 of 23PREVNEXT