You are reading...

January 23rd

Tables are a pain in the ass to build due to very subtle cross-browser issues. But there is a way to build tables of varying complexity and still look the same throughout all browsers.

You will need Photoshop for this project.

The result
A somewhat complex looking thing

A somewhat complex looking thing

So here we have a table from this site which, just so happens, I built the template for it. So the first thing to know is how to slice this bitch up.

Slicing the bitch up

The bitch. Sliced up

The bitch. Sliced up


Hide the text. You’ll need to slice up four parts. The header, the subheader, the body, and the bottom (you’ll also need to slice out the bullets for this project, but that’s not part of the table). For presentation purposes these slices are nice and fat. But like sashimi, the thinner, the better. There are variations of the body and bottom depending on number of columns on the table. But we’ll just do 3 columns.

The code

After saving these parts, here is the code. It’s long, but I can assure you it was a lot simpler than the old site.

<div class="tbl tbl3">
<table>
<thead>
<tr>
<td class="tblhdr" colspan="3">
Canadian Thoracic Society<a href="#ref2"><sup class="refwhite">2</sup></a></td>
</tr>
</thead>
<tr class="tblhdr">
<td >Basic clinical state</td>
<td >First choice</td>
<td >Alternative for treatment failure</td>
</tr>
<tr>
<td valign="top">Acute tracheobronchitis</td>
<td valign="top"><ul><li>No antibiotic unless symptoms persist for >10 to 14 days</li></ul></td>
<td valign="top"><ul><li>Macrolide</li><li>Tetracycline</li></ul></td>
</tr>
<tr>
<td valign="top">Chronic bronchitis without risk factors (simple)</td>
<td valign="top">
<ul>
<li>Second-generation macrolide</li>
<li>Second-or third-generation cephalosporin</li>
<li>Amoxicillin</li>
<li>Doxycycline</li>
<li>Trimethoprim-<br />sulfamethox-azole</li>
</ul></td>
<td valign="top">
<ul>
<li>Fluoroquinolone</li>
<li>ß-lactam/<br />ß-lactamase inhibitor</li>
</ul></td>
</tr>
<tr>
<td valign="top">Chronic bronchitis with risk factors (complicated)</td>
<td valign="top">
<ul>
<li>Fluoroquinolone</li>
<li>ß-lactam/<br />ß-lactamase inhibitor</li>
</ul></td>
<td valign="top">
<ul>
<li>May require parenteral therapy</li>
<li>Consider referral to a specialist or hospital</li>
</ul></td>
</tr>
<tr>
<td class="nobrdBot" valign="top">Chronic suppurative bronchitis</td>
<td class="nobrdBot" valign="top">
<strong>Ambulatory patients:</strong>
<ul>
<li>Tailor the treatment to the airway pathogen</li>
<li><em>P aeruginosa</em> common (ciprofloxacin)</li>
</ul>
<strong>Hospitalized patients:</strong>
<ul>
<li>Parenteral therapy usually required</li>
</ul></td>
</tr>
</table>
</div>
<div class="table_bottom col3"></div>

Typical construction of a table. There are however, two extra divs. One part is the “backbone” that wraps around the table tag. The other is the “feet” that will style the rounded corners in the bottom.

The CSS


/* resets and other junk */

body {font-family:Arial, Helvetica, sans-serif; font-size:.76em; color:#6f6f6f; line-height:1.4em;}
table {line-height:1.4em;}
ul {margin:0; padding:0;}
sup.refwhite {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:.75em; padding-left:2px; line-height:normal; color:#fff;}
a:link {color:#843F9C;text-decoration:underline;}

/* the actual table */

.tbl {
background:transparent url(images/table.gif) repeat-y scroll 0 0;
margin:10px 0 0;
padding:0 10px 0 2px;
width:474px;
}

.tbl3 {
background-image:url(images/table3.gif);
}

.table_bottom {
height:18px;
margin:0;
padding:0;
width:486px;
}

.col3 {
background:transparent url(images/table_bottom_3.gif) no-repeat scroll 0 0;
}

.tbl table {
border-collapse:collapse;
color:#602588;
font-size:12px;
margin:0 2px;
table-layout:fixed;
width:474px;
}

.tbl thead {
background:#602588 url(images/table_title.gif) repeat-x scroll center top;
border-bottom:4px solid #602588;
color:#FFFFFF;
font-size:18px;
font-weight:600;
line-height:22px;
text-align:center;
}

.tbl thead td {
padding:15px 0 10px;
}

.tbl td sup {
font-size:65%;
}

.tbl tr.tblhdr td {
background:#F1FFD3 url(images/table_header.gif) repeat-x scroll center bottom;
border-right:medium none;
font-size:13px;
font-weight:600;
line-height:150%;
padding:2px 0 4px 15px;
}

.tbl tr.tblsub td {
background-color:#F1FFD3;
border-bottom:2px solid #F89E5A;
border-right:medium none;
font-size:13px;
font-weight:600;
padding:6px 0;
text-align:center;
}

.tbl tbody tr td {
border-bottom:1px solid #F89E5A;
padding:9px 15px;
}

.tbl td ul {
margin:0 0 9px;
padding:0;
}

.tbl td strong {
padding:0 0 9px;
display:block;
}

.tbl td ul li {
background:transparent url(images/bullet.gif) no-repeat scroll 0 4px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
padding:0 0 0 10px;
}

.tbl td.nobrdBot {
border-bottom:medium none;
}

Basically, you take the sliced images, repeat them from either the x or y axis as background images. This will ensure that the vertical border will line up with the border at the table’s “feet”. Horizontal borders are plain css borders. Then certain classes, like nobrdBot, are used to remove css borders such as those on the last row.

Conclusion

As you look through the rest of the site, there are other instances of tables. All I have to do is assign new classes in the CSS and switch different background images in and out. As a result, the web designers are free to design anyway they deem suitable, and smart developers have a relatively simple solution to styling complex CSS tables.

Download sample

Go home