Basic HTML Table Structure
An HTML table is created using the <table> tag. Inside the table, we use:
- <tr>: Table Row
- <th>: Table Header
- <td>: Table Data
Each <tr> represents a row, and within each row, <th> and <td> tags represent the cells in that row, which can contain text, images, lists, or even another table(discuss below).
HTML Table Code Example
<!– index.html –>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML</title>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>
In this Example:
- <table>: This tag starts the table. Everything between the opening <table> and closing </table> tags makes up the table.
- <tr>: Stands for “table row”. Each <tr> tag defines a row in the table.
- <th>: Stands for “table header”. It’s used for the headers of the columns. In this case, “Firstname”, “Lastname”, and “Age” are headers. Text in <th> tags is usually bold and centered by default.
- <td>: Stands for “table data”. This tag is used for actual data cells under each column. For instance, “Priya” is the data under the “Firstname” header, “Sharma” under the “Lastname”, and “24” under the “Age”.
- The first <tr> has three <th> elements, setting up the column titles.
- The subsequent <tr> tags contain three <td> elements, representing the data for each person listed in the table.
When this HTML code is rendered in a web browser, it will display a table with four rows (one header row plus three data rows) and three columns (Firstname, Lastname, and Age), showing the names and ages of Priya, Arun, and Sam.