Properly code a table of data with 2 rows of headings

Get Started
1

I need to create a table of Dates & Events and I need to have the events grouped by year.

I wanted each column to have the headings “DATE”, “EVENT”, “LOCATION”.

I was hoping just to have one table with the year right under the first rows of headings with a col span of 3.

So I’ll try to show an example of my table below (the / represents the columns):

DATE / EVENT / LOCATION
2011
9/2 / Event Description / Event Location

But I know you cannot have 2 <thead>s in a table. So I was thinking to add the year row to the <tbody> and just give it a class=“year” but not sure if that’s the best.

Anyone have any suggestions as to how to best arrange my table so it is semantically correct?

2

Ok. Well I ended up just dividing up the tables. So I did this:

<table class="dates">
<caption>2011</caption>
<thead>
<tr>
<th>Date</th>
<th>Event</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sept. 3</td>
<td>The Event here</td>
<td>Event location</td>
</tr>
</tbody>
</table>

So I have 2 tables like that one for 2011 and one for 2012. I could have also enclosed the tables in a div with an id of dates I guess. Not sure which one is better or cleaner code. I suppose it doesn’t really matter, does it?

3

You can have two <tr>s in a <thead>, which allows two rows of heading cells.

Of course, if you are wanting to have other year headings further down, that approach won’t work - if that’s the case, your best bet is probably to use <th colspan=3> within the <tbody>.

4

Hi,
You can use a <tbody> for both rows, and <th> … </th> for their columns.