Tables are often used to show data in a structured way, like financial statements.
When you make an HTML table without any styles, browsers display them with no border. Using CSS, you can make your tables look much better.
CSS has several properties that help you manage the layout and look of table elements. In the next section, you'll learn how to use CSS to create stylish and consistent tables.
The CSS border property is the best way to add borders to tables.
This example sets a black border for the <table>, <th>, and <td> elements.
table, th, td {
border: 1px solid black;
}Normally, browsers add a border around the table and each cell, with some space in between, causing a double border. To fix this, you can collapse the borders of adjacent cells into a single border.
Check out the illustration below to see how a border is applied to a table.
There are two models for setting table cell borders in CSS: separate and collapse.
In the separate border model, which is the default, each cell has its own borders. In the collapsed border model, adjacent cells share a common border. You can set this using the CSS border-collapse property.
The following styles will collapse the cell borders and apply a one-pixel black border.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}Note: You can also remove the space between table cell borders by setting the CSS border-spacing property to 0. However, this only removes the space and doesn't merge the borders like border-collapse: collapse does.
By default, the browser makes table cells just big enough to hold their content.
To add more space between the cell contents and their borders, use the CSS padding property. Try the following example to see how it works:
th, td {
padding: 15px;
}You can also change the space between cell borders using the CSS border-spacing property, if the borders of your table are separated (default).
The following style rules set a 10-pixel space between all borders within a table:
table {
border-spacing: 10px;
}By default, a table will be just wide and tall enough to fit its contents.
You can set the width and height of the table and its cells using the CSS width and height properties. The styles in the following example set the table width to 100% and the table header cell height to 40px.
table {
width: 100%;
}
th {
height: 40px;
}A table automatically adjusts its size to fit the data inside it. This is how it usually works. As you add more data, the table grows as long as there is room. However, sometimes you need to set a fixed width for the table to control the layout.
You can achieve this using the CSS table-layout property. This property sets the algorithm used to lay out table cells, rows, and columns. It can take one of two values:
The following example shows how to use the fixed layout algorithm and set a fixed width of 300 pixels for an HTML table. Let's see how it works:
table {
width: 300px;
table-layout: fixed;
}Tip: You can improve table rendering performance by setting the table-layout property to fixed. This allows the table to render one row at a time, giving users information more quickly.
Note: Without the fixed value for the table-layout property, users won't see any part of a large table until the entire table is rendered by the browser.
You can align text inside table cells both horizontally and vertically.
To align text horizontally inside table cells, use the text-align property, just like with other elements. Text can be align to the left, right, center, or justify.
The following style rules will left-align the text inside <th> elements.
th {
text-align: left;
}Note: By default, text inside <td> elements is left-aligned, while text inside <th> elements is center-aligned and bold.
You can also vertically align the content inside <th> and <td> elements to the top, bottom, or middle using the CSS vertical-align property. The default vertical alignment is middle.
The following style rules will bottom-align the text inside <th> elements.
th {
height: 40px;
vertical-align: bottom;
}You can adjust the vertical placement of a table caption using the CSS caption-side property.
The caption can be positioned either at the top or bottom of the table. By default, it's placed at the top.
caption {
caption-side: bottom;
}Tip: To change the horizontal alignment of the table's caption text (e.g., left or right), you can use the CSS text-align property, just like with normal text.
In tables that use the separate border model, which is the default, you can control the rendering of cells with no visible content using the empty-cells CSS property.
This property accepts either show or hide. The default value is show, which displays empty cells like regular cells. If hide is specified, no borders or backgrounds are drawn around the empty cells. Here's an example to illustrate how it works:
table {
border-collapse: separate;
empty-cells: hide;
}Note: Placing a non-breaking space ( ) inside a table cell makes it non-empty. Therefore, even if the cell looks empty, the hide value will not hide the borders and backgrounds.
Setting different background colors for alternate rows is a popular technique to improve the readability of tables with large amounts of data. This technique is commonly referred to as zebra-striping a table.
You can achieve this effect by using the CSS :nth-child() pseudo-class selector.
The following style rules will highlight every odd row within the table body.
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}A zebra-striped table typically looks something like the following picture.
Note: The :nth-child() pseudo-class selects elements based on their position in a group of siblings. It can take a number, the keywords even or odd, or an expression of the form xn+y where x and y are integers (e.g., 1n, 2n, 2n+1, ...).
Tables are not responsive by default. However, to support mobile devices, you can make tables responsive 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>