Occasionally, you may desire certain cells to serve as table header cells. In such instances, utilize the <th> tag instead of the <td> tag.“th” represents table header.
Example
Designate the initial row as containing table header cells.
| <table> <tr> <th>Person 1</th> <th>Person 2</th> <th>Person 3</th> </tr> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> |
To incorporate a border, apply the CSS border property to the table, th, and td elements.
Example
| table, th, td { border: 1px solid black; } |
To prevent the occurrence of double borders as shown in the example above, establish the CSS border-collapse property as collapse.
This action will cause the borders to merge into a single border.
Example
| table, th, td { border: 1px solid black; border-collapse: collapse; } |
When you assign a background color to each cell and set the border color to white (matching the document background), it creates the illusion of an invisible border.
Example
| table, th, td { border: 1px solid white; border-collapse: collapse; } th, td { background-color: #96D4D4; } |
Using the border-radius property results in rounded corners for the borders.
Example
| table, th, td { border: 1px solid black; border-radius: 10px; } |
Exclude the table from the CSS selector to omit the border around it.
Example
| th, td { border: 1px solid black; border-radius: 10px; } |
The border-style property allows you to define the visual style of the border.
The subsequent values are permissible:
dotted dashed solid double groove ridge inset outset none hiddenExample
| th, td { border-style: dotted; } |
Using the border-color property enables you to specify the color of the border.
Example
| th, td { border-color: #96D4D4; } |