Привіт всім, минув якийсь час з того часу, як я щось запитав, це щось мене турбує якийсь час, саме питання в заголовку:
Який улюблений спосіб написання таблиць 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тегів і що зв'язок між заголовками і даними не дуже ясно , як у мене були сумніви при створенні розмітка.
Отже, обидва шляхи роблять таблицю як слід, тут pitcure:
Якщо ви віддасте перевагу заголовкам ліворуч або праворуч, отже, будь-які пропозиції, альтернативи, проблеми з браузером?