Want lean and clean table HTML? Specifying border information and other styles in CSS can be very handy, especially if you have several tables on one page. You can collapse your table cell borders so that the inner cells do not become "doubled" - without specifying anything in your HTML. The code for the example table below, for example, is completely "bare": just <table> etc. (Check source code - just table, tr, td - with closing tags, of course. No styling or even sizing info is specified.)
Note: early versions of Internet Explorer did not handle centering correctly. If you want to center the table below for IE 5 and lower, you will need to specify an align="center" property in your table HTML.
So how is it done? This is the entire CSS code for the above table:
table {
margin: 0 auto;
border-collapse: collapse;
width: 600px;
}
td {
border: 1px solid #000;
}
That's it! Table width, centering, cell borders: all controlled with that wee bit of CSS.