In this article, we will be looking at how tables can be easily structured on web documents using HTML. In our previous article we looked at how to add and adjust images on a web document using HTML. if you haven’t gone through the previous course, kindly do so using the link below
PREVIOUS TUTORIAL: How To Add Images To HTML Web document
Introduction to HTML Tables
HTML tables are the traditional tables been structured on web documents using the help of HTML codes. To add a table to a web document, we use the table opening and closing tags (<table> & </table>) to tell the browser that contents present in between this tags are structured in a tabular form. Also we use the opening and closing table row tag (<tr> & </tr>) to add the rows and the closing and opening table cell tags (<td> & </td>) to add cells to the table.
Example shown below
<!DOCTYPE html>
<html>
<head>
<title>Using external Image on Web Document</title>
</head>
<body>
<table border="3" >
<tr>
<td> first TABLE COLUMN IN ROW 1</td>
<td> second TABLE COLUMN IN ROW 1</td>
</tr>
<tr>
<td> first TABLE COLUMN IN ROW 2</td>
<td> second TABLE COLUMN IN ROW 2</td>
</tr>
</table>
</body>
</html>RESULT ON WEB BROWSER
| first TABLE COLUMN IN ROW 1 | second TABLE COLUMN IN ROW 1 |
| first TABLE COLUMN IN ROW 2 | second TABLE COLUMN IN ROW 2 |
From the above codes, you can observe clearly that we set the border value to 3. This value determines the size of the border thickness. If you don’t intend using a border, you can simply set the border value to 0. The lower the number results to thinner border width.
How to Add Heading to Tables
After structuring your table, your next step should be to give the table a head title. you can simply do this by placing the opening and closing table heading tags (<th> &</th>) in between the first table row tags or by following the steps shown below
<!DOCTYPE html>
<html>
<head>
<title>Using external Image on Web Document</title>
</head>
<body>
<table border="3" >
<tr>
<th> 1ST table heading</th>
<th> 2ND table heading</th>
</tr>
<tr>
<td> 1ST COLUMN IN ROW 1</td>
<td> 2ND COLUMN IN ROW 1</td>
</tr>
<tr>
<td> 1ST COLUMN IN ROW 2</td>
<td> 2ND COLUMN IN ROW 2</td>
</tr>
</table>
</body>
</html>Result on web browser
| 1ST table heading | 2ND table heading |
|---|---|
| 1ST COLUMN IN ROW 1 | 2ND COLUMN IN ROW 1 |
| 1ST COLUMN IN ROW 2 | 2ND COLUMN IN ROW 2 |
How to add background colors to your table
To add background colors to a table, simply follow the code structure shown below as an example
<!DOCTYPE html>
<html>
<head>
<title>Using external Image on Web Document</title>
</head>
<body>
<table border="3" cellpadding ="5" cellspacing ="5" bgcolor="yellow" bordercolor="red" >
<tr>
<th> 1st table heading</th>
<th> 2nd table heading</th>
<th> 3rd table heading</th>
</tr>
<tr>
<td rowspan="3"> row span section </td>
<td> 1st column first row</td>
<td> 2nd column first row</td>
<td> 3rd column first row</td>
</tr>
<tr>
<td> 3rd column second row</td>
<td> 4th column second row</td>
</tr>
<tr>
<td colspan="2"> col span section </td>
</tr>
</table>
</body>
</html>RESULT ON WEB BROWSER
| 1st table heading | 2nd table heading | 3rd table heading | |
|---|---|---|---|
| row span section | 1st column first row | 2nd column first row | 3rd column first row |
| 3rd column second row | 4th column second row | ||
| col span section | |||
Adding height and width to tables
Another important aspect of structuring tables, is adding the height and width to the table. Height and width are attributes and we can easily structure them inside the opening table tags. Example shown below
<!DOCTYPE html>
<html>
<head>
<title>Using external Image on Web Document</title>
</head>
<body>
<table border="3" bgcolor="yellow" bordercolor="red" height="5" width="5" >
<tr>
<th> 1st table heading</th>
<th> 2nd table heading</th>
<th> 3rd table heading</th>
</tr>
<tr>
<td rowspan="3"> row span section </td>
<td> first column 1st row</td>
<td> 2nd column 1st row</td>
<td> 3rd column 1st row</td>
</tr>
<tr>
<td> 3rd column 2nd row</td>
<td> 4th column 2nd row</td>
</tr>
<tr>
<td colspan="2"> col span section </td>
</tr>
</table>
</body>
</html>RESULT ON WEB BROWSER
| 1st table heading | 2nd table heading | 3rd table heading | |
|---|---|---|---|
| row span section | first column 1st row | 2nd column 1st row | 3rd column 1st row |
| 3rd column 2nd row | 4th column 2nd row | ||
| col span section | |||
From the above example, we set the table height=”5″ and width=”5″
Adding Table Header, Body and Footer To HTML tables
Another important feature we can add to our tables is the header, body and footer sections. We can simply do this by using the table head tag (<thead> & </thead>) , table body tag (<tbody> & </tbody>) and the table footer tag (<tfoot> & </tfoot>) as shown in the example below
<!DOCTYPE html>
<html>
<head>
<title>Using external Image on Web document</title>
</head>
<body>
<table border="3" bgcolor="white" bordercolor="red" >
<caption>table caption</caption>
<thead>
<td colspan="3">table header</td>
</thead>
<tbody>
<tr>
<th> 1st table heading</th>
<th> 2nd table heading</th>
<th> 3rd table heading</th>
</tr>
<tr>
<td> 1st column first row</td>
<td> 2nd column first row</td>
<td> 3rd column first row</td>
</tr>
<tr>
<td> 3rd column second row</td>
<td> 4th column second row</td>
</tr>
</tbody>
<thead>
<td colspan="3">table footer</td>
</thead>
</table>
</body>
</html>RESULT ON WEB BROWSER
| table header | ||
| 1st table heading | 2nd table heading | 3rd table heading |
|---|---|---|
| 1st column first row | 2nd column first row | 3rd column first row |
| 3rd column second row | 4th column second row | table footer |
Conclusion
The above article fully explains how to add tables to HTML web documents and we hope you fully understand them. If you have questions, kindly ask us using the comment section below
NEXT ARTICLE: INSERTING LIST IN HTML
