Hallo zusammen, es ist schon eine Weile her, seit ich etwas gefragt habe. Das hat mich schon eine Weile beschäftigt. Die Frage selbst steht im Titel:
Was ist Ihre bevorzugte Methode zum Schreiben von HTML-Tabellen mit vertikalen Überschriften?
Mit vertikaler Überschrift meine ich, dass die Tabelle <th>(im Allgemeinen) auf der linken Seite das Tag header ( ) hat.
Header 1 Datendaten Daten
Header 2
Datendaten Daten Header 3 Datendaten Daten
Sie sehen so aus, bis jetzt habe ich mir zwei Optionen ausgedacht
Erste Wahl
<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>
Der Hauptvorteil dieser Art und Weise ist , dass Sie die Header Recht haben ( von links tatsächlich) neben den Daten , die sie darstellt, was ich nicht mag jedoch ist , dass die <thead>, <tbody>und <tfoot>Tags fehlen, und es gibt keine Möglichkeit , sie zu schließen , ohne das zu Brechen schön zusammengestellte Elemente, die mich zur zweiten Option führen.
Zweite 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>
Der Hauptvorteil ist , dass Sie eine voll beschreibende HTML - Tabelle haben, sind die Nachteile , dass die richtige Darstellung ein wenig CSS für die Bedürfnisse tbodyund theadTags und dass die Beziehung zwischen den Header und Daten ist nicht ganz klar , wie ich meine Zweifel hatte bei der Erstellung das Markup.
In beiden Fällen wird die Tabelle so dargestellt, wie sie sollte. Hier eine Pitcure:
Mit den Überschriften auf der linken oder rechten Seite, wenn Sie es bevorzugen, also irgendwelche Vorschläge, Alternativen, Browserprobleme?