HTML Table Borders

Attribute Values

The "border" attribute in HTML tables accepts integer values that determine the thickness of the border. Here are some commonly used values:

• 0: No border (default value)
   
• 1: A thin 1-pixel border
   
• 2: A slightly thicker 2-pixel border
   
• 3 or higher: Incrementally thicker borders

For example:

<table border="0">
  <!-- Table content -->
</table>


<table border="1">
  <!-- Table content -->
</table>


<table border="2">
  <!-- Table content -->
</table>

In the first table, border="0" removes all borders. The second table, with border="1", has a thin 1-pixel border. The third table, using border="2", features a slightly thicker 2-pixel border.

It's important to note that while the "border" attribute provides a quick way to add borders, it is generally recommended to use CSS for more flexible & precise control over the appearance of your table borders.

Example

Now. we'll create a simple table displaying student information: 

<table border="1">

  <tr>

    <th>Name</th>

    <th>Age</th>

    <th>Grade</th>

  </tr>

  <tr>

    <td>Rahul</td>

    <td>18</td>

    <td>A</td>

  </tr>

  <tr>

    <td>Rinki</td>

    <td>19</td>

    <td>B</td>

  </tr>

  <tr>

    <td>Harsh</td>

    <td>20</td>

    <td>A+</td>

  </tr>

</table>

Output

In this example:

• The <table> tag has a border="1" attribute, which adds a 1-pixel border around each cell.
   
• The <th> tags define the header cells, containing the column labels "Name", "Age", & "Grade".
   
• Each <tr> tag represents a row in the table, & the <td> tags within them define the individual data cells.
   

The resulting table will look like this:

The 1-pixel border helps to visually separate the cells & make the data more readable.

Remember, you can always use CSS to further customize the appearance of your table borders, such as changing the color, style, or thickness.

Collapsed Table Borders

By default, HTML tables have separate borders for each cell, which can create a double-border effect where cells meet. To achieve a cleaner & more modern look, you can use the border-collapse CSS property to merge the borders of adjacent cells into a single border.

For  example:

<style>

  table {

    border-collapse: collapse;

  }

   table, th, td {

    border: 4px solid black;

  }

</style>

<table>

  <tr>

    <th>Name</th>

    <th>Age</th>

    <th>Grade</th>

  </tr>

  <tr>

    <td>Sanjana</td>

    <td>21</td>

    <td>A</td>

  </tr>

  <tr>

    <td>Ravi</td>

    <td>20</td>

    <td>B+</td>

  </tr>

  <tr>

    <td>Mehak</td>

    <td>19</td>

    <td>A-</td>

  </tr>

</table>

In this example:

The border-collapse: collapse; CSS property is applied to the <table> element, ensuring that the borders of adjacent cells are collapsed into a single border.
 

The border: 1px solid black; property sets a 1-pixel solid black border for the table, header cells, & data cells.
 

The output is : 

Round Table Borders

You can create tables with rounded borders using the border-radius CSS property. This property allows you to specify the radius of the corners, giving your table a softer & more visually appealing look.

For example:

<style>

  table {

    border-collapse: collapse;

  }  

  table, th, td {

    border: 2px solid #888;

  } 

  table {

    border-radius: 10px;

  }  

  th, td {

    padding: 8px;

  }

</style>


<table>

  <tr>

    <th>Name</th>

    <th>Subject</th>

    <th>Marks</th>

  </tr>

  <tr>

    <td>Rahul</td>

    <td>Math</td>

    <td>85</td>

  </tr>

  <tr>

    <td>Rinki</td>

    <td>Science</td>

    <td>92</td>

  </tr>

  <tr>

    <td>Harsh</td>

    <td>English</td>

    <td>78</td>

  </tr>

</table>

In this example:

• The border-collapse: collapse; property is used to merge the borders of adjacent cells.
   
• The border: 2px solid #888; property sets a 2-pixel solid border with a light gray color (#888) for the table, header cells, & data cells.
   
• The border-radius: 10px; property is applied to the <table> element, creating rounded corners with a radius of 10 pixels.
   
• The padding: 8px; property adds some space between the cell content & the border for better readability.

The output is : 

Dashed Table Borders

In addition to solid borders, you can also create tables with dashed borders using the border-style CSS property. Dashed borders can add visual interest & make your tables stand out.

For example:

<style>

  table {

    border-collapse: collapse;

  }

  

  table, th, td {

    border: 2px dashed #00f;

  }

  

  th, td {

    padding: 8px;

  }

</style>

<table>

  <tr>

    <th>Product</th>

    <th>Price</th>

    <th>Quantity</th>

  </tr>

  <tr>

    <td>Shirt</td>

    <td>$25</td>

    <td>10</td>

  </tr>

  <tr>

    <td>Pants</td>

    <td>$40</td>

    <td>5</td>

  </tr>

  <tr>

    <td>Shoes</td>

    <td>$60</td>

    <td>8</td>

  </tr>

</table>

Output

In this example:

• The border-collapse: collapse; property merges the borders of adjacent cells.
   
• The border: 2px dashed #00f; property sets a 2-pixel dashed border with a blue color (#00f) for the table, header cells, & data cells.
   
• The padding: 8px; property adds some space between the cell content & the border for better readability.

Supported Browsers

The border attribute & the CSS properties used to style table borders are widely supported across modern web browsers. This means you can confidently use these techniques to create visually appealing tables that will render consistently for most users.

The following browsers support the border attribute & the related CSS properties:

• Google Chrome (all versions)
   
• Mozilla Firefox (all versions)
   
• Apple Safari (all versions)
   
• Microsoft Edge (all versions)
   
• Internet Explorer 11 & above
   
• Opera (all versions)
   

However, it's important to note that older versions of Internet Explorer (IE 10 & below) may have limited support for certain CSS properties or may render them differently compared to modern browsers. If you need to support older versions of IE, it's a good idea to test your tables thoroughly & consider providing fallback styles or alternative layouts for those browsers.

In general, as long as you're targeting modern web browsers, you can use the border attribute & CSS border properties with confidence, knowing that your tables will display correctly for the vast majority of your users.

Frequently Asked Questions

Can I use CSS to style table borders instead of the border attribute?

Yes, using CSS to style table borders is recommended for more flexibility & control over the appearance of your tables.

How can I remove the space between table cells?

To remove the space between table cells, use the CSS property border-collapse: collapse; on the <table> element.

Is it possible to have different border styles for each side of a table cell?

Yes, you can use the border-top, border-right, border-bottom, & border-left CSS properties to set different border styles for each side of a table cell.

Conclusion

In this article, we have learned about HTML table borders & how to customize them using the border attribute & CSS properties. We discussed their syntax, attribute values, & different examples of table borders, which include collapsed borders, rounded borders, & dashed borders. 

You can also practice coding questions commonly asked in interviews on Coding Ninjas Code360. 

Also, check out some of the Guided Paths on topics such as Data Structure and Algorithms, Competitive Programming, Operating Systems, Computer Networks, DBMS, System Design, etc., as well as some Contests, Test Series, and Interview Experiences curated by top Industry Experts.