Web Development

General discussion


Why CSS styling is for tables too

By MaryWeilage Editor ·
In this week's Design and Usability Tactics e-newsletter, author Michael Meadhra explains and demonstrates how you can use CSS styling for tables.

Do you feel that tables have no place on a modern, standards-based Web page? If so, does Michael Meadhra's case for styling tables using CSS sway you?

If you aren't subscribed to the Design and Usability Tactics e-newsletter, visit our e-newsletter subcenter to subscribe:
http://nl.com.com/MiniFormHandler?brand=build er&subs_channel=bldr_front_door&list_id=e614

* Please delete any extra spaces that appear when you paste this link into your browser.

This conversation is currently closed to new comments.

Thread display: Collapse - | Expand +

All Comments

Collapse -

Even better

by builder In reply to Why CSS styling is for ta ...

The example would be even better if you use <th> in the title row and style them properly.

Also, use
border-collapse: collapse;
in the table to avoid double borders.

Collapse -

You beat me to the punch!

by Andrew T. Fry In reply to Even better

I was going to say the same thing about the <th> tags.

Also I do believe that the cellspacing translates not to <table> margins, but <td> margins.

Collapse -

Probably should have checked the spec first

by Andrew T. Fry In reply to You beat me to the punch!

Cellspacing, translates to border-spacing. Border-spacing can specify seperate horizontal and vertical spacing values.

Collapse -

Also to get the proper styling with...

by Andrew T. Fry In reply to You beat me to the punch!

Also to get the proper styling, without classes, you could you this code (valid CSS2, but unfortunately not well supported):

table#sample {
background-color: white;
border: 3px solid black;
border-spacing: 2px;
width: 400px;

table#sample td {
color: black;
background-color: #cccccc;
border: 1px solid black;
text-align: right;
padding: 5px;

table#sample th {
color: black;
border: 1px solid black;
text-align: left;
padding: 5px;

table#sample th:first-child {
width: 150px;

table#sample tr {
background-color: #cccccc;

table#sample tr:first-child {
background-color: #ffffcc;

table#sample tr:first-child th {
text-align: center;
font-style: italic;
font-weight: normal;

and the table:

<table id="sample">
<tr class="toprow">
<th> </th>

It looks identical in Mozilla Firefox. Strangely IE 6 appears to apply the width to the first <th> cells properly, but not the background-color for the first <tr>.

Collapse -

One quibble with the article

by wwb_99 In reply to Why CSS styling is for ta ...

Rather than using a td.header class, one should really use th tags to denote the header row. It is much more semantically correct.


Collapse -

Reply from author

by Meadhra In reply to Why CSS styling is for ta ...

The examples in the article were deliberately simplified to focus on the core point that CSS *can* apply to tables. The article wasn't intended to be comprehensive coverage of table-related CSS (that would take a whole book chapter).

For example, I didn't use the <th> tag because a lot of web builders don't bother with that tag (even though it is more proper and correct to do so). Including it would have complicated the article slightly by requiring extra CSS code to counteract the tag's default attributes, plus an explanation of that code.

As for the border-spacing attribute, it's valid CSS alright, but it isn't supported by the dominant browser, so it isn't currently a usable replacement for the cellspacing attribute of the table tag. I probably should have been more explicit about that particular point.

Collapse -

Perfectly valid concerns...

by Andrew T. Fry In reply to Reply from author

Those are perfectly valid concerns, but I think that just slipping in the tags would have been fine. Then in a future article you merely explain how to properly use tables.

Related Discussions

Related Forums