Hello dear readers! welcome back to another section of my tutorial on Html. In my last tutorial guide, i talked about Html tables though i did not round up with the tutorial guide. In this tutorial guide am going to be rounding up with the Html tables that we treated from the previous tutorial.
Table Caption
The caption tag serves as a tittle or explanation for the table and it shows up at the top of the table. This tag is deprecated in newer version of HTML/XHTML. Let us quickly look at the example below.
You can also read our tutorial post on: Html Introduction
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="2" width="100%" >
<caption>This is a caption on this table</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border="2" width="100%" >
<caption>This is a caption on this table</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, column 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, column 2</td>
</tr>
</table>
</body>
</html>
Just as i use to recommend in my previous tutorials, feel free to try the above code out using your text editor for a better understanding. You can also drop your questions via the comment box, i promise to attend to your questions as soon as possible.
Table Header, Body, and Footer
A table is divided into three parts: a header, body, and foot. The head and foot are similar to the headers and footers in the word-processing document that remain the same for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are:
<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.
A Html table may contain several <tbody> elements for indicating different pages of data. But it is notable that <thead> and <tfoot> tags should appear before the <tbody>. Take a good look at the example below.
You can also read our tutorial post on: Html Document Structure
Example
<!DOCTYPE html>
<html>
<head>
<title>HTM L Tables</title>
</head>
<body>
<tables border="2" width="100%" >
<thead>
<tr>
<td colspan="5">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">This is the footer of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
<html>
<head>
<title>HTM L Tables</title>
</head>
<body>
<tables border="2" width="100%" >
<thead>
<tr>
<td colspan="5">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">This is the footer of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
You can try the above code out for clearer understanding.
Nested Tables
You can use one table inside of another table. Not only tables you can use almost all the tags inside table data tags <td>.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Bethel Nova</td>
<td>5000</td>
</tr>
<tr>
<td>Ibrahim Temitope</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td>
<table border="1" width="100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Bethel Nova</td>
<td>5000</td>
</tr>
<tr>
<td>Ibrahim Temitope</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can try the above code using your text editor. That is it for Html Tables. In my next tutorial guide, am going to be talking about Html lists.