Vertical alignment and table height

The following three tables have heights of auto, 30px, and 500px. The first one should have the height of the sum of its rows. The second and third can be handled however the browser wants, but there just here to make sure it does something reasonable.

DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData

These tables test percentage heights. The first should be its natural height; the second should be 50% of the height of the div (600px), which is 300px.

DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData

The following tests test height on table rows. A value of auto requires the minimum height needed by the cells. In a simple case, this is just the height of the tallest cell (excluding the increased padding, of course, since with the padding the cells have the same height):

DataData
Data
Data

However, vertical-align values of baseline (the default, but could be overridden in a UA stylesheet) can make it taller than that:

Data Data
Data
Data
Data

The exact same thing should happen when the given height for the row is too small:

Data Data
Data
Data
Data

Padding should also be able to increase the height (here the first cell has 20px padding-top and the second has 20px of padding-bottom):

Data Data Data
Data Data Data

These two tables should be 200px tall, because of a height on the table row. The second one should have its first and second cell's contents offset from the middle by 10px (bottom, then top):

Data Data
Data
Data
Data
Data Data Data

The behavior of percentage heights on table-row or table-row-group is undefined. However, I think they should be ignored, so these tables should look normal:

DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData
DataDataData

The following table should look normal, since very small heights get ignored:

DataDataData

So should this one, for auto cell heights:

DataDataData

These tables should look the same - all cells should be 100px tall with the text at the top of the cells:

Data Data Data
Data Data Data
Data Data Data
Data Data Data

In these four tables, the text should be 20px lower each cell, but should otherwise look like the above three tables:

Data Data Data
Data Data Data
Data Data Data
Data Data Data

These should have the text 40px from the top in every cell:

Data Data Data
Data Data Data
Data Data Data
Data Data Data
Data Data Data

In each of the following tables, three of the cells should have the same baseline of the first line, and the three so marked should be aligned top, middle, and bottom:

Data Data Data Top Middle Bottom
Top Middle Bottom Data Data Data
Data Top Middle Data Bottom Data
Top Data Data Middle Bottom Data
Top Data Bottom Data Data Middle

Valid HTML 4.0!

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org