To create a table in html element is used The table . Each table between the <table>and tags </table>contains a row, which is represented by a tr element . And each row between the tags <tr>and </tr>comprises cells in the form of elements td .
Let’s create a simple table:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table In HTML5</title>
</head>
<body>
<table>
<tr>
<td>Mobile</td>
<td>Company</td>
<td>Price</td>
</tr>
<tr>
<td>Nexus 5s</td>
<td>Huawei</td>
<td>49000</td>
</tr>
<tr>
<td>iPhone 12 Pro</td>
<td>Apple</td>
<td>62000</td>
</tr>
<tr>
<td>Lumia 950 </td>
<td>Microsoft</td>
<td>35000</td>
</tr>
</table>
</body>
</html>
Here we have 4 rows in the table, and each row has three columns.
In this case, in this case, the first line acts as a header, and the remaining three lines are actually the contents of the table. Separating headers, footers and body of a table in html is provided by the thead , tfoot and tbody elements , respectively . To apply them, let’s change the table as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table In HTML5</title>
</head>
<body>
<table>
<caption> <b> Popular smartphones 2021 </b> </caption>
<thead>
<tr>
<th>Mobile</th>
<th>Company</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nexus 5s</td>
<td>Huawei</td>
<td>49000</td>
</tr>
<tr>
<td>iPhone 12 Pro</td>
<td>Apple</td>
<td>62000</td>
</tr>
<tr>
<td>Lumia 950 </td>
<td>Microsoft</td>
<td>35000</td>
</tr>
<tfoot>
<tr>
<th>Mobile</th>
<th>Company</th>
<th>Price</th>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
The element thead is enclosed by the title bar. For header cells, the element is not used td, but th. The element th makes the heading bold. And all other lines are enclosed in tbody
The element tfoot defines a table footer or footer. It usually displays some auxiliary information in relation to the table.
In addition to the actual column headings, using the caption element, we can set a general title for the table.
It is also worth noting that the table footer contains only one column, which is expanded to the width of three columns using the attribute colspan=”3″.
The colspan attribute indicates the number of columns to expand the cell. Also, using the rowspan attribute, we can expand the cell by a certain number of rows. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table In HTML5</title>
</head>
<body>
<table>
<caption> <b> Popular smartphones 2021 </b> </caption>
<thead>
<tr>
<th>Mobile</th>
<th>Company</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google Pixel</td>
<td rowspan="3">Google </td>
<td>$1000</td>
</tr>
<tr>
<td>Nexus 5</td>
<td colspan="2">$2000</td>
</tr>
<tr>
<td>Nexus 6s </td>
<td>$5000</td>
</tr>
<tfoot>
<tr>
<th>Mobile</th>
<th>Company</th>
<th>Price</th>
</tr>
</tfoot>
</tbody>
</table>
</body>
</html>
