Die gängigste Art, eine HTML-Tabelle mit vertikalen Überschriften zu schreiben?

Question

Hallo zusammen, es ist schon eine Weile her, dass ich etwas gefragt habe. Es geht um etwas, das mich schon eine Weile beschäftigt, die Frage selbst steht im Titel:

Wie schreiben Sie HTML-Tabellen mit vertikalen Überschriften am liebsten?

Mit vertikaler Kopfzeile meine ich, dass die Tabelle die Kopfzeile ( <th> ) Tag auf der linken Seite (im Allgemeinen)

Kopfzeile 1 Daten Daten Daten
Kopfzeile 2 Daten Daten Daten
Kopfzeile 3 Daten Daten Daten

Sie sehen so aus, und bisher habe ich zwei Möglichkeiten gefunden

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 Hauptvorteil dieser Methode besteht darin, dass die Kopfzeilen rechts (eigentlich links) neben den Daten stehen, die sie repräsentieren, was mir jedoch nicht gefällt, ist, dass die <thead> , <tbody> y <tfoot> Tags fehlen, und es gibt keine Möglichkeit, sie einzufügen, ohne die schön aneinandergereihten Elemente zu zerstören, was mich zur zweiten Option geführt hat.

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 vollständig beschreibende HTML-Tabelle haben, die Nachteile sind, dass die richtige Darstellung ein wenig CSS für die tbody y thead Tags und dass die Beziehung zwischen den Kopfzeilen und den Daten nicht sehr klar ist, da ich bei der Erstellung des Markups meine Zweifel hatte.

---

Also, beide Wege machen die Tabelle, wie sie sein sollte, hier ein Pitcure:

Mit den Kopfzeilen auf der linken oder rechten Seite, wenn Sie es bevorzugen würden, also, irgendwelche Vorschläge, Alternativen, Browser-Probleme?

Answer 1

Erstens ist Ihre zweite Option nicht ganz gültiges HTML in dem Sinne, dass alle Zeilen (TR) in einer Tabelle eine gleiche Anzahl von Spalten (TD) enthalten sollten. Ihre Kopfzeile hat eine Spalte, während der Hauptteil drei hat. Sie sollten das colspan-Attribut verwenden, um das zu ändern.

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

In diesem Sinne Die erste Option ist meiner Meinung nach der bessere Ansatz, weil sie unabhängig davon lesbar ist, ob ich CSS aktiviert habe oder nicht. Einige Browser (oder Suchmaschinen-Crawler) beherrschen kein CSS, so dass Ihre Daten keinen Sinn ergeben, da die Kopfzeile dann Spalten statt Zeilen darstellt.

Answer 2

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

Answer 3

Ehrlich gesagt, Option 1. Ich würde Ihnen empfehlen, sich dieses Beispiel von W3.org (Link unten) anzusehen. Ich halte diese Methode für die beste, weil Ihre Überschriften auf diese Weise auch von Screenreadern richtig interpretiert werden.

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

Answer 4

Wenn Sie ein datengebundenes Steuerelement (z. B. einen 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>

Answer 5

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>