While HTML5 and CSS 3.0 continue to evolve, coding practices have not. For years, it was perfectly acceptable to use the <table> tag and its children to quickly and easily design grid layouts. Now, it looks fine and dandy — I admit to doing that back in the bad old days of IE6.
So, what’s the problem, you ask?
Accessibility. Most users browse the Web with a screen, keyboard, and mouse at their disposal. However, most Web designers fail to take into account blind users who use spoken or Braille interfaces instead of a screen, users with limited mobility who may use a joystick or keyboard in lieu of a mouse, or even color-blind users (although <table>-versus-CSS argument has nothing to do with colors). Screen readers and other assistive devices tend to fall all over themselves with <table>‘s used for layout.
Mobility. Even if accessibility is not a concern of yours, perhaps mobility is. It’s no surprise that the iPhone is penetrating society like a hot knife through butter; devices powered by Google’s Android and Palm’s webOS are right behind. Smartphone browsers don’t have a problem with layout <table>‘s, but take into consideration all of the PDA’s and regular cell phone browsers that are still in existence. Layout <table>‘s rarely degrade gracefully enough.
Bandwidth. No matter how fast Internet connections, servers, and backbones get, common sense doesn’t change — smaller things still download faster. Stripping out the excess HTML code will slim your pages’ sizes down. Your users on 3G or EDGE connections, as well as the stragglers on dial-up, will thank you.
Code refactoring. I’ve never heard the term “refactoring” applied to a markup language, but whatever you call it, eventually, you’ll want to redesign your site. CSS tables are much easier to work with, because they need little or no additional HTML code. Separating design (CSS) from content (HTML) is a major reason why Web development has gone in the direction that it has.
You can probably come up with more reasons on your own.
Now, CSS 2 added some relevant values to the display property: table, table-row, and table-cell (among others). Elements with these rules will replace <table>, <tr>, and<td> and <th>, respectively.
There are two ways to create CSS tables. Firstly, you can take the easy way out and use class names.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <style type="text/css">
.table {
display: table;
}
.tr {
display: table-row;
}
.th, .td {
display: table-cell;
}
/* Make our header cells bold, like HTML tables. */
.th {
font-weight: bolder;
}
</style>
<div class="table">
<div class="tr">
<div class="th">Header A </div>
<div class="th">Header B </div>
<div class="th">Header C </div>
</div>
<div class="tr">
<div class="th">foo </div>
<div class="td">bar </div>
<div class="td">baz </div>
</div>
<div class="tr">
<div class="th">lorem </div>
<div class="td">ipsum </div>
<div class="td">dolor </div>
</div>
</div> |
That’s all we need to do.
Now, some of you are probably wondering how CSS tables can be less markup. I mean, if you check the code above, you’ll see that we had to add a class attribute to every single <div> in the table. That’s the easy way to do it, but you don’t really reap too many of the benefits. Let’s try using CSS selectors to jazz things up a bit, taking advantage of the fact that table elements are all nested.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <style type="text/css">
.table {
display: table;
}
/* All elements inside a .table will be a row container. */
.table > * {
display: table-row;
}
/* The first row contains header cells. Make them all bold. */
.table > *:first-child {
font-weight: bolder;
}
/* All elements inside a table row will be a table cell. */
.table > * > * {
display: table-cell;
}
/* The first cell of each row will be a header as well. */
.table > * > *:first-child {
font-weight: bolder;
}
</style>
<div class="table">
<div>
<div>Header A </div>
<div>Header B </div>
<div>Header C </div>
</div>
<div>
<div>foo </div>
<div>bar </div>
<div>baz </div>
</div>
<div>
<div>lorem </div>
<div>ipsum </div>
<div>dolor </div>
</div>
</div> |
Of course, you don’t have to use <div>’s; you can use any element you want — thank you, CSS rules! This is where CSS tables really come in handy for layout purposes. Take a look at this sample HTML5 page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample page featuring CSS layout </title>
<!-- copy the <style> tag from the last example -->
</head>
<body class="table">
<div>
<aside>sidebar goes here </aside>
<article>main body goes here </article>
</div>
<div>
<img src="companylogo.png" alt="Logo of Company, Inc.">
<footer>footer text, links, etc. </footer>
</div>
</body>
</html> |
This is a crude introduction to CSS tables. Remember that CSS tables are not meant to replace the <table> tag for its legitimate uses: actual tabular data, like spreadsheets and calendars. After all, you don’t make a Web site in Excel, so don’t lay it out with spreadsheet tags.
