1. Computing

Discuss in my forum

How to Add Internal Lines in a Table

By

When you use CSS to add borders to tables, it only adds the border around the outside of the table. If you want to add internal lines, you need to add borders to the interior CSS elements. Or you can use the HR tag to add lines inside individual cells.

In order to apply these styles, you should have a table on your web page. You should then create a style sheet as an internal style sheet in the head of your document or attached to the document as an external style sheet. You will put the styles to add interior lines into that style sheet.

Difficulty: Easy
Time Required: 5 minutes

Here's How:

  1. First you need to decide where you want the lines to appear in your table. You have several options:

    • Surrounding all the cells to form a grid
    • Between just the columns
    • Between just the rows
    • Between specific columns or rows
    • Around individual cells
    • Inside individual cells
  2. How to Add Lines Around All the Cells in a Table

    To add lines around all cells in your table, add the following to your style sheet:

    td, th {
      border: solid 1px black;
    }
  3. How to Add Lines Between Just the Columns in a Table

    To add lines between the columns add the following to your style sheet:

    td, th {
      border-left: solid 1px black;
    }

    Then if you don't want them to appear on the first column, you will need to add a class to those th and td cells:

    <td class="no-border">

    And the following style to your style sheet:

    .no-border {
      border-left: none;
    }
  4. How to Add Lines Between Just the Rows in a Table

    As with adding lines between the columns, you can do this with just one simple style added to your style sheet:

    tr {
      border-bottom: solid 1px black;
    }

    And to remove the border from the bottom of the table, you would add a class to that tr tag:

    <tr class="no-border">

    And the following style to your style sheet:

    .no-border {
      border-bottom: none;
    }
  5. How to Add Lines Between Specific Columns or Rows in a Table

    If you only want lines between specific rows or columns you need to use a class on those cells or rows. Adding a line between columns is slightly more difficult than between rows because you have to add the class to every cell in that column.

    <td class="side-border">

    Adding line between rows is much easier, as you can just add the class to the row you want the line on.

    <tr class="border-bottom">

    Then add the CSS to your style sheet:

    .border-side {
      border-left: solid 1px black;
    }
    .border-bottom {
      border-bottom: solid 1px black;
    }
  6. How to Add Lines Around Individual Cells in a Table

    To add lines around individual cells you add a class to the cells you want a border around:

    <th class="border">

    And then add the following CSS to your style sheet:

    .border {
      border: solid 1px black;
    }
  7. How to Add Lines Inside Individual Cells in a Table

    If you want to add lines inside the contents of a cell, the easiest way to do this is with an <hr> tag.

Tips:

  1. If you notice gaps in your borders, you should make sure that the border-collapse style is set on your table. Add the following to your style sheet:

    table {
      border-collapse: collapse;
    }
  2. You can avoid all of the above CSS and use the border attribute in your table tag. But this attribute, while not deprecated, is significantly less flexible than CSS as you can only define the width of the border, and can only have it around all cells of the table or none.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Tables
  7. How to Add Internal Lines in a Table - Internal Table Borders

©2014 About.com. All rights reserved.