A basic HTML table has the following structure:
1<table>
2 <tr>
3 <td>John Doe</td>
4 <td>30</td>
5 <td>Software Engineer</td>
6 <td>USA</td>
7 <td>john.doe@example.com</td>
8 </tr>
9 <tr>
10 <td>Jane Smith</td>
11 <td>28</td>
12 <td>Data Scientist</td>
13 <td>Canada</td>
14 <td>jane.smith@example.com</td>
15 </tr>
16 . . .
17</table>Each <tr> element defines a table row, and each <td> element defines a table cell (td stands for table data).
Sometimes, you might want to add a table header that gives information about the type of data that the row or column contains. Table header is defined with the <th> element.
1<table>
2 <tr>
3 <th>Name</th>
4 <th>Age</th>
5 <th>Occupation</th>
6 <th>Country</th>
7 <th>Email</th>
8 </tr>
9 <tr>
10 <td>John Doe</td>
11 <td>30</td>
12 <td>Software Engineer</td>
13 <td>USA</td>
14 <td>john.doe@example.com</td>
15 </tr>
16 . . .
17</table>To create a vertical header, place the <th> element as the first child element inside each table row:
1<table>
2 <tr>
3 <th>Name</th>
4 <td>John Doe</td>
5 <td>. . .</td>
6 </tr>
7 <tr>
8 <th>Age</th>
9 <td>30</td>
10 <td>. . .</td>
11 </tr>
12 . . .
13</table>Table border
Previously, we used the attribute border="1" to add a border for the table. However, in practice, it is best to use CSS to control the appearance of the table like this:
1table,
2th,
3td {
4 border: 1px solid;
5}
By default, the table has a double border. This is because both the table element (<table>) and each individual table cell (<td>) have their own borders. Using CSS, you may collapse them into one by setting a table-collapse property.
1table {
2 border-collapse: collapse;
3}
Aside from this small detail, the table border acts exactly like the border of any other HTML components we've discussed so far. For instance, you can customize the border width, color, and radius:
Cells that span multiple rows and columns
Consider this example:
1<table border="1">
2 <tr>
3 <th>Name</th>
4 <th>Age</th>
5 <th>Occupation</th>
6 <th>Contact Information</th>
7 </tr>
8 <tr>
9 <th>Email</th>
10 <th>Phone</th>
11 </tr>
12 <tr>
13 <td>John Doe</td>
14 <td>30</td>
15 <td>Software Engineer</td>
16 <td>john.doe@example.com</td>
17 <td>123-456-7890</td>
18 </tr>
19 <tr>
20 <td>Jane Smith</td>
21 <td>28</td>
22 <td>Data Scientist</td>
23 <td>jane.smith@example.com</td>
24 <td>987-654-3210</td>
25 </tr>
26</table>Here, the table header is slightly more complex. The idea is to make the header occupy two rows, and the Contact Information should have two sub-headers, Email and Phone.
By default, each table cell occupies one row and one column, but in this case, Name, Age, and Occupation should span over two rows, and Contact Information should span over two columns for this table to make sense.
This effect can be achieved using the colspan and rowspan attributes.
1<table border="1">
2 <tr>
3 <th rowspan="2">Name</th>
4 <th rowspan="2">Age</th>
5 <th rowspan="2">Occupation</th>
6 <th colspan="2">Contact Information</th>
7 </tr>
8 <tr>
9 <th>Email</th>
10 <th>Phone</th>
11 </tr>
12 <tr>
13 <td>John Doe</td>
14 <td>30</td>
15 <td>Software Engineer</td>
16 <td>john.doe@example.com</td>
17 <td>123-456-7890</td>
18 </tr>
19 <tr>
20 <td>Jane Smith</td>
21 <td>28</td>
22 <td>Data Scientist</td>
23 <td>jane.smith@example.com</td>
24 <td>987-654-3210</td>
25 </tr>
26</table>Styling your table
Just like any other block-level element, you can define the width and height of the table and table cells.
1table,
2th,
3td {
4 border: 1px solid;
5}
6
7table {
8 border-collapse: collapse;
9 width: 100%;
10}
11
12th,
13td {
14 height: 50px;
15}
As you can see, when there are extra spaces, the <td> will be vertically centered and horizontally left-aligned. The <th> will be centered both vertically and horizontally.
You can customize the alignment using text-align and vertical-align properties. text-align changes the horizontal alignment, and vertical-align changes the vertical alignment.
1th,
2td {
3 height: 50px;
4
5 text-align: center;
6 vertical-align: center;
7}
We will discuss more about how to align elements later.