Table borders can be added to HTML tables using CSS. You can add borders to the table itself, as well as the table cells.
To add a border to the table, you can use the border
property in CSS. Here’s an example:
<style>
table {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
In this example, the border
property is used to add a 1-pixel solid black border to the entire table.
To add borders to the table cells, you can use the border
property on the td
and th
elements. Here’s an example:
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 8px;
}
</style>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
In this example, the border-collapse
property is used to collapse the borders of adjacent cells, creating a more seamless appearance. The td
and th
elements are styled with a 1-pixel solid black border and 8 pixels of padding.
You can also add different border styles, colors, and widths to the table and cells using CSS. With a little bit of experimentation, you can create tables that are visually appealing and easy to read.