How to Remove Spacing Between Table Borders with CSS

  • google plus

In Brief...

When you use CSS to put a border on your <th> and <td> tags, you will notice that you get space between them. In the old days, you would remove that space using the now-deprecated cellspacing attribute. These days, you do it with the CSS border-collapse property.

Instructions

  1. Start with a simple table:
    <table>
      <thead>
        <tr>
          <th>Header</th>
          <th>Header</th>
          <th>Header</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Data</td>
          <td>Data</td>
          <td>Data</td>
        </tr>
      </tfoot>
    </table>
  2. Add borders:
    <style>
    th, td {
      border: 1px solid #006;
    }
    </style>
    Now your table looks like this:

    Bordered HTML Table
  3. Collapse the borders with border-collapse:
    <style>
    table {
      border-collapse: collapse;
    }
    </style>
    And voilĂ , your borders are collapsed:

    Collapsed Bordered HTML Table

Related Training

Author: Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for web development with his business expertise and to help companies benefit from both.

Discuss