HTML Tables
The HTML tables element represents data in a tabular form—in rows and columns of cells.
We include some or all of the following tags into the table element when representing data in a tabular form.
<caption> represents the title of tabular data. <td> represents table data, that is, the content to be inserted into a cell. <thead> represents the table heading <tbody> represents the body of the table. <tr> represents table rows. <tfoot> represents the table footer. <colgroup> represents the column group.
Let's create a simple table.
Here's an example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page title</title>
</head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Country</th>
</tr>
<tr>
<td>Kathryn</td>
<td>Female</td>
<td>Nigeria</td>
</tr>
<tr>
<td>Alex</td>
<td>Make</td>
<td>New York</td>
</tr>
<tr>
<td>Bode</td>
<td>Male</td>
<td>England</td>
</tr>
</table>
</body>
</html>
If you run the code above on your local machine, you will see that we added the border property. Without it, the vertical and horizontal lines demarcating the table wouldn't be there.
However, spaces between each border separate one cell from the other. To remove the spaces(margin), use the border-collapse property and set the value to collapse. Check out how HTML responsiveness works
Here is an example of HTML Tables;
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
table{
width:100%;
}
</style>
<body>
<table>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Country</th>
</tr>
<tr>
<td>Kathryn</td>
<td>Female</td>
<td>Nigeria</td>
</tr>
<tr>
<td>Alex</td>
<td>Make</td>
<td>New York</td>
</tr>
<tr>
<td>Bode</td>
<td>Male</td>
<td>England</td>
</tr>
</table>
</body>
Styling The Border-Style Property of HTML Tables
The border-style property appearance is set to solid by default, but that does not mean there are no other ways to style a border.
Here are some other border-style property value to use;
border-style: dotted;
border-style: dashed;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: hidden;
border-style: none;
border-style: solid;
Adding Color To HTML Tables Borders
To add color to the background of the border table, follow this example.
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
table{
width: 100%;
}
th, td {
background-color: lightblue;
}
</style>
<body>
<table style="width:100%;">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Country</th>
</tr>
<tr>
<td>Kathryn</td>
<td>Female</td>
<td>Nigeria</td>
</tr>
<tr>
<td>Alex</td>
<td>Make</td>
<td>New York</td>
</tr>
</table>
</body>
Adding Caption To The HTML Tables Element
For HTML tables that require a caption to communicate the purpose of the table, the tag should be inserted after the element.
Here is an example;
<table style="width:100%;">
<caption>PAYROLL</caption>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Wages</th>
</tr>
<tr>
<td>Kathryn</td>
<td>Female</td>
<td>$100</td>
</tr>
<tr>
<td>Alex</td>
<td>Make</td>
<td>$100</td>
</tr>
</table>
Adding Height And Width To The HTML Tables Borders
You can add specific height and width to a particular to make it bigger to contain the content in its cell.
To do this, add an inline CSS style property to the table heading you want.
Here is an example
<table style="width:100%;">
<caption>PAYROLL</caption>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Wages</th>
</tr>
<tr>
<td>Kathryn</td>
<td>Female</td>
<td>$100</td>
</tr>
<tr>
<td>Alex</td>
<td>Make</td>
<td>$100</td>
</tr>
</table>
Using The Colspan And Rowspan Table Property
The colspan property tells the browser to span a cell over one cell. That is, two column cells can merge to become one. To use the colspan attribute, an integer(number) should be set as the value.
<td colspan="value"> table content </td>
Here is an example
In this example, we'll create a table and sum the total in the last cell.
<table>
<caption>PAYROLL</caption>
<tr>
<th style="width:50%; height:100px;">Names</th>
<th>Gender</th>
<th>Wages</th>
</tr>
<tr>
<td>Kathryn</td>
<td>Female</td>
<td>$100</td>
</tr>
<tr>
<td>Alex</td>
<td>Make</td>
<td>$100</td>
</tr>
</table>
The rowspan property function in the same way as the colspan.
Here is an example
Table Element
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table Element</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
<body>
<table>
<caption>PAY ROLL</caption>
<tr>
<th>Names</th>
<th>Wages</td>
</tr>
<tr>
<td>Stanley</td>
<td rowspan="2">$300</td>
</tr>
<td>Maxwell</td>
</tr>
<tr>
<td>Love</td>
<td>$400</td>
</tr>
</table>
</body>
</html>
Using The colgroup Tag in The Table Element
The colgroup element is helpful in styling more than one column in a table.
For each col group, the span attribute specifies the number of columns to be styled.
Here is an example
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Table</title>
</head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
</style>
<body>
<table width="100%">
<colgroup>
<col span="3" style="background-color: lightblue;"
</colgroup>
<tr>
<th>JAN</th>
<th>FEB</th>
<th>MAR</th>
<th>APRIL</th>
<th>MAY</th>
<th>JUNE</th>
</tr>
<tr>
<td>70</td>
<td>15</td>
<td>30</td>
<td>16</td>
<td>56</td>
<td>10</td>
</tr>
<tr>
<td>70</td>
<td>15</td>
<td>30</td>
<td>16</td>
<td>56</td>
<td>10</td>
</tr>
<tr>
<td>12</td>
<td>20</td>
<td>46</td>
<td>30</td>
<td>90</td>
<td>50</td>
</tr>
