CSS Tables
This tutorial helps you learn how to style HTML tables with CSS.
Styling Tables with CSS
Tables are used for displaying tabular data, like financial reports. When an HTML table is created without any styles or attributes, then browsers display them without any border. Therefore, the appearance of your tables can be significantly improved using CSS.
CSS offers many properties that let you control the table element's layout and presentation. The following section helps you learn how to use CSS for creating elegant and consistent tables.
Adding Borders to Tables
The CSS border property is an excellent way to define the table borders.
The below example tells how to set a black border for the table <table>, <th>, and <td> elements.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Adding Borders to Tables</h2>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Country</th>
</tr>
<tr>
<td>Ada</td>
<td>[email protected]</td>
<td>UAE</td>
</tr>
<tr>
<td>Sidney Bermudez</td>
<td>[email protected]</td>
<td>USA</td>
</tr>
<tr>
<td>Tristan Sumacote</td>
<td>[email protected]</td>
<td>USA</td>
</tr>
</table>
</body>
</html>
By default, the browser draws a border around the table, and all the cells, with spacing in-between, resulting in the double border. However, you can collapse the adjoining table cell borders to eliminate this double border problem and create clean single-line borders.
Let's look at the example given here to understand how a border is applied to a table.
Collapsing Table Borders
In CSS, you can set the borders on a table in two different ways: separate and collapse. The separate border model is the default model. In it, each table cell has its distinct borders. The other border model is the collapsed border model. In it, adjacent table cells share a common border. The border model can be set for an HTML table using the CSS border-collapse property.
The below-mentioned style rules will collapse the table cell borders and apply a one-pixel black border.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Adding Borders to Tables</h2>
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Country</th>
</tr>
<tr>
<td>Ada</td>
<td>[email protected]</td>
<td>UAE</td>
</tr>
<tr>
<td>Sidney Bermudez</td>
<td>[email protected]</td>
<td>USA</td>
</tr>
<tr>
<td>Tristan Sumacote</td>
<td>[email protected]</td>
<td>USA</td>
</tr>
</table>
</body>
</html>Note: The space between the table cell borders can be removed by setting the CSS border-spacing property's value to 0. Although, this will only remove the space and will not merge the borders like in case when the border is to-collapse to collapse.
Adjusting Space inside Tables
By default, the table cells created by the browser are large enough to contain the data in the cells.
You can add more space between the table cell contents and the cell borders using the CSS padding property. Let's use the following example to see how it works:
Example :
th, td {
padding: 15px;
}You can also use the CSS border padding to adjust the spacing between the borders of the cells if the borders of your table are separated (which is default).
The style rules mentioned below apply the spacing of 10 pixels between all borders within a table:
Example :
table {
border-spacing: 10px;
}Setting Table Width and Height
By default, a table is wide and tall enough to contain all its contents.
However, the width and height of the table and its cells can be explicitly set using the width and height CSS property. In the example given here, the style rules will set the table's width to 100% and the table header cell's height to 40px.
Example :
table {
width: 100%;
}
th {
height: 40px;
}
Controlling the Table Layout
As per the default behavior of a table, it can expand and contract to accommodate the data contained inside the table. As data fill inside, the table continues to expand till there is space. However, sometimes, it is required to set a fixed width for the table to manage its layout, and this can be done with the help of the CSS table-layout property. This property specifies the algorithm to be used to lay out the table cells, rows, and columns. This property takes one of two values:
- Auto — Here, an automatic table layout algorithm is used. The table and its cell's width are adjusted to fit the content with an auto algorithm. This is the default value.
- Fixed — Here, the fixed table layout algorithm is used. With a fixed algorithm, the table's horizontal layout does not depend on the cell's contents; it only depends on the table's width, the columns' width, and borders or cell spacing. It usually is faster than auto.
The style rules in the example mentioned here specify that the HTML table is laid out using the fixed layout algorithm with a fixed width of 300 pixels. Let's see how it works:
Example :
table {
width: 400px;
table-layout: fixed;
}
Tip: The table rendering performance can be optimised by specifying the value fixed for the table-layout property. The fixed value of this property causes the table to be rendered one row at a time, thereby providing users with information at a faster rate.
Note: Without a fixed value of the table-layout property on large tables, users will not be able to see any part of the table until the browser has rendered the whole table.
Aligning the Text Inside Table Cells
The text content inside the table cells can be aligned either horizontally or vertically.
Horizontal Alignment of Cell Contents
To align the text inside the table cells horizontally, you can use the text-align property the same way you use it with other elements. You can align text to the left, right, center, or justify.
The style rules given here will left-align the text inside the <th> elements.