Häufigste Methode zum Schreiben einer HTML-Tabelle mit vertikalen Überschriften?

95

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:

machen
Mit den Überschriften auf der linken oder rechten Seite, wenn Sie es bevorzugen, also irgendwelche Vorschläge, Alternativen, Browserprobleme?

html css datatable semantic-markup Tristian
quelle

Antworten:

45

Erstens ist Ihre zweite Option kein gültiger HTML-Code in dem Sinne, dass alle Zeilen (TR) in einer Tabelle die gleiche Anzahl von Spalten (TD) enthalten sollten. Ihr Header hat 1, während der Body 3 hat. Sie sollten das colspan-Attribut verwenden, um dies zu beheben.

Referenz: "Die Abschnitte THEAD, TFOOT und TBODY müssen dieselbe Anzahl von Spalten enthalten." - Letzter Absatz von Abschnitt 11.2.3 .

Vor diesem Hintergrund ist die erste Option meiner Meinung nach der bessere Ansatz, da er lesbar ist, unabhängig davon, ob ich CSS aktiviert habe oder nicht. Einige Browser (oder Suchmaschinen-Crawler) verwenden kein CSS. Daher machen Ihre Daten keinen Sinn, da der Header dann Spalten anstelle von Zeilen darstellt.

Francois Deschenes
quelle
Muss er das erste von Ihnen erwähnte Problem wirklich beheben? Denn wenn Sie nur eine Zelle hinzufügen, nimmt diese automatisch das erste Leerzeichen ein und der Rest wird ignoriert?
LouwHopley
Hallo, danke, dass du das ungültige Markup hervorgehoben hast. Ich werde es korrigieren.
Tristian
@Nideo - Ich habe in meinem Beitrag einen Verweis aus der HTML4-Dokumentation hinzugefügt, der eindeutig besagt, dass THEAD, TFOOT und TBODY die gleiche Anzahl von Spalten enthalten müssen.
Francois Deschenes
@ Triztian - Noch eine Sache. Der TFOOT sollte sich direkt unter dem THEAD befinden (und vor den TBODYs). Dies wird wiederum in Abschnitt 11.2.3 der HTML-Spezifikation behandelt.
Francois Deschenes
1
@prodigitalson - Das scopeAttribut würde in diesem Fall keinen großen Unterschied machen. Wenn Sie lesen, wofür es ist, werden Sie verstehen. Dies bedeutet im Grunde, dass diese Spalte die Überschrift für die darin enthaltene Zeile oder Spalte ist. Das Problem ist, dass die Verwendung nur dann Sinn macht, wenn sie durch <th>eine ersetzt wird <td scope="row">.
Francois Deschenes
5

Die erste Option ... Ich denke, es ist der bessere und einfachere Ansatz.

Philemon Philip Kunjumon
quelle
0

Wenn Sie ein datengebundenes Steuerelement (wie den Asp-Repeater) in Ihrer Tabelle anzeigen möchten, ist die erste Option nicht möglich. Die zweite Option kann wie folgt verwendet werden.

<asp:Repeater ID="hours" runat="server">
    <HeaderTemplate>
    <table id="vertical-table">
        <thead>
            <tr><th colspan="0">hours:</th></tr>
            <tr><th colspan="1">Monday</th></tr>
            <tr><th colspan="1">Tuesday</th></tr>
            <tr><th colspan="1">Wednesday</th></tr>
            <tr><th colspan="1">Thursday</th></tr>
            <tr><th colspan="1">Friday</th></tr>
            <tr><th colspan="1">Saturday</th></tr>
            <tr><th colspan="1">Sunday</th></tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    <ItemTemplate>
            <tr><td><%# Container.DataItem %></td></tr>
    </ItemTemplate>
    <FooterTemplate>
        </tbody>
    </table>
    </FooterTemplate>
</asp:Repeater>
Barry Guvenkaya
quelle
-3 

div.vertical {
  margin-left: -85px;
  position: absolute;
  width: 215px;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  /* Safari/Chrome */
  -moz-transform: rotate(-90deg);
  /* Firefox */
  -o-transform: rotate(-90deg);
  /* Opera */
  -ms-transform: rotate(-90deg);
  /* IE 9 */
}

th.vertical {
  height: 220px;
  line-height: 14px;
  padding-bottom: 20px;
  text-align: left;
}
<table>
  <thead>
    <tr>
      <th class="vertical">
        <div class="vertical">Really long and complex title 1</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 2</div>
      </th>
      <th class="vertical">
        <div class="vertical">Really long and complex title 3</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Example</td>
      <td>a, b, c</td>
      <td>1, 2, 3</td>
    </tr>
  </tbody>
</table>

Deenathaiyalan Shanmugam
quelle
3
Bitte fügen Sie eine Erklärung hinzu, wie Ihre Antwort das in der Frage identifizierte Problem behebt.
Blurfus