Привет всем, прошло какое-то время с тех пор, как я кое-что спросил, это то, что меня уже давно беспокоит, сам вопрос в заголовке:
Какой способ написания 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тегов и что связь между заголовками и данными не очень ясно , как у меня были сомнения при создании разметка.
Итак, оба способа отображают таблицу так, как она должна, вот ошибка:
С заголовками слева или справа, если вы предпочитаете, есть ли какие-либо предложения, альтернативы, проблемы с браузером?
источник
scopeв этом случае атрибут не будет иметь большого значения. Если вы прочтете, для чего это нужно, то поймете. Это в основном означает, что этот столбец является заголовком для строки или столбца, который он содержит. Проблема в том, что его использование не имеет смысла, если только не заменить его<th>на<td scope="row">.Первый вариант ... Я думаю, это лучший и простой подход ..
источник
Честно говоря, вариант 1. Предлагаю вам взглянуть на этот пример с W3.org (ссылка ниже). Я считаю, что это лучший способ, потому что так ваши заголовки также будут интерпретироваться прямо в программах чтения с экрана.
https://www.w3.org/WAI/tutorials/tables/one-header/#table-with-header-cells-in-the-first-column-only
источник
Если вы хотите отобразить в таблице элемент управления с привязкой к данным (например, asp-повторитель), то первый вариант будет невозможен. Второй вариант можно использовать следующим образом.
источник
источник