The height of a table may be defined by the height property for table and inline-table elements.

If the property is set to the value of auto, the height will be the sum of the row heights and cell spacing and borders.

The height of the individual table-row elements will be calculated once when the entire row gets rendered. That is because the height actually depends on the size of the content within a cell and, while the property itself may affect the row's height, the cell with the largest height will be taken as the row actual minimum height.

Vertical alignment

The vertical alignment of each cell is determined with the property vertical-align which may have multiple values.

In the context of tables, following values affect the alignment:

  • baseline; the cell's baseline is at the same height as the baseline of the first row it spans;
  • top; the cell's top is aligned with the first row it spans;
  • bottom; the cell's bottom is aligned with the bottom of the last row it spans;
  • middle; the cell's center is aligned with the center of the rows it spans.

The order in which the cells are aligned follows these rules:

  1. The cells aligned as the baseline are positioned first.
  2. The cells aligned as the top follow.
  3. Any remaining cells, aligned as the bottom or middle, with the height larger then the current height of the row will make the row height to be increased to the maximum of these cells, by lowering the bottom.
  4. The rest of the cells are positioned.
  5. The cell boxes smaller then the height of the row receive extra top or bottom padding.

The horizontal alignment of inline-level content in a cell box may be specified by the value of the text-align property.

Example

CSS table's height and alignment example:

 

›› go to examples ››