Table of contents
No headings in the article.
Have you ever wondered how to make your elements or data in a tabular form? Ever wanted to display your data in a tabular form? HTML has what is called "table tags" which makes it easy to achieve the tabular format.
HTML table tags are used to make elements or data display in a tabular form. These tags make it easy for the browser to display elements in a tabular form made of rows and columns.
HTML table allows one to be able to arrange data e.g images, text, links, etc into rows and columns.
To achieve this tabular format, it is done using the "table element" with the help of other elements such as "tr", "td" and "th" elements.
All other elements are nested within the "table" tag.
- The "tr" tag indicates table rows. This defines a row in a table.
- The "td" tag indicates table data. It defines data in a table.
- The "th" tag indicates the table header. It defines the header in a table.
NOTE: All HTML tag has an opening and closing tag.
FOR EXAMPLE
| First Name | Last Name | Age |
|---|---|---|
| Esosa | Otu | 21 |
| Mariam | Akinbami | 23 |
| Semilore | Kolawole | 22 |
<table>
<tr><th> First Name</th><th> Last Name</th><th> Age</th></tr>
<tr><td> Esosa</td><td> Otu</td><td>21</td></tr>
<tr><td> Mariam</td><td> Akinbami</td><td>23</td></tr>
<tr><td> Semilore</td><td> Kolawole</td><td>22</td></tr>
</table>
HTML TABLE WITH BORDER
There are two ways to specify border in a table;
- HTML border attribute
This is used to specify borders in an HTML table.
FOR EXAMPLE: How to specify border.
<table border="1">
<tr><th> First Name</th><th> Last Name</th><th> Age</th></tr>
<tr><td> Esosa</td><td> Otu</td><td>21</td></tr>
<tr><td> Mariam</td><td> Akinbami</td><td>23</td></tr>
<tr><td> Semilore</td><td> Kolawole</td><td>22</td></tr>
</table>
NOTE: This isn't recommended now.
- CSS border attribute
This is a CSS border property and it is used to specify borders in a table. It is recommended to use this attribute.
FOR EXAMPLE
<style>
table, th, td {
border: 1px solid black;
}
</style>
NOTE: One can also collapse all the borders into one by using the "collapse" property. This property specifies if a table border should collapse into a single border or be separated.
EXAMPLE OF A COLLAPSED BORDER
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
EXAMPLE OF A SEPARATED BORDER
<style>
table, th, td {
border: 1px solid black;
border-collapse: seperate;
}
</style>
CELL PADDING
One can specify the padding for the table header and table data in two ways;
- Cell padding attribute of HTML: This attribute is no longer used.
- CSS padding property: This is the recommended property to use.
EXAMPLE of CSS padding:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 20px;
}
</style>
HTML TABLE WIDTH
HTML width is specified using the CSS width property. This is specified using pixels(px) or percentages(%). One can adjust the table width according to your requirements.
EXAMPLE:
table{
width: 50%;
}
Therefore a complete HTML table element looks like this;
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 50%;
}
th,td{
border: 2px solid black;
padding: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Esosa</td>
<td>Mariam</td>
<td>Semilore</td>
</tr>
<tr>
<td>Otu</td>
<td>Akinbami</td>
<td>Kolawole</td>
</tr>
<tr>
<td>21</td>
<td>23</td>
<td>22</td>
</tr>
</table>
</body>
</html>
HTML TABLE WITH COLSPAN
- The colspan attribute is used to make a cell span more than one column. It is used to specify the number of rows a cell should span. This means it is used to divide one row or cell into multiple columns.
EXAMPLE THAT SPAN TWO COLUMNS:
HTML CODE;
<table style="width:50%">
<tr>
<th>Name</th>
<th colspan="2">Mobile No.</th>
</tr>
<tr>
<td>Otu Esosa</td>
<td>1567893200</td>
<td>5577889955</td>
</tr>
</table>
CSS CODE;
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
HTML WITH ROW SPAN
- The row span attribute is used to make the cell span more than one row. It will divide a cell into multiple rows.
EXAMPLE THAT SPAN TWO ROWS:
HTML CODE;
<table>
<tr><th>Name</th><td>Otu Esosa</td></tr>
<tr><th rowspan="2">Mobile No.</th><td>1567893200</td></tr>
<tr><td>5577889955</td></tr>
</table>
CSS CODE;
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
HTML TABLE CAPTION
- The caption attribute must be inserted immediately after the table attribute. The caption attribute signifies the caption or title of the table.
FOR EXAMPLE:
<table>
<caption>Student Attendance</caption>
<tr><th> First Name</th><th> Last Name</th><th> Age</th></tr>
<tr><td> Esosa</td><td> Otu</td><td>21</td></tr>
<tr><td> Mariam</td><td> Akinbami</td><td>23</td></tr>
<tr><td> Semilore</td><td> Kolawole</td><td>22</td></tr>
</table>
NOTE: Some of the examples in CSS mostly show that it is the most recommended format or code to use and some HTML code or formats are not in use or recommended to use it is convenient because both programming language works hand in hand.
The pictures are pictorial descriptions of what the code should look like on your code editor. As time goes on I will talk about CSS as one of the programming languages.
Getting to know about HTML table tags makes it easy for one to be able to build tables with rows and columns easily and helps your browser easily interpret your code in a tabular form.
In conclusion, Have you wondered what are HTML table tags? Have you ever wanted to simplify your data to rows and columns? then this write-up is for you. It gives a breakdown analysis of what HTML table tags are and how they can be applied.