Posted under CSS
Permalink
Tags Border, CSS, HTML, Table
Rather than use the border keyword in HTML, it is better to style tables in CSS as this localises all the styling in the style sheet and promotes automatic re-use across different tables.
This page from Somacon is an easy-to-use ‘what if’ tool for tweaking all the properties for tables and instantly seeing the effect.
The w3schools reference page for tables may be found here.
This page also from w3schools describes the use of the border-collapse property, which causes the border-spacing and empty-cells properties to be ignored, and for all borders to be collapsed to a single border. This is very useful when you want complete control yourself and to prevent some of these other properties getting in the way, for example when you want a minimal flat solid border.
Note that as is often the case, incorrect HTML can give rise to strange behaviour. For example if you mistakenly set colspan to greater than the number of columns (as I did when I subsequently deleted a column after creating a table and forgot to reduce colspan) you may get a partial double border effect on the right hand side.
Here is an example page with a table illustrating these points, together with all its CSS and HTML.