Tables with CSS

Cascade and inheritance

• Tables with CSS
• Border
• Compatibilit
• Validate style sheets
• Designing for the web
• Why does it matter?
• Fonts
• Validation

In the previous three sections of the guide we covered the entire cascading style sheets technology. We looked at selectors, properties and advanced aspects of CSS that involve special selectors and special properties.

That was where the other editions of the guide have ended. We thought though for this latest edition it might be time to start including some of our ideas about how to really start making style sheets work under the heading of Real World CSS. The sections here are quite diverse.

Some, like the section on tables, are very practical in nature, helping you pull together the different parts of the guide and make your style sheet do something that works. Others, such as the Web Design section, concern themselves more with general principles of flexible accessible web design using style sheets.

In this final section of this guide, we turn to some issues in the real world. We

• look at the challenges styling tables with CSS presents
• develop strategies for maximizing forward and backwards compatibility with CSS
• think about design issues specific to the web, and how they differ from designing for the printed page
• cover validating CSS and HTML

Standards-based HTML 4.0

So, what type of table can you make with just plain-old standards-based HTML 4.0 and CSS? With just a little bit of trickiness, you can make a table that looks just like this.

figure 5: the finished table.

HTML 4.0 plus CSS only Start by getting the basics right with your HTML. I'm not going to discuss this in detail, as it really is beyond the scope of this guide. However the code for this table is just below, and if you want to go there in depth it is covered in our course HTML and XHTML for CSS.

Most importantly you mustn't put any presentational markup in your HTML, so if you have been in the habit of using attributes like border, cellpadding, cellspacing and width on your HTML tables, then forget about them now.

Sometimes using a WYSIWYG editor can take the tedium out of creating tables, but just be sure it doesn't slip these attributes in on you. From now on, you'll only be using these elements.

• <table>
• <tr>
• <td>

and these attributes

• rowspan
• colspan
• class

Here's the HTML for the table.

<table>
<tr>
<td colspan="4" class="titlebar">Cloves</td>
</tr>
<tr>
<td rowspan="2" class="picture"><img src="cloves.jpg" alt="Cloves" /></td>
<td class="label">Origin</td>
<td class="label">Biological Name</td>
<td class="label">Available?</td>
</tr>
<tr>
<td>India, Senegal, Sri Lanka</td>
<td>Syzygium aromaticum</td>
<td><a href="../index.html#cloves">Buy Now</a></td>
</tr>
<tr>
<td class="label">Description</td>
<td colspan="3">Cloves are in fact the unopened flower buds of a tree of the myrtle family. They grow in clusters on the ends of the stems of the tree, each bud measuring about 1cm in length. Before they are picked they are a deep pink in color. Once picked, they are left to dry on mats in the sun, becoming a dark chocolate brown color. Strongly aromatic with a very intense fragrance. Cloves are used in many cuisines - Chinese, Sri Lankan, the Moghul cuisine of Northern India, those of the Middle East and North Africa. In all these places, they are preferred for meat dishes.</td>
</tr>
<tr>
<td class="label">Medicinal Uses</td>
<td colspan="3">Clove oil has been used as a relief for toothache and as an antiseptic. It is also believed to aid digestion.</td>
</tr>
</table>

Let's face it though, without some style this table is not only kind of boring, it's also a little hard to read.