HTML tables can have borders in a variety of patterns and forms.

A Border Can Be Added

Each table cell has a border added when a table’s border is added:
Table boarde Example
Use the CSS border attribute on the table, th, and td elements to add a
border:

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table borders in HTML</title>
    <style>
        table, th, td {
            border: 1px solid red;
      }
  </style>
</head>
<body>

    <h2>Bordered Table</h2>

    <p>To add a border to the table, use the CSS border attribute.</p>

    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Ram</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Jagdish</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Aakash</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

Collapsed Table Borders

Set the CSS border-collapse property to collapse to prevent double borders
like those shown in the preceding example.
This will result in the boundaries merging into one border:
Collapsed Table Borders

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table borders in HTML</title>
    <style>
        table, th, td {
            border: 1px solid red;
            border-collapse: collapse;
      }
  </style>
</head>
<body>

    <h2>Reduced Table Borders</h2>

    <p>Add the CSS border-collapse attribute if you want the borders to merge into a single border.</p>

    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Ram</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Jagdish</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Aakash</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

Table border designs

Style Table Borders

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table borders in HTML</title>
    <style>
        table, th, td {
            border: 1px solid red;
            border-collapse: collapse;
        }
        th, td {
          background-color: #fac20a;
        }
  </style>
</head>
<body>

    <h2>Style Table Borders</h2>

    <table style="width:80%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Ram</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Jagdish</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Aakash</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

Table Borders – Round

The borders’ corners are rounded thanks to the border-radius property:
Table Borders - Round

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table borders in HTML</title>
    <style>
        table, th, td {
            border: 1px solid red;
            border-radius: 10px;
        }
  </style>
</head>
<body>

    <h2>Rounded bordered table</h2>

    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Ram</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Jagdish</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Aakash</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>
By excluding the table from the CSS selector, the border surrounding the table
will be skipped:
Skip the border around the table

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table borders in HTML</title>
    <style>
        th, td {
            border: 1px solid red;
            border-radius: 10px;
        }
  </style>
</head>
<body>

    <h2>Rounded bordered table</h2>

    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Ram</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Jagdish</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Aakash</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

Table Borders – Dashed

You can modify the border’s appearance using the border-style attribute.
These values are permitted:
  • dotted     
  • dashed     
  • solid     
  • double     
  • groove     
  • ridge     
  • inset     
  • outset     
  • none     
  • hidden

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Table borders in HTML</title>
    <style>
        th, td {
           border-style: dashed;
        }
  </style>
</head>
<body>

    <h2>Table With Dotted Borders</h2>

    <table style="width:100%">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Std</th>
    </tr>
    <tr>
        <td>Ram</td>
        <td>Miyani</td>
        <td>5</td>
    </tr>
    <tr>
        <td>Jagdish</td>
        <td>Miyani</td>
        <td>6</td>
    </tr>
    <tr>
        <td>Aakash</td>
        <td>Miyani</td>
        <td>9</td>
    </tr>
</table>

</body>
</html>

Rate this post

Categorized in: