6.1 Elements table and tr
Tables in HTML are used to organize data in a tabular format. The main tags used to create
tables include <table>, <tr>, and <td>. Let's dive into each of them.
<table>
The <table> tag is the container for the entire table. Inside it, table rows are placed, each
defined with a <tr> tag.
Example usage:
<table>
<!-- table rows and cells will be added here -->
</table>
Tag <tr> (table row)
The <tr> tag defines a table row. Inside the <tr> tag, table cells are placed,
each defined using <td> or <th>.
Example usage:
<table>
<tr>
<!-- row cells will be added here -->
</tr>
</table>
6.2 Elements td and th
Tag <td> (table data)
The <td> tag is used to define a data cell in a table row. These cells contain the table data
and are placed within a row defined by the tag.
Example usage:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
Tag <th> (table head)
The <th> tag is used to define header cells in the table. Text inside <th>
is typically bold and centered.
Example usage:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</table>
Example table:
<table>
<tr>
<th>Name</th> <th>Age</th> <th>City</th>
</tr>
<tr>
<td>Ivan</td> <td>30</td> <td>Toronto</td>
</tr>
<tr>
<td>Maria</td> <td>25</td> <td>Frankfurt</td>
</tr>
<tr>
<td>Nina</td> <td>35</td> <td>Paris</td>
</tr>
</table>
6.3 Styling Tables
Tables definitely need to be styled with CSS — it significantly improves the clarity and readability of the data.
For example, you decided to add a border to each cell: noble effort, but since there's a border on literally every cell, now every two cells are separated by double borders — one for each cell. 🤦♂️
If you want the border to look just the way you want, you need to use CSS to collapse the neighboring borders. There's a special property for this — border-collapse.
Here's an example of some good table styling:
table {
width: 50%; /* Sets the width of the table */
border-collapse: collapse; /* Removes double borders between cells */
}
th, td {
border: 1px solid black; /* Sets the border for cells */
padding: 8px; /* Adds padding inside cells */
text-align: left; /* Aligns text to the left */
}
th {
background-color: #f2f2f2; /* Sets background color for headers */
}
As we can see here:
- Each cell has a 1-pixel black border
- The double borders between cells are removed
- Each cell has padding, so the text doesn't stick to the edges
- The header cells have a distinct background color
Nice and tidy!
GO TO FULL VERSION