HTML tables are a fundamental way to display tabular data on a webpage. They are structured using the <table> tag, which contains several other tags to define rows and cells. In this article, we'll explore the main components of HTML tables: <table>, <tr>, <td>, and <th>.
 |
| HTML Tables |
1. <table> Tag
The <table> tag is the container element for all the table-related elements. It creates a table structure where you can organize and display data. Here’s a simple example:
html
<table>
<!-- Table content goes here -->
</table>
2. <tr> Tag
The <tr> tag stands for "table row." It is used to define a row in the table. Each <tr> tag is placed inside the <table> tag and contains one or more cells. For example:
html
<table>
<tr>
<!-- Table data cells go here -->
</tr>
</table>
3. <td> Tag
The <td> tag stands for "table data." It is used to define a cell in a table row. Each cell contains data and is placed inside a <tr> tag. Here’s how you might use it:
html
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
4. <th> Tag
The <th> tag stands for "table header." It is used to define a header cell in a table. Unlike <td>, the text inside <th> is bold and centered by default. Header cells are usually placed in the first row of the table to define column headings:
html
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Example Table
Here’s a complete example of a table with headers and data:
html
<table border="1"> <tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</table>
In this example, the table has three columns: Name, Age, and City. Each row after the header row represents a set of data.
Summary: HTML tables are versatile for presenting data in a structured format. Understanding how to use <table>, <tr>, <td>, and <th> allows you to effectively organize and display information on your webpages.