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


Hi, es ist schon eine Weile her, seit ich etwas gefragt habe, das hat mich schon eine Weile gestört, die Frage selbst steht im Titel:

Was ist Ihre bevorzugte Methode zum Schreiben von HTML-Tabellen mit vertikalen Headern?

Mit vertikalen Header meine ich, dass die Tabelle den Header hat (<th>) Tag auf der linken Seite (allgemein)

Kopfzeile 1 Daten Daten
Überschrift 2 Daten Daten
Überschrift 3 Daten Daten

Sie sehen so aus, bis jetzt habe ich zwei Möglichkeiten gefunden

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 dieses Weges ist, dass Sie die Header rechts neben den Daten haben, die es darstellt, was ich aber nicht mag, ist das <thead>, <tbody> und <tfoot> Tags fehlen, und es gibt keine Möglichkeit, sie einzuschließen, ohne die nically zusammengestellten Elemente zu brechen, die mich zu der 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 hier ist, dass Sie eine vollständig beschreibende HTML - Tabelle haben, die Nachteile sind, dass die richtige Darstellung ein bisschen CSS für die tbody und thead Tags und dass die Beziehung zwischen den Headern und Daten nicht sehr klar ist, da ich meine Zweifel bei der Erstellung der Markup hatte.


Also, beide Wege machen die Tabelle so, wie es sein sollte, hier eine Grube:

render
Mit den Kopfzeilen auf der linken oder rechten Seite, wenn Sie es vorziehen, so, irgendwelche Vorschläge, Alternativen, Browser-Probleme?


76
2018-06-16 06:45


Ursprung


Antworten:


Erstens, Ihre zweite Option ist kein recht gültiger HTML-Code in dem Sinne, dass alle Zeilen (TR) in einer Tabelle eine gleiche Anzahl von Spalten (TD) enthalten sollten. Ihre Überschrift hat 1, während der Text 3 enthält. Sie sollten das Attribut colspan verwenden, um das zu beheben.

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

Damit gesagt, die erste Option ist meiner Meinung nach der bessere Ansatz, weil sie lesbar ist, unabhängig davon, ob ich CSS aktiviert habe oder nicht. Einige Browser (oder Suchmaschinen-Crawler) tun kein CSS und als solches macht es Ihre Daten sinnlos, da der Header dann Spalten anstelle von Zeilen darstellt.


35
2018-06-16 06:51



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


4
2018-06-16 07:08



Ehrlich, Option 1. Ich würde vorschlagen, dass Sie sich dieses Beispiel von W3.org anschauen (Link unten). Ich denke, diese Methode ist die beste, weil auf diese Weise Ihre Überschriften auch auf Bildschirmlesern interpretiert werden.

https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only


1
2018-01-03 15:39



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>


-2
2017-07-14 12:47