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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

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

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for technical training with his business expertise and to help companies benefit from both. His previous experience was in sales, business and technical training, and management. Nat has an MBA from Harvard Business School and a BA in International Relations from Pomona College.

Discuss