Web Development

Ask something
Discussion Locked

Why CSS styling is for tables too

0 helpful
7 replies

by maryweilage

Closed to new repliesThis discussion is closed. It stays readable, but it takes no new replies.

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.

7 replies

by builder

The example would be even better if you use

in the title row and style them properly.

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

by andrew t. fry

I was going to say the same thing about the

tags.

Also I do believe that the cellspacing translates not to

margins, but

margins.

by andrew t. fry

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

by andrew t. fry

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:

  John Jane Total
January 123 234 357
February 135 246 381
March 257 368 625
Total 515 848 1363

It looks identical in Mozilla Firefox. Strangely IE 6 appears to apply the width to the first

cells properly, but not the background-color for the first .

by wwb_99

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

WWB

by meadhra

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

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.

by andrew t. fry

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.

This discussion is closed to new replies.