CSS Tables

In this tutorial you will learn how to style HTML tables with CSS.

Styling Tables with CSS

Tables are typically used to display tabular data, such as financial reports.
But when you create an HTML table without any styles or attributes, browsers display them without any border. With CSS you can greatly improve the appearance your tables.
CSS provides several properties that allow you to control the layout and presentation of the table elements. In the following section you will see how to use CSS to create elegant and consistent tables.

Adding Borders to Tables

The CSS border property is the best way to define the borders for the tables.

The following example will set a black border for the < table>, < th>, and < td> elements.

By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border problem you can simply collapse the adjoining table cell borders and create clean single line borders.

Let's take a look at the following illustration to understand how a border is applied to a table.

Collapsing Table Borders

There are two distinct models for setting borders on table cells in CSS: separate and collapse.

In the separate border model, which is the default, each table cell has its own distinct borders, whereas in the collapsed border model, adjacent table cells share a common border. You can set the border model for an HTML table by using the CSS border-collapse property.

The following style rules will collapse the table cell borders and apply one pixel black border.

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

Adjusting Space inside Tables

By default, the browser creates the table cells just large enough to contain the data in the cells.
To add more space between the table cell contents and the cell borders, you can simply use the CSS padding property. Let's try out the following example and see how it works:

th, td { padding: 15px; }

You can also adjust the spacing between the borders of the cells using the CSS border-spacing property, if the borders of your table are separated (which is default).

The following style rules apply the spacing of 10 pixels between all borders within a table:

table { border-spacing: 10px; }

Setting Table Width and Height

By default, a table will render just wide and tall enough to contain all of its contents.

However, you can also set the width and height of the table as well as its cells explicitly using the width and height CSS property. The style rules in the following example will sets the width of the table to 100%, and the height of the table header cells to 40px.

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

Controlling the Table Layout

A table expands and contracts to accommodate the data contained inside it. This is the default behavior. As data fills inside the table, it continues to expand as long as there is space. Sometimes, however, it is necessary to set a fixed width for the table in order to manage the layout.

You can do this with the help of CSS table-layout property. This property defines the algorithm to be used to layout the table cells, rows, and columns. This property takes one of two values:

The style rules in the following example specify that the HTML table is laid out using the fixed layout algorithm and has a fixed width of 300 pixels. Let's try it out and see how it works:

table { width: 300px; table-layout: fixed; }

Aligning the Text Inside Table Cells

You can align text content inside the table cells either horizontally or vertically.

Horizontal Alignment of Cell Contents

For horizontal alignment of text inside the table cells you can use the text-align property in the same way as you use with other elements. You align text to either left, right, center or justify.

The following style rules will left-align the text inside the < th> elements.

th { text-align: left; }

Vertical Alignment of Cell Contents

Similarly, you can vertically align the content inside the and elements to top, bottom, or middle using the CSS vertical-align property. The default vertical alignment is middle.

The following style rules will vertically bottom-align the text inside the elements.

th { height: 40px; vertical-align: bottom; }

Controlling the Position of Table Caption

You can set the vertical position of a table caption using the CSS caption-side property.

The caption can be placed either at the top or bottom of the table. The default position is top.

caption { caption-side: bottom; }

Handling Empty Cells

In tables that uses separate border model, which is default, you can also control the rendering of the cells that have no visible content using the empty-cells CSS property.

This property accepts a value of either show or hide. The default value is show, which renders empty cells like normal cells, but if the value hide is specified no borders or backgrounds are drawn around the empty cells. Let's try out an example to understand how it really works:

table { border-collapse: separate; empty-cells: hide; }

Creating Zebra-striped Tables

Setting different background colors for alternate rows is a popular technique to improve the readability of tables that has large amount of data. This is commonly known as zebra-striping a table.

You can simply achieve this effect by using the CSS :nth-child() pseudo-class selector.

The following style rules will highlight every odd rows within the table body.

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

A zebra-striped table typically looks something like the following picture.

Making a Table Responsive

Tables are not responsive in nature. However, to support mobile devices you can add responsiveness to your tables by enabling horizontal scrolling on small screens. To do this simply wrap your table with a < div> element and apply the style overflow-x: auto; as shown below:

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