HTML tables are a great way to display information in an organized manner. Adding borders to your HTML tables can help define the layout and structure of your content. In this article, we’ll explore how to add borders to your HTML tables, including collapsed tables, styled borders, round borders, dotted borders, and border colors.

Basic Table Border

To add a border to an HTML table, we use the “border” attribute in the “table” tag. Here’s an example of how to add a basic table border:

html

<table border="1">
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

In this example, the “border” attribute is set to 1, which creates a solid border around the entire table.

Collapsed Table Border

By default, the borders of an HTML table are separated from each other. If you want to collapse the borders, you can use the “border-collapse” property in CSS. Here’s an example:

html

<style>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  padding: 5px;
}
</style>

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

In this example, the “border-collapse” property is set to “collapse”, which causes the borders to merge into each other. We also added some padding to the table cells to create some space between the content and the border.

Styled Table Border

You can also add some style to your table borders by using CSS. Here’s an example of how to add a styled border to your HTML table:

html

<style>
table {
  border: 2px solid black;
  border-radius: 10px;
}
td {
  padding: 5px;
}
</style>

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

In this example, we added a 2px solid black border around the table and rounded the corners with the “border-radius” property. We also added some padding to the table cells to create some space between the content and the border.

Round Table Border

If you want to create a table with a circular border, you can use the “border-radius” property with a value of 50%. Here’s an example:

html

<style>
table {
  border: 2px solid black;
  border-radius: 50%;
}
td {
  padding: 5px;
}
</style>

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
</tr>
</table>

Collapsed Table Border

By default, HTML tables have separated borders for each cell. If you want to have a unified border for the entire table, you can use the border-collapse property.

html

<style>
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 5px;
    }
</style>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
    </tr>
</table>

In this example, we set the border-collapse property to collapse, which merges the borders of adjacent cells into a single border. We also added a border to each cell using the border property.

Styling Table Border

You can style table borders by changing their color, thickness, and style. Here’s an example:

html

<style>
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 2px solid black;
        padding: 5px;
    }
    th {
        background-color: #ccc;
        font-weight: bold;
        text-align: left;
    }
    td {
        text-align: center;
    }
    .dotted {
        border-style: dotted;
    }
    .red {
        border-color: red;
    }
    .round {
        border-radius: 10px;
    }
</style>

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
    </tr>
    <tr>
        <td>Row 2, Column 1</td>
        <td class="dotted">Row 2, Column 2</td>
        <td class="red round">Row 2, Column 3</td>
    </tr>
</table>

In this example, we’ve added some style to the table border. We changed the border color to black and made it thicker by setting the border-width property to 2px. We also changed the table header’s background color to light gray and aligned the text to the left. The table cells are aligned to the center using the text-align property.

We also added some classes to individual cells to apply specific border styles. The dotted class sets the border style to dotted, the red class changes the border color to red, and the round class applies a border radius of 10px, creating a rounded border.

Conclusion

Table borders can help make your HTML tables look more visually appealing and easier to read. You can style the borders by changing their color, thickness, and style. Additionally, you can collapse the borders into a unified border for the entire table. With these techniques, you can create beautiful and functional tables