It's widely known that tables have been misused in the past to create page layouts full of presentational markup. However that does not mean that we shouldn't embrace the use of tables for their designated purpose, laying out grids of data in rows and columns in the same manner as a spreadsheet is laid out in Microsoft Excel.

<table border="1" summary="Summary of my books">
<caption>
<strong>My Books</strong>
</caption>
<tr>
<th scope="col">&nbsp;</th>
<th scope="col">Styling</th>
<th scope="col">Coding</th>
</tr>
<tr>
<th scope="row">Languages</th>
<td>XHTML &amp; CSS</td>
<td>PHP &amp; SQL</td>
</tr>
<tr>
<th scope="row">Focus</th>
<td>Interface design</td>
<td>Back-end code</td>
</tr>
</table>

Our table markup has a summary attribute, a caption tag, and most importantly, table headings (th) that differentiate the heading cells from the data cells, which by default display bold. Each of these headings has a scope attribute that indicates whether it relates to a column or a row.

If we add this markup to CSS:

table.basic_lines {

width:300px;

border-top:3px solid #069; }

To add a mix of thick and thin lines helps further differentiate the data from the headings. But what's with those little gaps in the lines

body { font: .8em verdana, sans-serif; }
table.basic_lines {width:300px; border-top:4px solid #069; }

table.basic_lines th {border-bottom: 2px solid #069; }
table.basic_lines td {border-bottom:1px solid #069; }

Now a little cleanup is all that's needed. Let's create some space around the text and close up those gaps in the lines. We are going to add this markup:

body { font: .8 verdana, sans-serif; }

table.basic_lines {width:300px; border-collapse:collapse; border-top:3px solid #069; }

table.basic_lines caption {margin-bottom:6px }

table.basic_lines th {border-bottom:2px solid #069 }

table.basic_lines td, table.basic_lines th { padding:5px 3px; }

This is the finished styling:

Note the use of the border-collapse property on the table tag. Border collapsing reduces taht double border we saw in the default style to a single border line between the two cells.

Let's take a look at the complete markup for a variation on the same markup.

This markup looks like this: