Web Teacher

With a bit of HTML and a bit of CSS, you can add alternating column background colors and borders to your data table. Here’s an example of such a data table, ready to be completed:

To create the background color effect for the columns, use the <colgroup> element in your HTML. Here’s how it would look. (Incomplete table code is shown for brevity.)

<table summary="My friends names and contact information.">
<colgroup></colgroup>
<colgroup class="odd"></colgroup>
<colgroup></colgroup>
<colgroup class="odd"></colgroup>
<tr>
<th scope="col">Name</th>
<th scope="col">E-mail</th>
<th scope="col">Twitter</th>
<th scope="col">Facebook</th>
</tr>
. . .

I used a class named “odd” to designate every other column in the colgroup code, but you could use any class name you considered appropriate for your needs. You could also apply a class to the colgroup elements I ignored, so that a color value for the background could be applied to them as well.

Then you simply create a CSS rule for your class in the stylesheet. As simple as:

.odd {
background: #cff;
}

To create the border lines for your data table, you only need CSS. You’ve already got all the HTML needed. Each of the elements in your table need a border rule. In the table shown in the image above, that includes table, th, tr, and td elements. I styled them all with a group selector:

table, th, tr, td {
border: thin solid #000;
}

There will be a space between the table cells. If you want to eliminate those gaps, use the border-collapse property in your rule.

table, th, tr, td {
border: thin solid #000;
border-collapse:collapse;
}

You can apply these concepts to make your data tables easier to understand visually.

Stumble it!