Basics of HTML Table Structure
Tables are a simple and effective way to display data in rows and columns on a webpage. They are often used for presenting tabular data, like schedules, pricing plans, or statistical information. In this tutorial, we'll break down the basic structure of an HTML table .
Basic Table Elements
To create a table, you use the <table> element. Within the <table> element, you structure your data with the following tags:
<tr>(Table Row): Defines a row in the table.<th>(Table Header): Defines a header cell in the table (bold and centered by default).<td>(Table Data): Defines a standard data cell.
Example of a Basic Table
Here's a simple example to demonstrate the basic structure of a table:
HTMLcopy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Table</title>
</head>
<body>
<h1>Student Grades</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Grade</th>
</tr>
<tr>
<td>John</td>
<td>Math</td>
<td>A</td>
</tr>
<tr>
<td>Sarah</td>
<td>English</td>
<td>B</td>
</tr>
<tr>
<td>David</td>
<td>Science</td>
<td>A+</td>
</tr>
</table>
</body>
</html>
How It Works
<table>: This wraps the entire table structure.<tr>: Each tr tag creates a row.<th>: The th tags in the first row are for the column headers: Name, Subject, and Grade.<td>: The td tags in subsequent rows contain the actual data for each column.
Adding Borders and Styling
- The border="1" attribute adds a simple border to the table (useful for quick visual debugging).
- For advanced styling, you can use CSS to customize the table's appearance, such as adding padding, colors, or hover effects.
Tables are a foundational part of HTML, and mastering their structure is a key step in building functional, organized web pages. Experiment with adding more rows and columns to get comfortable!