How to create table border in HTML

HTML tables can have borders applied to them using either the HTML border attribute or CSS. Using CSS is generally considered best practice as it allows for more customization and separation of presentation from content. Some of the CSS properties that can be used to customize table borders include border-color, border-width, border-style, border-radius, and border-collapse. It's important to ensure that table borders are consistent and do not interfere with the readability and usability of the table.

Add a border to an HTML table without CSS

It is possible to add a border to an HTML table without using CSS, but the options for customization will be limited. Instead, you can use the border attribute in the table tag to specify the border thickness and color.

<table border="1"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <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> <!-- more rows here --> </tbody> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the border attribute is set to 1, which means that a 1-pixel border will be applied to the entire table. If you want to change the color of the border, you can add the color value after the border thickness value, like this:

<table border=5 bordercolor=red> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <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> <!-- more rows here --> </tbody> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Note that using the border attribute is not considered best practice and is discouraged. It is recommended to use CSS instead to separate the presentation from the structure of the HTML document.

Add a border to an HTML table using CSS

You can add a border to an HTML table using CSS. There are different CSS properties you can use to customize the border, including color, thickness, style, and radius. Here's an example of how to add a border to an HTML table:

<style> table { border: 1px solid black; /* sets a solid black border with a thickness of 1 pixel */ border-collapse: collapse; /* merges the borders of adjacent cells */ } th, td { border: 1px solid black; /* sets a solid black border with a thickness of 1 pixel */ padding: 8px; /* adds some padding between the cell content and the border */ } </style> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <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> <!-- more rows here --> </tbody> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the CSS border property is used to set a 1-pixel solid black border for both the table and its cells. The border-collapse property is also used to merge the borders of adjacent cells, so that there are no gaps between them.

If you want to customize the border further, you can use other CSS properties such as border-color, border-width, and border-style. Here's an example of how to set a red, dashed border for the table:

<style> table { border-color: red; border-width: 2px; border-style: dashed; border-collapse: collapse; } th, td { border-color: red; border-width: 2px; border-style: dashed; padding: 8px; } </style> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <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> <!-- more rows here --> </tbody> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the border-color, border-width, and border-style properties are used to set a red, dashed border with a thickness of 2 pixels. The border-collapse and padding properties are also used to control the appearance of the table and its cells.

Set different border styles for different sides of the table

You can set different border styles for different sides of an HTML table by using the border-top, border-right, border-bottom, and border-left CSS properties.

Following is an example of how to set a different border style for the top and bottom sides of the table:

<style> table { border-collapse: collapse; } th, td { border-top: 1px solid black; /* sets a solid black border for the top side */ border-bottom: 2px dashed red; /* sets a dashed red border for the bottom side */ padding: 8px; } </style> <table> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> </thead> <tbody> <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> <!-- more rows here --> </tbody> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the CSS border-top and border-bottom properties are used to set different border styles for the top and bottom sides of the table cells. The border-collapse property is also used to merge the borders of adjacent cells, so that there are no gaps between them.

You can use the same approach to set different border styles for the left and right sides of the table by using the border-left and border-right properties instead.

Add a border to only certain cells of the table

You can add a border to only certain cells of an HTML table by using the border CSS property on those specific cells.

Following is an example of how to add a border to only the top and bottom cells of the first row of a table:

<style> table { border-collapse: collapse; } th, td { border-left: 1px solid black; border-right: 1px solid black; padding: 8px; } tr:first-child td { border-top: 2px solid red; /* sets a solid red border for the top cell of the first row */ border-bottom: 2px solid red; /* sets a solid red border for the bottom cell of the first row */ } </style> <table> <tr> <td>Header 1</td> <td>Header 2</td> <td>Header 3</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In the above example, the CSS border property is used to add borders to all cells of the table, but the border-top and border-bottom properties are only applied to the cells of the first row using the :first-child pseudo-class. This results in only the top and bottom cells of the first row having a red border.

You can use similar CSS selectors and the border property to add borders to specific cells of the table as needed. Note that it's important to use the border-collapse property to avoid gaps between adjacent cells.

Make the table border collapse

You can collapse the border of an HTML table using the border-collapse CSS property. This will remove the spaces between cells and merge adjacent borders into a single border.

Following is an example of how to collapse the border of a table:

<style> table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; } </style> <table> <tr> <td>Header 1</td> <td>Header 2</td> <td>Header 3</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In the above example, the CSS border-collapse property is set to "collapse" for the table element. This will merge the borders of adjacent cells and remove the spaces between them. The border property is then used to add a 1px solid black border to all cells of the table.

Note that it's important to use the border-collapse property if you want to remove the spaces between cells and make the table borders look consistent. Otherwise, you may end up with gaps between cells that can make the table look less appealing and affect its readability.

Add a border to the table header row only

You can add a border to the table header row only by targeting the <th> elements in the first row of the table with CSS.

Following is an example of how to add a border to the header row only:

<style> table { border-collapse: collapse; } th { border-bottom: 2px solid red; padding: 8px; } td { border: 1px solid black; padding: 8px; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In the above example, the CSS border-bottom property is used to add a 2px solid black border to the bottom of each <th> element in the first row of the table. The border-collapse property is also used to merge the borders of adjacent cells, so that there are no gaps between them. The border property is used to add a 1px solid black border to all <td> elements in the table.

This approach can help visually distinguish the header row from the rest of the table and improve the table's readability, especially when dealing with large tables with lots of content.

Make the table border rounded or curved

You can create rounded or curved table borders in HTML using CSS border-radius property.

Following is an example of how to create a rounded table border:

<style> table { border-collapse: collapse; border-radius: 2px; overflow: hidden; } th, td { border: 1px solid black; padding: 8px; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In the above example, the CSS border-radius property is set to "10px" for the table element, which creates a rounded border. The overflow property is also set to "hidden" to ensure that the table border does not overflow beyond its container. The border property is then used to add a 1px solid black border to all cells of the table.

You can also create other shapes and designs using the border-radius property by specifying different values for each corner of the element. For example, you can create a curved border on the top-left and bottom-right corners of the table like this:

<style> table { border-collapse: collapse; border-radius: 2% 0 0 2%; overflow: hidden; } th, td { border: 1px solid black; padding: 8px; } </style> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In the above example, the border-radius property is set to "50% 0 0 50%", which creates a curved border on the top-left and bottom-right corners of the table. The "50%" value specifies that the curve should be half the height or width of the element, while "0" specifies that there should be no curve on the top-right and bottom-left corners. Again, the overflow property is set to "hidden" to ensure that the table border does not overflow beyond its container.

Conclusion:

Using CSS to style the border is considered best practice and is recommended over using the border attribute in the table tag. This helps separate the presentation from the structure of the HTML document.






Related Topics
  1. HTML Table Headers
  2. HTML Table Cellpadding
  3. HTML Table Cellspacing
  4. HTML Table Colspan and Rowspan
  1. HTML table align Attribute
  2. HTML Table Background Color
  3. HTML Nested Table
  4. HTML Table Layouts