When HTML was being developed, CSS was not widely supported, so websites were built primarily with tables.
Today tables are used for organizing data, like they should be.
Creating a Table
scope attribute helps to identify what content a table header relates to. Possible values are
rowgroup. This is especially useful for people using screen readers and other assistive technologies.
<caption> element provides a caption or title for a table. It must come immediately after the opening
<table> tag, and it is positioned at the top of a table by default.
Table Head, Body, & Foot
The table head element,
<thead>, wraps the heading row or rows of a table to denote the head. It should be placed at the top of a table, after any
<caption> element and before any
<tfoot> element had to come immediately after the
<thead> element, but HTML5 allows any order, as long as they are never parent elements of one another. The
<tbody> element should contain the primary data within a table, while the
<tfoot> element contains data that outlines the contents of a table.
Border Collapse Property
There are three values for the
separate (default), and
collapse value condenses the borders into one, choosing the table cell as the primary border.
Border Spacing Property
border-collapse property with the
separate value allows borders to be stacked up against one another, the
border-spacing property can determine how much space, if any, appears between the borders.
border-spacing property may accept two length values: the first value for horizontal spacing and the second value for vertical spacing.
Adding Borders to Rows
Borders cannot be applied to
<tr> elements or table structural elements.
It happens like this: set the table’s
border-collapse value to
collapse, and then add a bottom border to each table cell, regardless of whether it’s a
<td> element. You can remove the bottom border from the cells within the last row of the table by using the
:last-child pseudo-class selector. If the table is using the structural elements, make sure to prequalify the last row as being within the
You can use the
:nth-child pseudo-class selector with an
odd argument to select every other
<tr> element for custom styling.
<td> elements include borders while the
<th> elements don’t, you need to set the table’s
border-collapse property to
separate and the
border-spacing property to
0. In addition, you need to set each cell’s borders only once, for example by using the
border-bottom properties on the cells and the
border-left property on the cells in the first column.
Otherwise with the
border-collapse property set to
collapse, the borders of the
<td> elements would make the body of the table wider than the head.
vertical-align property works only with inline and table-cell elements. It won’t work for block, inline-block, or any other element levels. [JN: I’ve used
inline-block elements succesfully, so this is a little confusing. If you know why it works, please leave a comment.]
vertical-align values of
bottom vertically position the text in relation to the table cell, for table-cell elements, or to the closest parent element, for inline-level elements.
Completely Styled Table
You can use
display: block to force stuff on its own row within a table cell.
:only-of-type pseudo-class selector selects an element if it’s the only element of its type within a parent element.