Setting CSS Table Border with Collapse and other Properties

The table border

The table border properties allow setting the border specification of HTML tables by using the CSS. Although you may set the table display settings by inline properties, you can also specify table border in CSS.

In this example, the table style, including the border is styled inside CSS by using the table border and other properties.

Example of using CSS table border

In this example, we will show you how to set the table border in CSS. In the example, we created a table and styled it by using CSS. The table border, heading and table data all are given different border specifications.

Normally, in the HTML tables, the borders are separate or detached. The CSS border-collapse property is used to make it collapse into a single border as shown below.

CSS table border

Experience this example online

As you can see, an HTML table is created which is styled using table border and other properties. The main table border is given the solid style with 2px width and its own color with border-collapse as collapse value.

The table heading <th> and <td> has its own separate border style and color specification.


Read further: CSS border

Was this article helpful?

Related Articles

Leave A Comment?