How to set Border for Table using CSS?

Border for Table

To display border around table, table headings, and table cells using CSS, set CSS border property of this table, table headings (th), and table cells (td) with the required border value.

By default, table does not display any border.

table, th, td {
  border: 1px solid red;
}

Examples

1. Set border for table and its contents

In the following example, we take a table with two columns, and three rows; and set a border of width 1px, solid style, and red color.

index.html

2. Border collapse

In the output of previous example, we see double lines, since, there is a border for each cell in the table. We can collapse this double lines into single line using border-collapse property as shown in the following.

table, th, td {
  border: 1px solid red;
  border-collapse: collapse;
}

index.html

Conclusion

In this CSS Tutorial, we learned how to use CSS border property to display border around table and its contents, with examples.