CSS Tables

Table Borders

To specify table borders in CSS, use the border property. The border-collapse: collapse; property is key to making the borders look clean by collapsing them into a single border.

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Table Width and Height

The width and height properties can be used to set the size of the table, as well as individual cells.

table { width: 100%; }
th { height: 70px; }

Text Alignment

Use text-align to control the horizontal alignment (left, right, center) and vertical-align to control the vertical alignment (top, middle, bottom) of content within table cells.

td { text-align: center; }
th { vertical-align: bottom; }

Zebra-Striped Tables

Zebra-striping (adding alternating background colors to rows) makes tables much easier to read. This can be done easily with the :nth-child(even) or :nth-child(odd) pseudo-class.

tr:nth-child(even) {
  background-color: #f2f2f2;
}