Häufigste Art, eine HTML-Tabelle mit vertikalen Headern zu schreiben?

Hallo alle, es ist schon eine Weile her, ich habe etwas gefragt, das ist etwas, dass hat wurde stört mich für eine Weile, die Frage selbst ist im Titel:

Was ist Ihre bevorzugte Art zu schreiben von HTML-Tabellen, die vertikalen Header?

Durch vertikale header meine ich, dass die Tabelle die Kopfzeile ( <th> ) - tag auf der linken Seite (in der Regel)

Header 1 Daten Daten Daten

Header 2 Daten Daten Daten

Header 3 Daten Daten Daten

So sehen Sie aus, so weit ich ' ve kommen mit zwei Optionen

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

Der größte Vorteil dieser Art ist, dass Sie den Kopfzeilen der rechten (eigentlich linken) neben den Daten, die er repräsentiert, was ich nicht mag ist jedoch, dass die <thead><tbody> und <tfoot> - tags fehlen, und es gibt keinen Weg, um Sie ohne die nicelly zusammen platziert Elemente, die dazu führen mich zu der zweiten option.

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 Vorteil hier ist, dass Sie einen vollständig beschreibenden html-Tabelle, die Nachteile sind, dass die korrekte Darstellung muss ein bisschen CSS für die tbody und thead - tags sind und dass das Verhältnis zwischen dem Header und Daten ist nicht ganz klar, da hatte ich meine Zweifel, wenn das erstellen des Markups.

---

So, in beide Richtungen die Tabelle Rendern, wie es sollte, hier ein Blick:

Mit dem Header auf der linken oder rechten Seite, wenn Sie würde es vorziehen, also, irgendwelche Vorschläge, alternativen, browser-Probleme?

InformationsquelleAutor der Frage Tristian | 2011-06-16