Styling tables with CSS Options

[Dan]

A nice example of styling an HTML data table with CSS and background images. Tables can be pretty dull, but it's surprisingly easy to make them look just as nice as the rest of your content.

Please post any other examples of nice tables below.

Dan

[jeffonfire]

Veerle's blog has some great content.

[cool sam]

Hi
Please go for css guide online





___________________________________________________

Computer Support | Network Management

[Lizapotter]

Steps to style the border of table using CSS:

1. Create the table in your usual way. If your table uses columns to organize the data, use the HTML element th to create column headers. If your table uses rows to organize the data, use the HTML th element to create row headers.

2. Creating borders in CSS requires two rules in your CSS. With the first rule, you set a border for the outside of the table. You also set the border-collapse rule, so that you'll only have one border line between the table cells. (If you want double borders between the table cells, do not set the border-collapse property to collapse.) Here's an example rule:

table {
border-width: 1px;
border-style: solid;
border-color: #000000;
border-collapse: collapse;
}

3. Two CSS rules combine to create these borders. Two CSS rules combine to create these borders. Next, you add a border to the table header (th) and table data (td) cells in the table. If you used border-collapse: collapse on your table rule, there will be a single border line between cells. Here's an example rule:

th, td {
border-width: 1px;
border-style: solid;
border-color: #000000;
}

Note that the grouped selector th, td creates the same CSS rule for both the th and td elements.

[Ben]

It'd be great to see examples of different table styles using CSS.

Here are 3 for starters from the work we've done at Scratchmedia:

• Quite basic table I used as part of a training session: http://scratchmedia.biz/babcock/table/
• A cute one: http://qvisionaz.com/lasik/safety-reassurance-LASIK.php
• Here's a quite extreme one, using lots of layered images but with kosher markup, from a prototype we developed a couple of years ago: http://scratchmedia.biz/ka/PT4/bt-browse-commissions.html (log in with preview/preview)

Anyone have more?