Grouping <tr> table rows

HTML & CSS
1

Hi.

I have a table with numerous table rows in it (hardly a surprise) but I would like to format, certain groups of them individually. It maybe that I would only need to place a border at the bottom of each group of ‘table rows’. But I may need the option later, to change the format of each group much more.

Is the only way to group <tr>'s by grouping them within <tables>?

How would I go about grouping the two groups below, so that I could format them individually?


<table>
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>

<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</table>

Any help appreciated.

Regards, Karl.

2

You can have as many tbody in a table as you like. Exactly for that.


<table>
<tbody>
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>

<tbody>
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
3

Thanks noonnope.

I had actually considered that but as I couldn’t find one example of it being used in that way, I thought I was in dreamland again. Thank you for straightening that out for me. :slight_smile:

Appreciated, Karl.

4

You’re welcome :slight_smile: Specs (http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1) are pretty clear about it:

<!ELEMENT TABLE - -
(CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>

TBODY+ means that the row group element tbody must occur one or more times, while THEAD?, TFOOT? means thead, tfoot elements must occur zero or one time.

I have to add this:


<table>
<tbody id="foods">
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>

<tbody id="drinks">
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
5

Thanks again Noonnope.

Out of interest…

Is there an easy way of formatting the cells below marked ‘red’, without having to format each td? I’d like to format a range of cells mid table as a group but can’t see a way of doing it. <colgroup> only ‘seems’ to format a whole column…


<table>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td>red</td>
</tr>

<tr>
<td></td>
<td></td>
<td>red</td>
</tr>

<tr>
<td></td>
<td></td>
<td>red</td>
</tr>

</table>

Thing is, I’d like a border around the whole group called ‘red’, but ‘appear’ to only be able to accomplish this by formatting the border of each cell <td>. Either I’m asking too much of tables or, more likely lack the skills to do so.

Thanks again, Karl.

6

Maybe smt like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabs Test</title>

<style type="text/css">
tbody#special td+td+td {
  background:red;
}
</style>

</head>
<body>

<table>

<tbody>
<tr>
<td>first</td>
<td>first</td>
<td>first</td>
</tr>

<tr>
<td>second</td>
<td>second</td>
<td>second</td>
</tr>
</tbody>

<tbody id="special">
<tr>
<td>third</td>
<td>third</td>
<td>third red</td>
</tr>

<tr>
<td>forth</td>
<td>forth</td>
<td>forth red</td>
</tr>

<tr>
<td>fifth</td>
<td>fifth</td>
<td>fifth red</td>
</tr>
</tbody>
</table>

</body>
</html>

No IE6. But I, for one, don’t mind.

7

Thanks noonnope.

That’s the business!:wink:

Regards, Karl.

8

No problem :slight_smile: