CSS Styling Tables
You are quite familiar with tables in HTML (recall the <table> tag?). A table is essentially a spreadsheet, that consists of rows and columns. You will be using tables on your website more often than you think, so let's learn more about how to make them look beautiful with CSS. We shall focus on both, the CSS as well as the HTML part in this module.
The actual first row of most tables contains no data, it simply contains the titles of the columns. So wouldn't it be better that we explicitly mention this? This can be done by using the <thead> element, so that the viewer can differentiate correctly between column names and column data. It can include multiple rows of header information in it.
NOTE: When you use <thead>, there must be no <tr> that is a direct child of the <table> element. All <tr> must appear within the <thead>, <tbody> or the <tfoot> element.
Some tables have footers too. Consider a printed receipt at a supermarket where the foot of the table shows you the total amount in big bold letters (as if you didn't already know how expensive the groceries are!) Anyway, the <tfoot> element is used to showcase the table footer information. Now you may expect this element to appear after the <thead> & <body> elements. However this is not the case. The <tfoot> has to be after <thead> & before the <tbody> tags. <tfoot> is used for wrapping table rows that indicate the footer of the table.
In spite of this abnormal tag placement, the <tfoot> does actually render at the bottom of the table. Most tables seen on websites use colors and lines to distinguish elements from one another. Borders are crucial in this scenario. By default, all table elements have a border of 2px by default.
| Column 1 Heading |
Column 2 Heading |
| Foot Note 1 |
Foot Note 2 |
| Hello column 1 |
Hello column 2 |
Here is the HTML code for above table:
<table id="table-style-1">
<thead>
<tr>
<th>Column 1 Heading</th>
<th>Column 2 Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Foot Note 1</td>
<td>Foot Note 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Hello column 1</td>
<td>Hello column 2</td>
</tr>
</tbody>
</table>
To specify table borders, we use the border property of the table.
#table-style-1{
border: 0.5px solid black;
}
Live Example →
Just like we learnt in the last tutorial, border-width, border-style and border-color.
The above example modifies the border of the said table element to 0.5px with solid black. But consider the following example,
table, th, td{ border: 1px solid black; }
In the above example, the table will have double borders due to both <th> and <td> having different borders. If you want to display a single border, use the border-collapse property as follows.
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Live Example →
Go ahead and try this to see how the table looks with and without the property border-collapse.
Note: If the <!DOCTYPE> is not specified, the border-collapse property can produce unexpected results in IE8 and earlier versions.
Text Alignment and Width & Height
You can also change the horizontal text alignment in a table column. This is done by text-align property with which we are already familiar with.
The data in <th> element is by default center-aligned and the data in <td> is by default left-aligned. But we can change them, whenever we want.
th{ text-align: left; }
The height and width of a table are also customizable. The example below sets the width of the table to a 100% (covering entire width of the page) and height of the header row to 80px.
table {
width: 100%;
}
th, td {
height: 40px;
}
Live Example →
| Column 1 Heading |
Column 2 Heading |
| Foot Note 1 |
Foot Note 2 |
| Hello column 1 |
Hello column 2 |
Vertical Text Alignment
The vertical-align property is used to define the top, bottom or middle alignment of text in a table. By default, this is set to middle.
table {
width: 100%;
}
td {
height: 40px;
}
th{
height: 40px;
vertical-align: bottom;
}
| Column 1 Heading |
Column 2 Heading |
| Foot Note 1 |
Foot Note 2 |
| Hello column 1 |
Hello column 2 |
Text Color and Background Color
You can set the text color and the background color of the table using the properties color and background-color. The border colors can also be specified using the border property.
td{
background-color: #EEEEEE;
color: blue;
border: 1px solid red;
}
Live Example →
| Column 1 Heading |
Column 2 Heading |
| Foot Note 1 |
Foot Note 2 |
| Hello column 1 |
Hello column 2 |
