CSS Tables

The look of an HTML table can be greatly improved with CSS.

Example 1: Table Borders

To specify table borders in CSS, use the border property.

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example 2: Collapse Table Borders

The border-collapse property sets whether the table borders should be collapsed into a single border.

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example 3: Table Width and Height

Width and height of a table are defined by the width and height properties.

Firstname	Lastname	Savings
Peter	Griffin	$100

Example 4: Horizontal Alignment

The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.

Firstname	Lastname	Savings
Peter	Griffin	$100

Example 5: Table Style

This example demonstrates a fancy table style with hover effect and striped rows.

Firstname	Lastname	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico

Example

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

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