# 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.

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

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.

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

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):

Data | Data 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 second and third 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:

Data | Data | Data
Data | Data | Data
Data | Data | Data

Data | Data | Data
Data | Data | Data
Data | Data | Data

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data
Data | Data | Data

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

Data | Data | Data

So should this one, for auto cell heights:

Data | Data | Data

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

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org