Tables
HTML tables let you organize data in neat rows and columns, kind of like a spreadsheet. They’re great for displaying structured information, and you can style them to look pretty awesome too. In this guide, we’ll go over the basics of HTML tables, important attributes, and how to make them look better with some CSS.
To create a table in HTML, you use a few key elements:
<table>: This holds the entire table.<tr>: Each row in the table.<th>: Header cells (usually bold and centered).<td>: Regular data cells.
Basic Example:
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>Smith</td>
<td>34</td>
</tr>
</table>This will show up like this:
| First Name | Last Name | Age |
|---|---|---|
| John | Doe | 28 |
| Jane | Smith | 34 |
There are a few attributes you can use to adjust the spacing and look of your table.
Border Attribute
The border attribute adds a border around your table. It’s better to use CSS for this, but for quick styling, it works.
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>28</td>
</tr>
</table>This creates a table with borders around the cells.
Cellpadding and Cellspacing
cellpadding: Adds space inside each cell, between the content and the border.cellspacing: Adds space between the cells themselves.
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>28</td>
</tr>
</table>Here, cellpadding="10" adds space inside the cells, and cellspacing="5" adds space between the cells.
Need to merge cells? Use colspan to make a cell span across multiple columns, and rowspan to span across rows.
Colspan Example:
<table border="1">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>28</td>
</tr>
</table>This merges two header cells into one:
| Name | Age | |
|---|---|---|
| John | Doe | 28 |
Rowspan Example:
<table border="1">
<tr>
<th>Name</th>
<th rowspan="2">Age</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Jane</td>
<td>34</td>
</tr>
</table>This merges the “Age” cell across two rows:
| Name | Age |
|---|---|
| John | 28 |
| Jane | 34 |
You can style tables using CSS to make them look cleaner and more polished.
Basic Table Styling:
<table class="styled-table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>28</td>
</tr>
<tr>
<td>Jane</td>
<td>34</td>
</tr>
</tbody>
</table>
<style>
.styled-table {
border-collapse: collapse;
width: 100%;
}
.styled-table th, .styled-table td {
border: 1px solid #ddd;
padding: 8px;
}
.styled-table th {
background-color: #f2f2f2;
text-align: left;
}
.styled-table tr:hover {
background-color: #f1f1f1;
}
</style>border-collapse: Merges the borders into one.- Padding: Adds space inside the cells.
- Hover effect: Highlights a row when you hover over it.
Zebra Striped Table:
Zebra striping alternates the row colors to make the table easier to read.
<style>
.styled-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.styled-table tr:nth-child(odd) {
background-color: #fff;
}
</style>This creates alternating row colors for better readability.
Tables in HTML are super handy for organizing data into rows and columns. The basic structure includes tags like <table>, <tr>, <th>, and <td>. You can use attributes like border, cellpadding, and cellspacing to adjust the table’s spacing and appearance. More advanced tags like <thead>, <tbody>, and <tfoot> help with larger tables, and colspan and rowspan allow you to merge cells. Finally, with CSS, you can make your tables look polished with features like hover effects and zebra stripes.