More on HTML 5 Tables
Mastering HTML5 - Part 9
Forward: In this part of the series you will learn more on HTML 5 tables.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
Table Basics
A table element is used for data that is in a tabular form. A table element has the start tag, <table> and the end tag </table>. You have the <tbody> and </tbody> tags that enclose the rows of the table. A row begins with the tag, <tr> and ends with the tag, </tr>. Inside a row you have table cells. Each cell begins with the tag, <td> and ends with the tag, </td>. Cell datum goes in between the td tags. The number of cells should be the same for all the rows, resulting in a number of regular columns. For the headings of the columns, use the <th></th> elements instead of the <td></td> elements in the first row.
If there is no data in any of the cells of a row, then you should type, , for a space inside one of the cells of the row. If you do not do this, the row will collapse and may not be displayed on the screen (browser).
You can combine consecutive cells in a row to form one cell. Assume that you want to combine 3 cells in a row: you simply type one cell in place of the 3 cells as follows:
<td colspan= "3">datum</td>
You can combine consecutive cells in a column to form one cell. Assume that you want to combine 3 cells in a column: you simply type one cell in place of the 3 cells as follows:
<td rowspan= "3">datum</td>
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<th>Column0</th><th>Column1</th><th>Column2</th><th>Column3</th>
</tr>
<tr>
<td>Cell00</td><td>Cell01</td><td>Cell02</td><td rowspan="2">Big Cell03</td>
</tr>
<tr>
<td>Cell10</td><td>Cell11</td><td>Cell12</td>
</tr>
<tr>
<td>Cell20</td><td colspan="2">Long Cell21</td><td>Cell23</td>
</tr>
<tr>
<td>Cell30</td><td>Cell31</td><td>Cell32</td><td>Cell33</td>
</tr>
</tbody>
</table>
</body>
</html>
The caption element is a double-tag element. It is used for the title of the table. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<caption><b>Table Title</b></caption>
<tbody>
<tr><td>Cell00</td><td>Cell01</td></tr>
<tr><td>Cell10</td><td>Cell11</td></tr>
</tbody>
</table>
</body>
</html>
The caption element can take the text level elements such as b in its content. It can also take the heading elements e.g. h4. Note the position of the caption element in the above table code.
The tbody Element
The table tag elements, <table> and </table> are used to hold the whole table together. The tbody element is used to hold a number of rows together. You can have more than one tbody element in a table. Because of the tbody element, you can format groups of rows independently, using CSS. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<caption><b>Table Title</b></caption>
<tbody style="background-color:orange">
<tr><td>Cell00</td><td>Cell01</td></tr>
<tr><td>Cell10</td><td>Cell11</td></tr>
</tbody>
<tbody style="background-color:pink">
<tr><td>Cell20</td><td>Cell21</td></tr>
<tr><td>Cell30</td><td>Cell31</td></tr>
</tbody>
</table>
</body>
</html>
The thead Element
The thead element is used for a general-purpose header for the table. It typically has the th elements. The thead element has the column header rows for the table. It can have more than one row. It has the column headers for the table columns. It is a double-tag element.
The tfoot Element
The tfoot element is for column summaries (totals in the case of numbers) down in the table. It is for column footers of the table. It can have more than one row.
Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<caption><b>Table Title</b></caption>
<tbody>
<thead><tr><th>Col1</th><th>Col2</th></tr></thead>
<tr><td>10</td><td>20</td></tr>
<tr><td>30</td><td>40</td></tr>
<tfoot><tr><td>40</td><td>60</td></tr></tfoot>
</tbody>
</table>
</body>
</html>
The colgroup is a double tag element that is used to group columns in a table. It works either with another element called, the col element or with an attribute called, the span attribute. The value of the attribute is a positive integer. The colgroup and col elements are typed just below the start table tag. The col element is a single tag element. The col element represents one column but its use can conflict with the colgroup element. When columns are grouped, the group of columns can be formatted using CSS, independently.
Illustrations for the colgroup and col Elements
In the following table code samples, there are five columns for the same table. The first two columns are in one group, the third column does not belong to any group and the last tow columns belong to another group. So there are two groups and one column in the middle that does not belong to any group. The different code samples show the different ways of using the colgroup and col elements to achieve the same thing. You should read and try all the code samples, all of which have the same result. Note in particular, the coding of the colgroup and col elements.
In the following code, each column is represented by <col>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<colgroup style="background-color:pink"><col><col></colgroup>
<col>
<colgroup style="background-color:orange"><col><col>
<caption><b>Table Title</b></caption>
<tbody>
<thead><tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
<tr><td>10</td><td>20</td><td>50</td><td>70</td><td>80</td></tr>
<tr><td>30</td><td>40</td><td>60</td><td>90</td><td>100</td></tr>
<tfoot><tr><td>40</td><td>60</td><td>110</td><td>160</td><td>180</td></tr></tfoot>
</tbody>
</table>
</body>
</html>
In the following code, the <col> elements inside the colgroup elements of the previous code, have been removed and replaced indirectly by the (span="2") attribute in the start tag of each of the colgroup elements.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<colgroup style="background-color:pink" span="2"></colgroup>
<col>
<colgroup style="background-color:orange" span="2"></colgroup>
<caption><b>Table Title</b></caption>
<tbody>
<thead><tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
<tr><td>10</td><td>20</td><td>50</td><td>70</td><td>80</td></tr>
<tr><td>30</td><td>40</td><td>60</td><td>90</td><td>100</td></tr>
<tfoot><tr><td>40</td><td>60</td><td>110</td><td>160</td><td>180</td></tr></tfoot>
</tbody>
</table>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<table>
<col style="background-color:pink" span="2">
<col>
<col style="background-color:orange" span="2">
<caption><b>Table Title</b></caption>
<tbody>
<thead><tr><th>Col0</th><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
<tr><td>10</td><td>20</td><td>50</td><td>70</td><td>80</td></tr>
<tr><td>30</td><td>40</td><td>60</td><td>90</td><td>100</td></tr>
<tfoot><tr><td>40</td><td>60</td><td>110</td><td>160</td><td>180</td></tr></tfoot>
</tbody>
</table>
</body>
</html>
I hope you can see how the use of the col element conflicts with the use of the colgroup element in the previous code.
When you use the colgroup and or the col elements, you have to take each column into account as you divide all the columns of the table.
Table inside a Table
You can have a table inside another table. Just go into a table cell, between the <td> and the </td> tags and type another table completely. However, you will hardly need this for ordinary programming.
Time to take a break. Let us stop here. Rendezvous in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT