Table Borders

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.