HTML Table Borders

We can specify different types of borders for a HTML table, and its cells.

CSS border property is used to specify the border width, style, and color. CSS border-collapse property is used to collapse the border or not.

Refer CSS border property tutorial for more styles and colors.

Examples

Basic Border for Table

In the following example, we specify a border with 1px width, solid style, and red color.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th>Name</th>
        <th>Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Collapse Border

In the previous example, there is a border drawn for cells, and table separately. We can collapse the double looking lines into one using CSS border-collapse property.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px solid red;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th>Name</th>
        <th>Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Dashed Border for Table

In the following example, we set the border-style to dashed via CSS border property.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      table, th, td {
        border: 1px dashed red;
        border-collapse: collapse;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <th>Name</th>
        <th>Quantity</th>
      </thead>
      <tbody>
        <tr>
          <td>Apple</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Banana</td>
          <td>18</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Conclusion

In this HTML Tutorial, we learned about HTML Table Borders, how to specify the border width, style, and color, and border collapsing information, with examples.