i

Learn HTML and CSS in 10 Days

Table Borders

The use of TABLE borders effectively helps to make tables progressively comprehensible. It provides a lot of impact to the user if there is a border surrounding the individual cells or table. If you want to style the border with the help of CSS, then you will be getting two properties that one can work with: border-collapse as well as border-spacing.

Border Collapse Property

Tables comes with a element along with a nested

or

elements. The property of 'border-collapse' helps in determining the border model of the table. It comes with three values – collapse, separate, and inherit. The ‘border-collapse’ value, by default, is ‘separate’ means all multiple borders will pile up one after the other. The ‘collapse’ value gathers the borders into one, picking the table cell as the essential border.

 

table {

  border-collapse: collapse;

}

th,

td {

  border: 1px solid #cecfd5;

  padding: 10px 15px;

}

 

Border Spacing Property

The ‘border-spacing’ property can decide the amount of space, assuming any, shows up between the borders.

table {

  border-collapse: separate;

  border-spacing: 4px;

}

table,

th,

td {

  border: 1px solid #cecfd5;

}

th,

td {

  padding: 10px 15px;

}

 

The ‘border-spacing’ property is going to work only if the property value of ‘border-collapse’ property is ‘separate’.