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.
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:
- value: top, bottom or inherit;
- initial: top;
- applies to: table-caption elements;
- inherited: yes;
- percentages: N/A;
- media: visual;
- 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.
A CSS table's content is laid out following these rules:
- Each row box occupies one row grid of cells. The rows populate the table from top to bottom.
- A row group box occupies the same grid of cells as the row it contains.
- 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.
- A column group box occupies the same grid of cells as the column it contains.
- Table cells may span several rows or columns.
- A cell box can't extend beyond the last row box.
CSS caption and table box with the content example: