The Table Tag Group is a group of tags that are used to create HTML tables.
HTML tables present tabular data -- much like a spreadsheet.
Table tags include <table>, <thead>, <tbody>, <tfoot>, <tr>, <td>, and others.
Creating a table in HTML requires at least 3 tags: <table>, <tr>, and <td>.
These 3 tags represent the table, their rows, and column cells respectively.
Other tags are available to refine the appearance of the table.
Here is a list of table tags that are available to design tables in HTML.
| Element | Description |
|---|---|
| <table> | Creates a table that contains elements listed below |
| <caption> | Creates a caption above or under a table |
| <colgroup> | Creates a container for col elements |
| <col> | Creates a style for one or more columns in a table |
| <thead> | Creates a table header that can style all header cells |
| <tbody> | Creates a table body that can style all data cells |
| <tfoot> | Creates table footer that can style all footer cells |
| <tr> | Creates a table row that contains table cells |
| <th> | Creates a table header cell |
| <td> | Creates a table data cell |
The <table>, <tr>, <td>, and <th> tags define the core structure of the table.
All other tags are adding enhancements by grouping, styling, and decorating the table.
| First name | Last name |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
| Jane | Hollander |
<style>
table.tb { border-collapse: collapse; width:300px; }
.tb th, .tb td { padding: 5px; border: solid 1px #777; }
.tb th { background-color: lightblue;}
</style>
<table class="tb">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
<tr>
<td>Jane</td>
<td>Hollander</td>
</tr>
</table>
Note: In real-world solutions, it is rare to find a table that requires all table tags.
By default, table headers behave like regular rows and scroll up and down with the table.
A fixed header, i.e. a non-scrolling header, is useful for tables with many rows.
With CSS you can force the header to stay in place, while scrolling through the rows.
|
First Name
First Name
|
Last Name
Last Name
|
City
City
|
|---|---|---|
| Maria | Smith | Los Angeles |
| John | Decker | New Jersey |
| Brian | Anderson | Sao Paulo |
| Harold | Derek | Cairo |
| Paola | Howard | Paris |
| Andrea | James | Sydney |
| Kevin | Spoelstra | The Hague |
| Merci | Gasol | Florence |
| Kenny | Williams | Hong Kong |
<style>
section.fixed {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #087676;
}
.fixed .wrap {
overflow-y: auto;
height: 190px;
}
.fixed table {
border-spacing: 0;
width: 100%;
}
.fixed td + td {
border-left: 1px solid #000;
}
.fixed td, .fixed th {
border-bottom: 1px solid #000;
background: #f3fbfc;
color: #000;
padding: 10px 25px;
}
.fixed th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
.fixed th div{
position: absolute;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #fff;
}
.fixed th:first-child div{
border: none;
}
</style>
<section class="fixed">
<div class="wrap">
<table>
<thead>
<tr>
<th>
First Name
<div>First Name</div>
</th>
<th>
Last Name
<div>Last Name</div>
</th>
<th>
City
<div>City</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Maria</td>
<td>Smith</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>John</td>
<td>Decker</td>
<td>New Jersey</td>
</tr>
<tr>
<td>Brian</td>
<td>Anderson</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Harold</td>
<td>Derek</td>
<td>Cairo</td>
</tr>
<tr>
<td>Paola</td>
<td>Howard</td>
<td>Paris</td>
</tr>
<tr>
<td>Andrea</td>
<td>James</td>
<td>Sydney</td>
</tr>
<tr>
<td>Kevin</td>
<td>Spoelstra</td>
<td>The Hague</td>
</tr>
<tr>
<td>Merci</td>
<td>Gasol</td>
<td>Florence</td>
</tr>
<tr>
<td>Kenny</td>
<td>Williams</td>
<td>Hong Kong</td>
</tr>
</tbody>
</table>
</div>
</section>
