Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
HTML Code:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
Result:
| Firstname | Lastname |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| John | Doe |
Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property.
CSS Code:
.table01, .table01 th, .table01 td {
border: 1px solid black;
}
HTML Code:
<table class="table01" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
Result:
| Firstname | Lastname |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| John | Doe |
Collapsed Borders
CSS Code:
.table02, .table02 th, .table02 td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Code:
<table class="table02" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
Result:
| Firstname | Lastname |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| John | Doe |
Cell Padding
Cell padding specifies the space between the cell content and its borders.
CSS Code:
.table03 th, .table03 td {
padding: 15px;
border: 1px solid black;
border-collapse: collapse;
}
HTML Code:
<table class="table03" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
Result:
| Firstname | Lastname |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| John | Doe |
Align
By default, table headings are bold and centered.
CSS Code:
.table04 th {
text-align: left;
border: 1px solid black;
border-collapse: collapse;
}
HTML Code:
<table class="table04" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
Result:
| Firstname | Lastname |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| John | Doe |
Border Spacing
Border spacing specifies the space between the cells.
CSS Code:
.table05 {
border-spacing: 10px;
}
.table05, .table05 th, .table05 td {
border: 1px solid black;
}
HTML Code:
<table class="table05" style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
Result:
| Firstname | Lastname |
|---|---|
| Jill | Smith |
| Eve | Jackson |
| John | Doe |
Colspan
To make a cell span more than one column, use the colspan attribute.
HTML Code:
<table class="table02" style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Result:
| Name | Telephone | |
|---|---|---|
| Bill Gates | 55577854 | 55577855 |
Rowspan
To make a cell span more than one row, use the rowspan attribute.
HTML Code:
<table class="table02" style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
Result:
| Name: | Bill Gates |
|---|---|
| Telephone: | 55577854 |
| 55577855 |
Caption
To add a caption to a table, use the <caption> tag.
HTML Code:
<table class="table02" style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Result:
| Month | Savings |
|---|---|
| January | $100 |
| February | $50 |