CSS Tables

Using CSS can greatly improve the appearance of HTML tables:

Company Contact Address City
Alibaba Ma Yun No. 699, Wangshang Road, Binjiang District Hangzhou
APPLE Tim Cook 1 Infinite Loop Cupertino, CA 95014 Cupertino
BAIDU Li YanHong Lixiang guoji dasha, No 58, beisihuanxilu Beijing
Canon Tsuneji Uchida One Canon Plaza Lake Success, NY 11042 New York
Google Larry Page 1600 Amphitheatre Parkway Mountain View, CA 94043 Mountain View
HUAWEI Ren Zhengfei Putian Huawei Base, Longgang District Shenzhen
Microsoft Bill Gates 15700 NE 39th St Redmond, WA 98052 Redmond
Nokia Olli-Pekka Kallasvuo P.O. Box 226, FIN-00045 Nokia Group Helsinki
SONY Kazuo Hirai Park Ridge, NJ 07656 Park Ridge
Tencent Ma Huateng Tencent Building, High-tech Park, Nanshan District Shenzhen

Try it yourself

Table borders

To set table borders in CSS, use border Attribute.

The following example specifies black borders for the <table>, <th>, and <td> elements:

Firstname Lastname
Bill Gates
Steve Jobs

Container element (such as <div>)

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

Try it yourself

Note:The table in the above example has double borders. This is because the table and <th> and <td> elements all have separate borders.

Full-width table

In some cases, the table above may seem small. If you need a table that covers the entire screen (full width), add width: 100% to the <table> element:

Container element (such as <div>)

table {
  width: 100%;
}

Try it yourself

Double borders

Please note that the table above has double borders. This is because the table and th, td elements have separate borders.

To remove double borders, see the following example.

Merge table borders

border-collapse Attribute sets whether the table borders are collapsed into a single border:

Firstname Lastname
Bill Gates
Steve Jobs

Container element (such as <div>)

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

Try it yourself

If you only want a border around the table, you only need to specify border property:

Firstname Lastname
Bill Gates
Steve Jobs

Container element (such as <div>)

table {
  border: 1px solid black;
}

Try it yourself

Table width and height

The width and height of the table are defined by width and height Attribute definition.

The following example sets the table width to 100% and the height of the <th> element to 50px:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

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

Try it yourself

To create a table that occupies half of the page, use width: 50%:

Container element (such as <div>)

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

Try it yourself

Horizontal alignment

text-align Attribute sets the horizontal alignment of the content within <th> or <td> (left, right, or center).

By default, the content of the <th> element is centered, while the content of the <td> element is left-aligned.

To also center-align the content of the <td> element, use text-align: center:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

th {
  text-align: center;
}

Try it yourself

The following example makes the text in the <th> element left-aligned:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

th {
  text-align: left;
}

Try it yourself

Vertical alignment

vertical-align Attribute sets the vertical alignment of the content within <th> or <td> (top, bottom, or center).

By default, the vertical alignment of the content in the table is centered (both <th> and <td> elements are).

The following example sets the vertical text alignment of the <td> element to bottom alignment:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

td {
  height: 50px;
  vertical-align: bottom;
}

Try it yourself

table padding

To control the spacing between the border and the table content, use padding property:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

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

Try it yourself

horizontal separators

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Add to the <th> and <td> elements to border-bottom property, to implement horizontal separators:

Container element (such as <div>)

th, td {
  border-bottom: 1px solid #ddd;
}

Try it yourself

hoverable table

on the <tr> element selector, to highlight the table row when the mouse hovers over it: :hover

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

tr:hover {background-color: #f5f5f5;}

Try it yourself

striped table

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

To achieve the zebra striping effect, use nth-child() selector, and add it to all even (or odd) table rows: background-color:

Container element (such as <div>)

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

Try it yourself

Table color

The following example specifies the background color and text color of the <th> element:

Firstname Lastname Savings
Bill Gates $100
Steve Jobs $150
Elon Musk $300

Container element (such as <div>)

th {
  background-color: #4CAF50;
  color: white;
}

Try it yourself

Responsive table

If the screen is too small to display all the content, the responsive table will display a horizontal scrollbar:

First Name Last Name Points Points Points Points Points Points Points Points Points Points
Bill Gates 50 50 50 50 50 50 50 50 50 50
Steve Jobs 94 94 94 94 94 94 94 94 94 94
Elon Musk 67 67 67 67 67 67 67 67 67 67

Add a with overflow-x:auto to achieve responsive effects:

Container element (such as <div>)

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

Try it yourself

Note:In OS X Lion (on Mac), the scrollbar is hidden by default and only appears when in use (even if 'overflow:scroll' is set).

More examples

Make a stylish table
This example demonstrates how to create a stylish table.
Set the position of the table title
This example demonstrates how to position the table title.

CSS table properties

property description
border Shorthand property. Sets all border properties in one declaration.
border-collapse Specifies whether the table borders should be folded.
border-spacing Specifies the distance between adjacent cells.
caption-side Specifies the position of the table title.
empty-cells Specifies whether borders and backgrounds are displayed on the blank cells in the table.
table-layout Set the layout algorithm for the table.