Web Teacher

Need a table? For your table data, not for layout? (We’re clear on that issue, right?) Okay, make one. Here’s how to do the borders using CSS.

The border property is what you use to add a border to a table with CSS. You might have a rule such as this one:

table {
border: 1px solid #333;
}

That would add a one pixel, solid border in a gray color around the table. But it wouldn’t add borders to the table cells themselves. So write this rule, too.

td, th {
border: 1px solid #333;
}

Now everything has a border. In fact, there are two borders around everything, because each individual td, th, and table has its own borders.

To remove the space between these borders and make them appear as a single border line, use border-collapse. Put it in the table rule only. The possible values for border-collapse are separate, collapse, and inherit. You want them to collapse.

table {
border: 1px solid #333;
border-collapse: collapse;
}

Now you can get rid of those inline HTML attributes in your table code that set the borders and move table presentation to the CSS, where it belongs. Peace and joy will follow you where ever you go.

Stumble it!