Tables can be assigned as both, block-level and inline-level elements.

In both cases the table generates a principle box called table wrapper box that is made of the table box and caption(s) boxes (if any).

The properties position, float, margin (all), top, right, bottom and left are applied only on the table wrapper box while other non-inherited properties are applied on both, table-wrapper box and the table box itself.

Caption-side property

The property caption-side is used to specify the position of the caption box with the respect to the table box.

The caption-side property contains following information:

  1. value: top, bottom or inherit;
  2. initial: top;
  3. applies to: table-caption elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

Values top and bottom position the caption box above and below the table box respectively. To align the caption horizontally, the text-align property may be used.

Table's internal elements generate rectangular boxes with their padding and border areas but with no margin areas.

A CSS table's content is laid out following these rules:

  1. Each row box occupies one row grid of cells. The rows populate the table from top to bottom.
  2. A row group box occupies the same grid of cells as the row it contains.
  3. A column box occupies one or more columns of grid cells. The columns, unlike the rows, may occur from left-to-right, as well as from right-to-left, depending on the direction property of the table.
  4. A column group box occupies the same grid of cells as the column it contains.
  5. Table cells may span several rows or columns.
  6. A cell box can't extend beyond the last row box.

Example

CSS caption and table box with the content example:

 

›› go to examples ››