How to Stylize a Striped Table in CSS

Posted in Tutorials

In the last tutorial we created a table in HTML which in its un-stylized form looks like…

In this tutorial we are going to use CSS  to stylized a striped table to make it looks like this…

See live code example.

1.  Continuing from the last tutorial, we add an embedded style sheet to the HTML page….

Ideally we should use a separate stylesheet instead of embedding it on to this page.  And we will show you how in a later tutorial.  The use of the embedded style sheet is just for the sake of simplicity in this beginning tutorial.

2. Recall that in the last tutorial when we turn on border=1 attribute in order to see the borders, that there were actual spacing between each cell.  The spacing is traditionally removed by using the cellspacing=”0″ attribute on the table element.  However we can also remove the space between cells by CSS …

border-spacing: 0;

Or by use …

border-collapse: collapse;

We use both for good measure …

3. Next, we will explicitly set the cell padding to space things out the way we want.  Remember that our table cells consists of both td and th elements.  So we have one rule that covers both.  The td and th are separated by a comma as shown …

4. While we are at it, we’ll center align our data within cells with “text-align:center” (as shown above).  Now the table looks a little bit nicer …

5. We next make our header cells for both the column headers and the row headers to be bold and blue with the following CSS rule…

Although the header cells are already bold in this particular browser, we do not know for sure in other browsers. So if we want it bold, we should explicitly set it to be bold.  Now our table header got some color…

6. We stylize our header by giving it a bottom border to the table row <tr> within the table header <thead>.

to have it look like …

7. Next, right-align and add a right border to the header cell <th> of each row within the table body <tbody> …

8. Since we are constructing borders, our table itself would look better with a bottom border…

9.  Now, give our data cells a light yellow background…

10. To create a striped table, we want the even rows to have a different color (say light green).  So for every other <tr> row, we add the attribute class=”even” to the <tr> tag in the HTML…

11.  And style the td’s within the tr’s of class “even” to be light green …

with a final result of …

12. In order to keep things simple, we did not put a class or an id on our table element tag.  That means that the CSS rules will apply the styling to all tables.  If we wanted to limit our CSS rules only to this particular type of table, then we add a class=”striped” attribute on the table tag — where “striped” is an arbitrary class name that  we came up with.   Then adjust all the CSS rules to target tables with the striped class.  For example …

The output will be identical as before.

Next

In the next tutorial, we will show you how to put this style sheet into a separate CSS file (which is the preferred method).

If you have a large table and do not want to put in the class=”even” attributes for the rows by hand, or have a script generate it, then you can alternatively have JQuery dynamically put in those attributes for you at runtime. See tutorial.

Books on HTML and CSS

---