Cześć, minęło trochę czasu odkąd o coś zapytałem, to jest coś, co mnie od jakiegoś czasu niepokoi, samo pytanie jest w tytule:
Jaki jest Twój preferowany sposób pisania tabel HTML z pionowymi nagłówkami?
Przez nagłówek pionowy rozumiem, że tabela ma nagłówek (<th> tag ) po lewej stronie (ogólnie)
Nagłówek 1 Dane Dane Dane
nagłówka 2 Dane Dane Dane
nagłówka 3 Dane Dane Dane
Wyglądają tak, do tej pory wymyśliłem dwie opcje
Pierwsza opcja
<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>
Główną zaletą tego sposobu jest to, że masz prawo nagłówki (faktycznie lewej) obok danych, które reprezentuje, co mi się nie podoba, że jednak jest <thead>,<tbody> i <tfoot>znaczniki brakuje, i nie ma sposobu, aby włączyć je bez zerwania ładnie ułożone razem elementy, które doprowadziły mnie do drugiej opcji.
Druga opcja
<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>
Główną zaletą jest to, że masz w pełni opisowego tabeli html, wady są, że właściwa reprezentacja potrzebuje trochę CSS dla tbodyi theadznaczników i że relacja między nagłówkami i danych nie jest jasne, jak miałem wątpliwości przy tworzeniu znaczniki.
Tak więc oba sposoby renderują tabelę tak, jak powinna, tutaj kwestia:
Z nagłówkami po lewej lub prawej stronie, jeśli wolisz, więc masz jakieś sugestie, alternatywy, problemy z przeglądarką?