Basic Table Structure
Tables in HTML are created using the <table> element. Inside the <table> element, we have rows defined by the <tr> (table row) element. Within each row, we define table headers using the <th> (table header) element or table cells using the <td> (table data) element.
Example:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
In this example, we have a basic table with two columns and three rows. The first row contains table headers, and the subsequent rows contain table cells.
Table Headers
Table headers (<th>) are used to define the headings of each column in a table. By default, table headers are bold and centered. They help provide context and improve the readability of the table.
Example:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>123-456-7890</td>
</tr>
<!-- More rows... -->
</table>
In this example, the first row contains table headers for the Name, Email, and Phone columns.
Table Cells
Table cells (<td>) hold the actual data within a table. Each cell corresponds to a specific row and column intersection. Table cells provide the content for each column in the table.
Example:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
<td>123-456-7890</td>
</tr>
<!-- More rows... -->
</table>
In this example, the second row contains table cells with data for the Name, Email, and Phone columns.
Styling Tables
You can customize the appearance of tables using CSS. By applying CSS styles to the <table>, <th>, and <td> elements, you can change the table's layout, font, color, spacing, and more.
Example CSS:
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid black;
}
th {
background-color: #f2f2f2;
}
td {
text-align: center;
}
In this CSS example, we've set the table width to 100% and collapsed the table borders. We've also added padding and border styling to the table headers and cells. The background color of the table headers is set to a light gray shade, and the text within the table cells is aligned to the center.
By customizing the styles of your tables, you can match them to the design and aesthetics of your webpages.
Tables are a versatile tool for displaying tabular data on your webpages.
Congratulations on learning about HTML tables! In the next lecture, we'll explore HTML forms, which allow users to interact with and submit data on your webpages.
Keep practicing and experimenting with tables to master this essential aspect of data presentation.
