CSS Tables

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

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

The example below specifies a black border for <table>, <th>, and <td> elements:

Example

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

Try it Yourself »

Notice that the table in the example above has double borders. This is because both the table and the <th> and <td> elements have separate borders.

Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single border:

Example

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

Try it Yourself »

If you only want a border around the table, only specify the border property for <table>:

Example

table {
    border: 1px solid black;
}

Try it Yourself »

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

The example below sets the width of the table to 100%, and the height of the <th> elements to 50px:

Example

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

Try it Yourself »

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

By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.

The following example left-aligns the text in <th> elements:

Example

th {
    text-align: left;
}

Try it Yourself »

Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

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

The following example sets the vertical text alignment to bottom for <td> elements:

Example

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

Try it Yourself »

Table Padding
To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

Example

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

Try it Yourself »

Horizontal Dividers

Add the border-bottom property to <th> and <td> for horizontal dividers:

Example

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

Try it Yourself »

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:

Example

tr:hover {background-color: #f5f5f5}

Try it Yourself »

Striped Tables

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Example

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

Try it Yourself »

Table Color
The example below specifies the background color and text color of <th> elements:

Example

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

Try it Yourself »

Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full content:

Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive:

Example

<div style=”overflow-x:auto;”>
<table>
… table content …
</table>
</div>

Try it Yourself »

CSS Table Properties

Property
Description
border Sets all the border properties in one declaration
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table

Leave a Reply

Your email address will not be published.