“Keys” and “Description” cell in a table row - Table Usability - Web Experience Toolkit (WET)
Key Cell
Defined by a data cell element (td), a key cell can by compared to a primary key in a relational database. A key cell are always associated to a row cell header (th). The key cell concept don't apply to column cell header. Only one key cell can be associated to a header but two key cell can co-exist in the same table row. A key cell is always at the left of his cell header.
Product ID | Product Name | Col 1 | Col 2 | Col 3 | Col 4 |
---|---|---|---|---|---|
66-A | Famous | ++++ | ++++ | ++++ | ++++ |
94-C | Interresting | ++++ | ++++ | ++++ | ++++ |
27-F | Misterious | ++++ | ++++ | ++++ | ++++ |
68-H | Questionable | ++++ | ++++ | ++++ | ++++ |
30-S | Hottest | ++++ | ++++ | ++++ | ++++ |
04-W | Passable | ++++ | ++++ | ++++ | ++++ |
Source code
<table>
<caption>Basic "Key Cell" Example</caption>
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>66-A</td>
<th>Famous</th>
<td>++++</td>
<td>++++</td>
<td>++++</td>
<td>++++</td>
</tr>
<tr>
<td>94-C</td>
<th>Interresting</th>
<td>++++</td>
<td>++++</td>
<td>++++</td>
<td>++++</td>
</tr>
<tr>
<td>27-F</td>
<th>Misterious</th>
<td>++++</td>
<td>++++</td>
<td>++++</td>
<td>++++</td>
</tr>
<tr>
<td>68-H</td>
<th>Questionable</th>
<td>++++</td>
<td>++++</td>
<td>++++</td>
<td>++++</td>
</tr>
<tr>
<td>30-S</td>
<th>Hottest</th>
<td>++++</td>
<td>++++</td>
<td>++++</td>
<td>++++</td>
</tr>
<tr>
<td>04-W</td>
<th>Passable</th>
<td>++++</td>
<td>++++</td>
<td>++++</td>
<td>++++</td>
</tr>
</tbody>
</table>
As you can see in the previous table, the first table column are used to associate a product ID information to the product name. The intention about of the key cell concept is to quickly identify a cell header. The cell header are the meaniful name of the key cell.
ID | Version | Release date |
---|---|---|
4.0.x | Ice Cream Sandwich | October 19, 2011 |
3.x.x | Honeycomb | February 22, 2011 |
2.3.x | Gingerbread | December 6, 2010 |
2.2 | Froyo | May 20, 2010 |
2.0, 2.1 | Eclair | October 26, 2009 |
1.6 | Donut | September 15, 2009 |
1.5 | Cupcake | April 30, 2009 |
Source Code
<table>
<caption>Another "Key Cell" Example - Android (Operating system) Release date</caption>
<thead>
<tr>
<th>ID</th>
<th>Version</th>
<th>Release date</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.0.x</td>
<th>Ice Cream Sandwich</th>
<td>October 19, 2011</td>
</tr>
<tr>
<td>3.x.x</td>
<th>Honeycomb</th>
<td>February 22, 2011</td>
</tr>
<tr>
<td>2.3.x</td>
<th>Gingerbread</th>
<td>December 6, 2010</td>
</tr>
<tr>
<td>2.2</td>
<th>Froyo</th>
<td>May 20, 2010</td>
</tr>
<tr>
<td>2.0, 2.1</td>
<th>Eclair</th>
<td>October 26, 2009</td>
</tr>
<tr>
<td>1.6</td>
<th>Donut</th>
<td>September 15, 2009</td>
</tr>
<tr>
<td>1.5</td>
<th>Cupcake</th>
<td>April 30, 2009</td>
</tr>
</tbody>
</table>
If you check the similar table in wikipedia on the Adroid webpage, you will see the same relationship but displayed along with the cell header. They use emphasis to distinguish the key cell versus the row header.

