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.

You're also going to need to add the border-collapse property to your CSS for your table. This will collapse the borders to a single line between each cell and allow table row borders to function properly. Before you do anything, add the following block to your CSS.

table {
border-collapse: collapse;
}

How to Add Lines Around All the Cells in a Table

CSS full table borders

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

How to Add Lines Between Just the Columns in a Table

CSS table with left borders

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:

CSS table with left border removed in first column

If you don't want vertical lines to appear on the first column, you can use the first-child pseudo-class to target only those elements that appear first in their row and remove the border.

td:first-child, th:first-child {
border-left: none;
}

How to Add Lines Between Just the Rows in a Table

CSS table with borders below rows

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:

CSS table with the last row border removed

To remove the border from the bottom of the table, you would once again rely on a pseudo-class. In this case, you'd use last-child to target only the final row.

tr:last-child {
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 can use a class on those cells or rows. If you'd prefer a little cleaner markup, you can use the nth-child pseudo-class to select specific rows and columns based on their position.

CSS table with specific borders targeted

For example, if you only want to target the second column in each row, you can use nth-child(2) to apply CSS to only the second element in every row.

td:nth-child(2), th:nth-child(2) {
border-left: solid 2px red;
}

The same applies to the rows. You can target a specific row using nth-child.

tr:nth-child(4) {
border-bottom: solid 2px green;
}

How to Add Lines Around Individual Cells in a Table

CSS table with individual cell targeted

While you certainly can use pseudo-classes to target individual cells, the easiest way to handle a situation like this is with a CSS class. To add lines around individual cells, you add a class to the cells you want a border around:

Then add the following CSS to your stylesheet:

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'd prefer to control the gaps between your table's cells manually, remove the following line from before:

This attribute is great for standard tables, but it 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.