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

Question 1

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

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

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

Данные данных заголовка 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тегов и что связь между заголовками и данными не очень ясно , как у меня были сомнения при создании разметка.

Итак, оба способа отображают таблицу так, как она должна, вот ошибка:

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

Question 2

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

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

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

Question 3

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

Question 4

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

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

Question 5

Если вы хотите отобразить в таблице элемент управления с привязкой к данным (например, 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>

Question 6

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>