Complex Key Cell Structure
Imagine you have serveral products and you want them to be classified by sector. You have an ID for each sector and an ID for each product. With this concept you would have a table similar like this:
Sector | Product Name | Customer Price | Distributor Price | ||
---|---|---|---|---|---|
ABC | Exterior | 2C57-ABC | BBQ | 135 $ | 83 $ |
3C57-ABC | Mowers | 256 $ | 199 $ | ||
A584-ABC | Tractors | 2145 $ | 1687 $ | ||
XYZ | Interior | 2C57-XYZ | Table | 257 $ | 205 $ |
3C57-XYZ | Chair | 49 $ | 20 $ | ||
A584-XYZ | Recycling Center | 91 $ | 56 $ |
Source Code
<table>
<caption>Product Listing</caption>
<thead>
<tr>
<th colspan="2">Sector</th>
<th colspan="2">Product Name</th>
<th>Customer Price</th>
<th>Distributor Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">ABC</td>
<th rowspan="3">Exterior</th>
<td>2C57-ABC</td>
<th>BBQ</th>
<td>135 $</td>
<td>83 $</td>
</tr>
<tr>
<td>3C57-ABC</td>
<th>Mowers</th>
<td>256 $</td>
<td>199 $</td>
</tr>
<tr>
<td>A584-ABC</td>
<th>Tractors</th>
<td>2145 $</td>
<td>1687 $</td>
</tr>
<tr>
<td rowspan="3">XYZ</td>
<th rowspan="3">Interior</th>
<td>2C57-XYZ</td>
<th>Table</th>
<td>257 $</td>
<td>205 $</td>
</tr>
<tr>
<td>3C57-XYZ</td>
<th>Chair</th>
<td>49 $</td>
<td>20 $</td>
</tr>
<tr>
<td>A584-XYZ</td>
<th>Recycling Center</th>
<td>91 $</td>
<td>56 $</td>
</tr>
</tbody>
</table>
Description Cell
There exist a few technique on how to add descriptive cell to a cell header. One of those techniques is to add inside the cell header a footnote. An other technique is to use the "details/summary" HTML5 element in the cell header. Those two technique can be applied to any data cell in a table. But when we look at the cell header (th), now a thrid technique can be used. That technique is to add a data cell directly in the next column of (right of) the cell heading. A cell header can only have one descriptive data cell associated to.
Group | Description | Item | Col 1 | Col 2 | Col 3 |
---|---|---|---|---|---|
Heading 1 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem magna, mollis ac tempor id, bibendum ut turpis. Pellentesque odio ligula, egestas eu viverra ut, sodales vel sem. Nunc eu. | Sub Heading 1a | Data | Data | Data |
Sub Heading 1b | Data | Data | Data | ||
Sub Heading 1c | Data | Data | Data | ||
Sub Heading 1d | Data | Data | Data | ||
Sub Heading 1e | Data | Data | Data | ||
Sub Heading 1f | Data | Data | Data | ||
Heading 2 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem magna, mollis ac tempor id, bibendum ut turpis. Pellentesque odio ligula, egestas eu viverra ut, sodales vel sem. Nunc eu. | Sub Heading 2a | Data | Data | Data |
Sub Heading 2b | Data | Data | Data | ||
Sub Heading 2c | Data | Data | Data | ||
Sub Heading 2d | Data | Data | Data | ||
Sub Heading 2e | Data | Data | Data | ||
Sub Heading 2f | Data | Data | Data |
Source Code
<table>
<caption>"Description Cell" example</caption>
<thead>
<tr>
<th>Group</th>
<th>Description</th>
<th>Item</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="6">Heading 1</th>
<td rowspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem magna, mollis ac tempor id, bibendum ut turpis. Pellentesque odio ligula, egestas eu viverra ut, sodales vel sem. Nunc eu. </td>
<th>Sub Heading 1a</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 1b</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 1c</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 1d</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 1e</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 1f</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th rowspan="6">Heading 2</th>
<td rowspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lorem magna, mollis ac tempor id, bibendum ut turpis. Pellentesque odio ligula, egestas eu viverra ut, sodales vel sem. Nunc eu. </td>
<th>Sub Heading 2a</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 2b</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 2c</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 2d</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 2e</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Sub Heading 2f</th>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
The previous description cell are explicited defined when it is located between two cell header. If you do not have a hiarchical header cell structure it still possible to define the descriptive cell. That method use the column group (colgroup element).
Column Group Header (colgroup element)
Rarely used, the column grouping can become very useful if we need to have a distinction between the data column group and the header column group. As the row group header thead element is the first row group in a table, the same sequence is applied to the column group. So if there is row header, the first column group would represent the column header group.
The following table is a quick example of the use of the column group to define the existance of a descriptive cell to the row header.
<colgroup span="2" /><colgroup span="3" />
Item | Description | Col 1 | Col 2 | Col 3 |
---|---|---|---|---|
Heading 1 | Lorem ipsum dolor sit amet. | Data | Data | Data |
Heading 2 | Lorem ipsum dolor sit amet. | Data | Data | Data |
Heading 3 | Lorem ipsum dolor sit amet. | Data | Data | Data |
Heading 4 | Lorem ipsum dolor sit amet. | Data | Data | Data |
Heading 5 | Lorem ipsum dolor sit amet. | Data | Data | Data |
Heading 6 | Lorem ipsum dolor sit amet. | Data | Data | Data |
Source Code
<table>
<caption>"Description Cell" example - with one header per row</caption>
<colgroup span="2" /><colgroup span="3" />
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<th>Heading 1</th>
<td>Lorem ipsum dolor sit amet.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Heading 2</th>
<td>Lorem ipsum dolor sit amet.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Heading 3</th>
<td>Lorem ipsum dolor sit amet.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Heading 4</th>
<td>Lorem ipsum dolor sit amet.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Heading 5</th>
<td>Lorem ipsum dolor sit amet.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th>Heading 6</th>
<td>Lorem ipsum dolor sit amet.</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
Column Grouping
In this article you have see how to identify a key cell and how to define a description for a row cell header. Now in the next article you will see the how you can use multiple column group to represent data group and summary group..
- Date modified: