March 18, 2024
How can I create a Table in HTML?A table helps to organize the data in an appropriate format. And all can easily understand. The simple structure of the table is given in the image below.
In the Table, the vertical line is called a row and the horizontal line is called a column.
Simple Table
Let’s create a simple table using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Table</title>
</head>
<body>
<table border="2">
<thead>
<tr>
<th>Roll no.</th>
<th>Student Name </th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark Dyol</td>
<td> 99 </td>
</tr>
<tr>
<td> 2 </td>
<td> John Smith </td>
<td> 95 </td>
</tr>
<tr>
<td> 3 </td>
<td> Remi Snap </td>
<td> 98 </td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Let’s understand one by one the elements of the table.
<table>
This is the main element in the Table. That contains all the elements that make up the table structure.
<thead>
This element defines the header section. It contains one or more <tr> and <th> tags.
<tbody>
This element defines the body section of HTML. It contains one or more <tr> and <td> tags.
<tr>
These elements are used to define the row in a table.
<th>
These elements define the header cells in a table. It’s very similar to the <td> element but it’s typically bold and centered by default.
<td>
These elements define the data in a table. It should be contained within a <tr> element.
<tfoot>
These elements define the footer data in HTML. <tfoot> elements are useful for showing data like totals, summary statistics, ….