“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.

Basic "Key Cell" Example
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 &quot;Key Cell&quot; 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.

Another "Key Cell" Example - Android (Operating system) Release date
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 &quot;Key Cell&quot; 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.

For the example see the Adroid webpage on Wikipedia

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:

Product Listing
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.

"Description Cell" example
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>&quot;Description Cell&quot; 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&nbsp;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&nbsp;Heading&nbsp;1a</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;1b</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;1c</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;1d</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;1e</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;1f</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>


   	<tr>
        	<th rowspan="6">Heading&nbsp;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&nbsp;Heading&nbsp;2a</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;2b</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;2c</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;2d</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;2e</th>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Sub&nbsp;Heading&nbsp;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" />
"Description Cell" example - with one header per row
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>&quot;Description Cell&quot; 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&nbsp;1</th>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Heading&nbsp;2</th>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Heading&nbsp;3</th>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Heading&nbsp;4</th>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Heading&nbsp;5</th>
            <td>Lorem ipsum dolor sit amet.</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <th>Heading&nbsp;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..

Column Grouping