How to Add Internal Lines (Borders) in a Table With CSS

Learn how to create a CSS table border in just five minutes

Casual businessman typing at his desk
Klaus Vedfelt/Taxi/Getty Images

You may have heard that CSS and HTML tables do not mix. This is not the case. Yes, using HTML tables for layout is no longer a web design best practice because they have been replaced by CSS layout styles, but tables are still the correct markup to use to add tabular data to a webpage.

Because so many web professionals shy away from tables thinking they are nothing but trouble, many of those professionals have little experience working with this common HTML element, and they struggle when they have to add internal lines to table cells on a webpage.

CSS Table Borders

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 to the individual cells of that table, you need to add borders to the interior CSS elements. You can use the HR tag to add lines inside individual cells.

To apply the styles covered in this tutorial, you need a table on a webpage. Then, you create a style sheet as an internal style sheet in the head of your document (if you are dealing with only a single page) or attached to the document as an external style sheet (if the site has multiple pages). You put the styles to add interior lines into the style sheet.

Before You Start

Decide where you want the lines to appear in the table. You have several options, including:

  • Surrounding all the cells to form a grid 
  • Positioning the lines between just the columns
  • Just between the rows
  • Between specific columns or rows.

You can also position the lines around individual cells or inside individual cells.

How to Add Lines Around All the Cells in a Table

To add lines around all cells in your table, creating a grid effect, add the following to your stylesheet:

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

How to Add Lines Between Just the Columns in a Table

To add lines between the columns to create vertical lines that run from top to bottom on the table's columns, add the following to your stylesheet:

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

If you don't want vertical lines to appear on the first column, you add a class to th and td cells. In this example, assume a class of no-border on those cells and remove the border with a CSS rule. The HTML class you use is:

class="no-border"> 

Then, add the following style to the style sheet:

.no-border {
border-left: none;
}

How to Add Lines Between Just the Rows in a Table

As with adding lines between the columns, you can add horizontal lines between rows with one simple style added to the style sheet, as follows:

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

To remove the border from the bottom of the table, you would once again add a class to that

tag:

class="no-border"> 

Add the following style to your style sheet:

.no-border {
border-bottom: none;
}

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. If your table is automatically generated from a CMS of some kind, this may not be possible, but if you are hand coding the page, you could add appropriate classes as needed to achieve this effect.

class="side-border"> 

Adding lines between rows is easier because you can add the class to the row you want the line on.

class="border-bottom"> 

Then, add the CSS to your stylesheet:

.border-side {
border-left: solid 1px black;
}
.border-bottom {
border-bottom: solid 1px black;
}

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:

class="border"> 

Then add the following CSS to your stylesheet:

.border {
border: solid 1px black;
}

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 the horizontal rule tag (<hr>).

Useful Tips

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

table {
border-collapse: collapse;
}

You can avoid all the and use the border attribute in your table tag. Realize, however, that 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.