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