Forum Moderators: not2easy

Message Too Old, No Replies

Styling <tr> and <div> within <table>

Having trouble highlighting sections of my table

         

nickknowledge

10:59 pm on Mar 15, 2005 (gmt 0)

10+ Year Member



I'm displaying results from a MySql database, outputting them through php, and styling with css.

In order to make the results more legible, I'm using an "alternate" class for the table rows (styling with a background colour).

Here is some sample markup:


<table id="subjects">
<th>Grade</th><th>Subject</th>
<tr class="alternate"><td>5</td><td>Geography</td></tr>
<tr class=""><td>5</td><td>History</td></tr>
<tr class="alternate"><td>6</td><td>Spanish</td></tr>
<tr class=""><td>6</td><td>English</td></tr>
</table>

I now want to group the table rows, and add another style (italics for example). I'm trying code like this:


<table id="subjects">
<th>Grade</th><th>Subject</th>
<div class="divalternate">
<tr class="alternate"><td>5</td><td>Geography</td></tr>
<tr class=""><td>5</td><td>History</td></tr>
</div>
<div class="divalternate">
<tr class="alternate"><td>6</td><td>Spanish</td></tr>
<tr class=""><td>6</td><td>English</td></tr>
</div>
</table>

I'm styling using:


.alternate {
background: #eee;
}
.divalternate {
font-style: italic;
}

The .alternate style applies to the <tr> tags, but I can't seem to get the grouping to work. I've tried with <div> and <span> tags.
I'd be grateful for any help.

Thanks, Nick.

nickknowledge

12:49 am on Mar 16, 2005 (gmt 0)

10+ Year Member



Answered my own question.

With a little digging around, I found that there's already a table-row-group tag:

<tbody>
.

So, my code which now works looks like:


<table id="subjects">
<thead>
<th>Grade</th><th>Subject</th>
</thead>
<tbody class="group">
<tr class="alternate"><td>5</td><td>Geography</td></tr>
<tr class=""><td>5</td><td>History</td></tr>
</tbody>
<tbody class="">
<tr class="alternate"><td>6</td><td>Spanish</td></tr>
<tr class=""><td>6</td><td>English</td></tr>
</tbody>
</table>

and the css to render it is:


table tbody.group {
background: #eee;
}
table tbody tr.alternate {
font-weight: bold;
}