Now that we’ve learned how to put column headings in tables, it’s now time to move forward and learn how to name tables in HTML. Just like most titles, whether it is a title on an essay or a title on a webpage, we want it to go all across the top of the content; in this case, our table. To achieve that, we will be using an attribute called “colspan”. Think of colspan as merging the cells into one just like in Microsoft Excel.
Let's take a look at an example of how colspan is incorporate in HTML:
1<!DOCTYPE html>
2<html>
3<head>
4<title>Tables in HTML</title>
5</head>
6<body>
7<table border=”1px””>
8<thead>
9<tr>
10<th colspan=”3”>Bike Chart</th>
11</tr>
12<tr>
13<th>Bike Type</th>
14<th>Price</th>
15<th>Availability</ht>
16</tr>
17</thead>
18<tbody>
19<tr>
20<td>Trek Madone</td>
21<td>MSRP $3,400</td>
22<td>Yes</td>
23</tr>
24<tr>
25<td>Pinarello Dogma F8</td>
26<td>MSRP $4,499</td>
27<td>out of stock</td>
28<tr>
29</tbody>
30</table>
31</body>
32</html>
If you look at lines 9 through 10 of our code, you can see that in order to put a name to your table that spans the whole top row using colspan, you must first create the entire row where the table name will go (clearly seen in line 9 where we opened a <tr> tag). Once you've created the row, all you need to do is create a table header using the <th> tag and apply a colspan attribute that has a value of the number of columns that you want it to go across; in this case, 3 columns. Below is an example of how the previous code would be rendered in the browser: