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. The <td> element is the data containers of the table which can any HTML elements like text, images, lists, other tables, etc.
By default, the table will occupy spacing depending upon the total width that is covered by the cell contents. We can define the width of the table using CSS property width or adding width attribute to the table like width="500" or width="50%".
<table> <tr> <th>Name</th> <th>Age</th> <th>gender</th> </tr> <tr> <td>James</td> <td>32</td> <td>Male</td> </tr> <tr> <td>Siara</td> <td>24</td> <td>Female</td> </tr> </table>
| Name | Age | gender |
|---|---|---|
| James | 32 | Male |
| Siara | 24 | Female |
Border is not displayed in and around the table and cells by default. You need to set it using CSS or adding attribute border="1" to the table where 1 is the number of border around each cell.
<style>
table, th, td {
border: 1px solid black;
}
</style>
By default, cell borders have a spacing of 1 pixel to each other. You can collapse the borders of table, tr, th or td into one using CSS border-collapse property and turn them into single border.
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
By default, contents inside a <td> cell are displayed attached to the left border of the cell. You can use CSS property padding to define spacing between the table cell contents and their borders and make the table look more visually appealing.
<style>
th, td {
padding: 15px;
}
</style>
By default, contents inside the table headings <th> are displayed bold and centered. You can align them to the left of the cell using CSS property text-align.
<style>
th {
text-align: left;
}
</style>
You can use CSS property border-spacing to define spacing between the cells inside a table. This css property will only work if cell borders are not collapsed.
<style>
table {
border-spacing: 5px;
}
</style>
The colspan attribute is added to a table cell to make it occupy more than one column in a row.
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Contact</th>
</tr>
<tr>
<td>James Mathews</td>
<td>6357957412</td>
<td>2147597536</td>
</tr>
</table>
| Name | Contacts | |
|---|---|---|
| James Mathews | 6357957412 | 2147597536 |
The rowspan attribute is added to a table cell to make it occupy more than one row.
<table style="width:100%">
<tr>
<th>Name:</th>
<td>James Mathews</td>
</tr>
<tr>
<th rowspan="2">Contacts:</th>
<td>6357957412</td>
</tr>
<tr>
<td>2147597536</td>
</tr>
</table>
| Name: | James Mathews |
|---|---|
| Contacts: | 6357957412 |
| 2147597536 |
You can use the <caption> to add caption to a table. The <caption> must be placed right after the opening <table> tag.
<table style="width:100%">
<caption>Employees</caption>
<tr>
<th>Name</th>
<th>Year</th>
</tr>
<tr>
<td>James</td>
<td>2017</td>
</tr>
<tr>
<td>Siara</td>
<td>2019</td>
</tr>
</table>
| Name | Year |
|---|---|
| James | 2017 |
| Siara | 2019 |
To style a table and make it unique from others, you can add a class or an id attribute to the table and then style it using CSS.
| Firstname | Lastname | Age |
|---|---|---|
| Amy | Jackson | 37 |
<table id="uniqueTable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amy</td>
<td>Jackson</td>
<td>37</td>
</tr>
</tbody>
</table>
<style>
#uniqueTable {
width: 100%;
background: lightcyan;
margin-bottom: 10px;
}
#uniqueTable th {
background: darkgrey;
color:white;
}
#uniqueTable th, #uniqueTable td{
padding: 5px 10px;
}
</style>
Moreover, you can use <thead>, <tbody> and <tfoot> to group header, body and footer contents within a table.
You can create a table inside another table and then create miltiple rows and columns inside it.
<table width="100%" border="1"> <tr> <td>This is a normal cell inside a table.</td> <td>This is a normal cell inside a table.</td> </tr> <tr> <td>This is a normal cell inside a table.</td> <td> <table width="100%"> <tr> <td>Nested table row 1 column 1</td> <td>Nested table row 1 column 2</td> </tr> <tr> <td>Nested table row 2 column 1</td> <td>Nested table row 2 column 2</td> </tr> </table> </td> </tr> </table>
| This is a normal cell inside a table. | This is a normal cell inside a table. | ||||
| This is a normal cell inside a table. |
|
Leave a comment