1. A CSS Styled Table

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go.

2. A CSS Styled Table Part 2

This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

3. Creating a Dynamic CSS & AJAX Table

I like Crazy Egg’s pricing table on their Pricing & Signup page. When you click on “Sign Up” for an option, that plan’s column highlights, the other plans vanish, and a signup form takes their place. There is a number of impressive things happening within this small area. I wanted to try and recreate the behavior step by step, and share the power of combining CSS, JavaScript, and images in clever ways.

4. Tables With Style

It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.

5. Redesigning a Simple Table

A series of excellent examples, showcasing how to simplify a basic data table by eliminating unnecessary interface elements.

6. CSS Table Gallery

The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results. It’s a great way to see a bunch of interesting examples.

7. Various Table Techniques

Tables styled with CSS rules are much more efficient, if done well, than the old method of using font tags, a lot of color tags, and more… These examples are forward thinking, and also degrade well to older browsers.

8. Firefox Theme Table Example

I banned the use of tables in my works when I first switched to CSS based layouts. But I was still missing the point of tables, tables are a way to markup tabular data. Once I got that point in my head, I started to think of things that really were tabular data such as the next example of Mozilla Firebird themes. Each row is a record of a theme and the columns are the fields for each theme.

9. The Table Ruler

With a bit of JavaScript / DOM sorcery, we can provide our visitors with the same functionality for long data tables in HTML, by applying rollover states to the rows. This could be implemented tediously by hand, of course, but it would be silly to do so. Instead, we will use the DOM to find the rows to highlight on mouseover.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What is CSS?

Where HTML is the language you use for designing the structure of a web page and adding the content, CSS is the language for adding styles, colours and layout options to the content you have written in HTML.

It allows you to define and create styles, which can either be linked to pre-existing tags such as or


, or completely new styles which you would reference by placing

around the content.

How to include a style sheet

The general practice for including a CSS file in your webpage is to place the following code in the area of your page:

The pathname (style.css) would need changing to the name and location of your CSS file.

The basic website

Here is the code of a simple website, ready to be styled with CSS. If you follow through the example and explanation, it should really help you when you come to create your own CSS styled web page.

   


   
   
Design Shack

Welcome to our website showcasing CSS and XHTML designs

         This content will be in a CSS styled box
      

   

At the moment, this website will look something like this. Very basic, and not too pretty. Let’s go ahead and create a CSS file to link to this page, defining some styles.

The basic style sheet

body {
font-family: Verdana, Arial;
font-size: 11px;
color:#000;
background: #FFF;
}
h1 {
font-family: Arial, Verdana, Serif;
color: #99723b;
text-size: 18px;
}
.box {
padding: 10px;
border: 5px solid green;
width: 300px;
background: #f0f0f0;
}

The website now looks much better, with more colour, layout ideas and more attractive fonts.

Most of the code used above in the CSS example is very self explanatory. The body section applies to everything within the HTML tag, h1 to everything inside a


tag, and .box to anything within the

tags. The dot before box denotes this as a custom style, not a standard one such as body or h1.

Why is CSS important?

Most of the effects shown above can be achieved by using tags in your design, or tables. The great thing about CSS is that it separates design from layout, and keeps your HTML code easy to read and understand. Pages load quicker, search engines have an easier time indexing your site and everyone benefits.