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

Learn how 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 simply not true. Yes, using HTML tables for layout is no longer a web design best practice, having been replaced by CSS layout styles, but tables are still the correct markup to use to add tabular data to a webpage. Unfortunately, because so many web professionals have shied away from tables thinking that they are poison, many of those professionals have little experience working with this common HTML element and the struggle when they have to handle them on a webpage.

For example, if you have a table on a page and you want to add internal lines to the table cells.

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 also use the HR tag to add lines inside individual cells.

In order to apply the styles covered in this article, you should obviously 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 (you will likely only do this if your "site" is a single page) or attached to the document as an external style sheet (this is what you will do if your site is multiple pages - allowing you to style all the pages from one external sheet). You will put the styles to add interior lines into that style sheet.

Get Started

First you need to decide where you want the lines to appear in your 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; or 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 that "grid-like" effect, add the following to your style sheet:

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

How to Add Lines Between Just the Columns in a Table

To add lines between the columns (this creates vertical lines that run from top to bottom on the table's 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. In this example, we assume we have a class of "no-border" on those cells and we remove the border with this more specific CSS rule. So here is the HTML class we would use:

class="no-border">

Add them we could add following style to our 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 do this with just one simple style added to your style sheet. The below CSS would add vertical lines between each row of our table:

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

And to remove the border from the bottom of the table, you would once again add a class to that tr 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 much easier, as you can just add the class to the row you want the line on.

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;
}

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">

And then add the following CSS to your style sheet:

.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, 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;
}

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

Original article by Jennifer Krynin. Edited by Jeremy Girard on 6/5/17