skip to content

CSS: Tables: border-collapse: separate

 Tweet Share0 Tweets

CSS: Tables: border-collapse: separate

The CSS2 border-collapse property allows you to quickly create formatted tables using plain HTML markup.

Here is a sample CSS snippet that contains all you need to format tables with any range of colours, borders and other effects:

table { border-collapse: separate; border: 1px solid #666; background-color: #ccf; } th { text-align: left; } td { border: 1px solid #666; background-color: #ffc; }

Essentially, setting the border-collapse property to separate allows borders to be applied to table cells in ways that aren't possible using CSS1.

The styles above are applied to two tables below that are marked up using nothing fancier than TH (for headings) and TD (for content). The cellpadding and cellspacing values are defined in the HTML, but could also be set using CSS.

Heading 1Heading 2Heading 3
contentcontentcontent
contentcontentcontent
contentcontentcontent
Heading 1contentcontentcontent
Heading 2contentcontentcontent
Heading 3contentcontentcontent
this is how it should appear:

This kind of layout is not possible using the standard TABLE model.

Combining border-collapse with other properties

This last example combines the 'separated' table model with the experimental border-radius property:

Heading 1Heading 2Heading 3
contentcontentcontent
contentcontentcontent
contentcontentcontent
this is how it should appear:

Note: As explained on the border-radius page this will work in the Mozilla browsers (Firefox, Netscape et al) and not in Internet Explorer.

References

< CSS

Send a message to The Art of Web:


used only for us to reply, and to display your gravatar.

<- copy the digits from the image into this box

press <Esc> or click outside this box to close

User Comments

Post your comment or question

1 October, 2014

Your examples that show "How it should appear" do not look any different.

All modern browsers now support these styles.

top