Наиболее распространенный способ написания HTML-таблицы с вертикальными заголовками?

Question

Привет, все, с тех пор, как я спросил что-то давно, это то, что беспокоило меня некоторое время, сам вопрос в заголовке:

Какой ваш предпочтительный способнаписание HTML-таблиц с вертикальными заголовками?

Под вертикальным заголовком я подразумеваю, что таблица имеет тег заголовка (<th>) с левой стороны (как правило)

Заголовок 1 Данные данных данных
Заголовок 2 Данные данных данных
Заголовок 3 Данные данных данных

Они выглядяттаким образом, до сих пор я придумал два варианта

Первый вариант

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

Основным преимуществом этого способа является то, что заголовки располагаются справа (фактически слева) рядом сДанные, которые он представляет, мне не нравятся, однако, то, что теги <thead>, <tbody> и <tfoot> отсутствуют, и нет никакого способа включить их, не разбив красиво расположенные вместе элементы, что приводит меня ко второмуопция.

Второй вариант

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

МаПреимущество здесь в том, что у вас есть полностью описательная HTML-таблица, недостатки в том, что для правильного представления требуется немного CSS для тегов tbody и thead, и что связь между заголовками и данными не очень ясна, поскольку яУ меня были сомнения при создании разметки.

---

Итак, оба способа визуализировать таблицу так, как она должна быть, здесь подведение итогов:

С заголовками слеваили с правой стороны, если вы предпочитаете, так что, какие-либо предложения, альтернативы, проблемы с браузером?

Answer 1

Во-первых, ваш второй вариант не совсем корректный HTML в том смысле, что все строки (TR) в таблице должны содержать одинаковое количество столбцов (TD). Ваш заголовок имеет 1, а тело - 3. Вы должны использовать атрибут colspan, чтобы это исправить.

Ссылка:"Разделы THEAD, TFOOT и TBODY должны содержать одинаковое количество столбцов." - Последний абзац раздела 11.2.3 .

Учитывая сказанное , первый вариант, на мой взгляд, является лучшим подходом, потому что он читается независимо от того, включен я CSS или нет. Некоторые браузеры (или сканеры поисковых систем) не поддерживают CSS, поэтому ваши данные не будут иметь смысла, так как заголовок будет представлять столбцы, а не строки.

Answer 2

Первый вариант ... Я думаю, что это лучший и простой подход ..

Answer 3

Честно говоря, вариант 1. Я бы посоветовал вам взглянуть на этот пример с W3.org (ссылка ниже).Я думаю, что этот метод является лучшим, потому что таким образом ваши заголовки будут также интерпретироваться прямо на экране чтения.

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

Answer 4

Если вы хотите отобразить элемент управления с привязкой к данным (например, ретранслятор asp) в своей таблице, тогда первый вариант будет невозможен.Второй вариант можно использовать следующим образом.

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