Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Most common way of writing a HTML table with vertical headers?

Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:

What's your preferred way of writing HTML tables that have vertical headers?

By vertical header I mean that the table has the header (<th>) tag on the left side (generally)

Header 1 data data data
Header 2 data data data
Header 3 data data data

They look like this, so far I've come up with two options

First Option

         <table id="vertical-1">             <caption>First Way</caption>             <tr>                 <th>Header 1</th>                 <td>data</td><td>data</td><td>data</td>             </tr>             <tr>                 <th>Header 2</th>                 <td>data</td><td>data</td><td>data</td>             </tr>             <tr>                 <th>Header 2</th>                 <td>data</td><td>data</td><td>data</td>             </tr>         </table>     

The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <thead>, <tbody> and <tfoot> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.

Second Option

             <style type="text/css">             #vertical-2 thead,#vertical-2 tbody{                 display:inline-block;             }          </style>         <table id="vertical-2">             <caption>Second Way</caption>             <thead>                 <tr>                     <th colspan="3">Header 1</th>                 </tr>                 <tr>                     <th colspan="3">Header 2</th>                 </tr>                 <tr>                     <th colspan="3">Header 3</th>                 </tr>             </thead>             <tbody>                 <tr>                     <td>row 1</td>                     <td>row 1</td>                     <td>row 1</td>                 </tr>                 <tr>                     <td>data</td>                     <td>data</td>                     <td>data</td>                 </tr>                 <tr>                     <td>data</td>                     <td>data</td>                     <td>data</td>                 </tr>             </tbody>             <tfoot>                 <tr>                     <td colspan="4">Footer</td>                 </tr>             </tfoot>         </table>     

The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the tbody and thead tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.


So, both ways render the table how it should, here a pitcure:

render
With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?

like image 965
Tristian Avatar asked Jun 16 '11 06:06

Tristian


People also ask

How can you give column headers in a table in HTML?

The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element)

How do you make a table vertical in HTML?

The trick is to use display: inline-block; on the table rows and white-space: nowrap; on the table body.

How do I make a table header in HTML?

Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. Headings, which are defined in <th> tag are centered and bold by default.


2 Answers

First, your second option isn't quite valid HTML in the sense that all of the rows (TR) in a table should contain an equal number of columns (TD). Your header has 1 while the body has 3. You should use the colspan attribute to fix that.

Reference: "The THEAD, TFOOT, and TBODY sections must contain the same number of columns." - Last paragraph of section 11.2.3.

With that being said, the first option is the better approach in my opinion because it's readable regardless of whether or not I have CSS enabled. Some browsers (or search engine crawlers) don't do CSS and as such, it'll make your data make no sense as the header will then represent columns instead of rows.

like image 118
Francois Deschenes Avatar answered Sep 30 '22 12:09

Francois Deschenes


The First Option... I think it is the better and simple approach..

like image 33
Philemon philip Kunjumon Avatar answered Sep 30 '22 13:09

Philemon philip Kunjumon