Ciao a tutti, è passato un po 'di tempo da quando ho chiesto qualcosa, questo è qualcosa che mi ha infastidito per un po', la domanda stessa è nel titolo:
Qual è il tuo modo preferito di scrivere tabelle HTML con intestazioni verticali?
Per intestazione verticale intendo che la tabella ha il <th>tag header ( ) sul lato sinistro (generalmente)
Dati dati intestazione 1 Dati dati
intestazione 2 Dati dati
intestazione 3 Dati dati
Sembrano così, finora ho trovato due opzioni
Prima opzione
<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>
Il vantaggio principale di questo modo è che si hanno le intestazioni a destra (in realtà a sinistra) accanto ai dati che rappresenta, quello che non mi piace però è che i <thead>, <tbody>ei <tfoot>tag sono mancanti, e non c'è modo per includere senza rompere la elementi ben messi insieme, che mi portano alla seconda opzione.
Seconda opzione
<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>
Il vantaggio principale è che si dispone di una tabella HTML completamente descrittiva, gli svantaggi sono che la rappresentazione corretta ha bisogno di un po 'di CSS per le tbodye theadtag e che la relazione tra le intestazioni ei dati non è molto chiaro, come ho avuto i miei dubbi al momento della creazione il markup.
Quindi, entrambi i modi rendono la tabella come dovrebbe, qui una trappola:
Con le intestazioni sul lato sinistro o destro se lo preferisci, quindi, suggerimenti, alternative, problemi con il browser?