17 Tables
This chapter defines the processing model for tables in CSS. Part of this processing model is the layout. For the layout, this chapter introduces two algorithms; the first, the fixed table layout algorithm, is well-defined, but the second, the automatic table layout algorithm, is not fully defined by this specification.
For the automatic table layout algorithm, some widely deployed implementations have achieved relatively close interoperability.
Table layout can be used to represent tabular relationships between data. Authors specify these relationships in the document language and can specify their presentation using CSS 2.2.
In a visual medium, CSS tables can also be used to achieve specific layouts. In this case, authors should not use table-related elements in the document language, but should apply the CSS to the relevant structural elements to achieve the desired layout.
Authors may specify the visual formatting of a table as a rectangular grid of cells. Rows and columns of cells may be organized into row groups and column groups. Rows, columns, row groups, column groups, and cells may have borders drawn around them (there are two border models in CSS 2.2). Authors may align data vertically or horizontally within a cell and align data in all cells of a row or column.
Here is a simple three-row, three-column table described in HTML 4:
This code creates one table (the TABLE element), three rows (the TR elements), three header cells (the TH elements), and six data cells (the TD elements). Note that the three columns of this example are specified implicitly: there are as many columns in the table as required by header and data cells.
The following CSS rule centers the text horizontally in the header cells and presents the text in the header cells with a bold font weight:
The next rules align the text of the header cells on their baseline and vertically center the text in each data cell:
The next rules specify that the top row will be surrounded by a 3px solid blue border and each of the other rows will be surrounded by a 1px solid black border:
table < border-collapse: collapse >tr#row1 < border: 3px solid blue >tr#row2 < border: 1px solid black >tr#row3
Note, however, that the borders around the rows overlap where the rows meet. What color (black or blue) and thickness (1px or 3px) will the border between row1 and row2 be? We discuss this in the section on border conflict resolution.
The following rule puts the table caption above the table:
The preceding example shows how CSS works with HTML 4 elements; in HTML 4, the semantics of the various table elements (TABLE, CAPTION, THEAD, TBODY, TFOOT, COL, COLGROUP, TH, and TD) are well-defined. In other document languages (such as XML applications), there may not be pre-defined table elements. Therefore, CSS 2.2 allows authors to «map» document language elements to table elements via the ‘display’ property. For example, the following rule makes the FOO element act like an HTML TABLE element and the BAR element act like a CAPTION element:
We discuss the various table elements in the following section. In this specification, the term refers to any element involved in the creation of a table. An is one that produces a row, row group, column, column group, or cell.
17.2 The CSS table model
The CSS table model is based on the HTML4 table model, in which the structure of a table closely parallels the visual layout of the table. In this model, a table consists of an optional caption and any number of rows of cells. The table model is said to be «row primary» since authors specify rows, not columns, explicitly in the document language. Columns are derived once all the rows have been specified — the first cell of each row belongs to the first column, the second to the second column, etc.). Rows and columns may be grouped structurally and this grouping reflected in presentation (e.g., a border may be drawn around a group of rows).
Thus, the table model consists of tables, captions, rows, row groups (including header groups and footer groups), columns, column groups, and cells.
The CSS model does not require that the document language include elements that correspond to each of these components. For document languages (such as XML applications) that do not have pre-defined table elements, authors must map document language elements to table elements; this is done with the ‘display’ property. The following ‘display’ values assign table formatting rules to an arbitrary element: table (In HTML: TABLE) Specifies that an element defines a block-level table: it is a rectangular block that participates in a block formatting context. inline-table (In HTML: TABLE) Specifies that an element defines an inline-level table: it is a rectangular block that participates in an inline formatting context). table-row (In HTML: TR) Specifies that an element is a row of cells. table-row-group (In HTML: TBODY) Specifies that an element groups one or more rows. table-header-group (In HTML: THEAD) Like ‘table-row-group’, but for visual formatting, the row group is always displayed before all other rows and row groups and after any top captions. Print user agents may repeat header rows on each page spanned by a table. If a table contains multiple elements with ‘display: table-header-group’, only the first is rendered as a header; the others are treated as if they had ‘display: table-row-group’. table-footer-group (In HTML: TFOOT) Like ‘table-row-group’, but for visual formatting, the row group is always displayed after all other rows and row groups and before any bottom captions. Print user agents may repeat footer rows on each page spanned by a table. If a table contains multiple elements with ‘display: table-footer-group’, only the first is rendered as a footer; the others are treated as if they had ‘display: table-row-group’. table-column (In HTML: COL) Specifies that an element describes a column of cells. table-column-group (In HTML: COLGROUP) Specifies that an element groups one or more columns. table-cell (In HTML: TD, TH) Specifies that an element represents a table cell. table-caption (In HTML: CAPTION) Specifies a caption for the table. All elements with ‘display: table-caption’ must be rendered, as described in section 17.4.
Replaced elements with these ‘display’ values are treated as their given display types during layout. For example, an image that is set to ‘display: table-cell’ will fill the available cell space, and its dimensions might contribute towards the table sizing algorithms, as with an ordinary cell.
Elements with ‘display’ set to ‘table-column’ or ‘table-column-group’ are not rendered (exactly as if they had ‘display: none’), but they are useful, because they may have attributes which induce a certain style for the columns they represent.
The default style sheet for HTML4 in the appendix illustrates the use of these values for HTML4:
table < display: table >tr < display: table-row >thead < display: table-header-group >tbody < display: table-row-group >tfoot < display: table-footer-group >col < display: table-column >colgroup < display: table-column-group >td, th < display: table-cell >caption
User agents may ignore these ‘display’ property values for HTML table elements, since HTML tables may be rendered using other algorithms intended for backwards compatible rendering. However, this is not meant to discourage the use of ‘display: table’ on other, non-table elements in HTML.
17.2.1 Anonymous table objects
For the purposes of these rules, the following terms are defined: row group box A ‘table-row-group’, ‘table-header-group’, or ‘table-footer-group’ proper table child A ‘table-row’ box, row group box, ‘table-column’ box, ‘table-column-group’ box, or ‘table-caption’ box. proper table row parent A ‘table’ or ‘inline-table’ box or row group box internal table box A ‘table-cell’ box, ‘table-row’ box, row group box, ‘table-column’ box, or ‘table-column-group’ box. tabular container A ‘table-row’ box or proper table row parent consecutive Two sibling boxes are consecutive if they have no intervening siblings other than, optionally, an anonymous inline containing only white spaces. A sequence of sibling boxes is consecutive if each box in the sequence is consecutive to the one before it in the sequence.
For the purposes of these rules, out-of-flow elements are represented as inline elements of zero width and height. Their containing blocks are chosen accordingly.
- Remove irrelevant boxes:
- All child boxes of a ‘table-column’ parent are treated as if they had ‘display: none’.
- If a child C of a ‘table-column-group’ parent is not a ‘table-column’ box, then it is treated as if it had ‘display: none’.
- If a child C of a tabular container P is an anonymous inline box that contains only white space, and its immediately preceding and following siblings, if any, are proper table descendants of P and are either ‘table-caption’ or internal table boxes, then it is treated as if it had ‘display: none’. A box D is a proper table descendant of A if D can be a descendant of A without causing the generation of any intervening ‘table’ or ‘inline-table’ boxes.
- If a box B is an anonymous inline containing only white space, and is between two immediate siblings each of which is either an internal table box or a ‘table-caption’ box then B is treated as if it had ‘display: none’.
- If a child C of a ‘table’ or ‘inline-table’ box is not a proper table child, then generate an anonymous ‘table-row’ box around C and all consecutive siblings of C that are not proper table children.
- If a child C of a row group box is not a ‘table-row’ box, then generate an anonymous ‘table-row’ box around C and all consecutive siblings of C that are not ‘table-row’ boxes.
- If a child C of a ‘table-row’ box is not a ‘table-cell’, then generate an anonymous ‘table-cell’ box around C and all consecutive siblings of C that are not ‘table-cell’ boxes.
- For each ‘table-cell’ box C in a sequence of consecutive internal table and ‘table-caption’ siblings, if C ‘s parent is not a ‘table-row’ then generate an anonymous ‘table-row’ box around C and all consecutive siblings of C that are ‘table-cell’ boxes.
- For each proper table child C in a sequence of consecutive proper table children, if C is misparented then generate an anonymous ‘table’ or ‘inline-table’ box T around C and all consecutive siblings of C that are proper table children. (If C’s parent is an ‘inline’ box, then T must be an ‘inline-table’ box; otherwise it must be a ‘table’ box.)
- A ‘table-row’ is misparented if its parent is neither a row group box nor a ‘table’ or ‘inline-table’ box.
- A ‘table-column’ box is misparented if its parent is neither a ‘table-column-group’ box nor a ‘table’ or ‘inline-table’ box.
- A row group box, ‘table-column-group’ box, or ‘table-caption’ box is misparented if its parent is neither a ‘table’ box nor an ‘inline-table’ box.
In this XML example, a ‘table’ element is assumed to contain the HBOX element:
because the associated style sheet is:
HTML Table Borders
HTML tables can have borders of different styles and shapes.
How To Add a Border
To add a border, use the CSS border property on table , th , and td elements:
Example
Collapsed Table Borders
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .
This will make the borders collapse into a single border:
Example
Style Table Borders
If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:
Example
table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>Round Table Borders
With the border-radius property, the borders get rounded corners:
Example
Skip the border around the table by leaving out table from the css selector:
Example
Dotted Table Borders
With the border-style property, you can set the appearance of the border.
The following values are allowed:
Example
Border Color
With the border-color property, you can set the color of the border.
Example
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
