Edit Question - KnowledgeHub

Title Body

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

Tags (comma-separated) Cancel