Jak mogę zbudować nagłówek tabeli obejmujący wiele wierszy w HTML?


Chciałbym zbudować taki stół:
| Major Heading 1 | Major Heading 2 |
| Minor1 | Minor2 | Minor3 | Minor4 |
----------------------------------------------
| col1 | col2 | col3 | col4 |
rest of table ...

Widząc, że na elementy TH jest tylko 1 wiersz, jak mogę skonstruować wiersz nagłówka, taki jak ustawione w linii kolumny? Tabele hierarchiczne nie wydają się dobrą opcją, ponieważ szerokości kolumn nie są wyrównane, a także nie mogę użyć dwóch wierszy z tagiem TH z colspan.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Tak bym to zrobił (pracując na skrzypcach

http://jsfiddle.net/7pDqb/
http://jsfiddle.net/7pDqb/) testowane w Chrome.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
th, td { border: 1px solid black }

<pre class="snippet-code-html lang-html prettyprint-override">
<table>
<thead>
<tr>
<th colspan="2">Major 1</th>
<th colspan="2">Major 2</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
</tbody>
</table>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Czy przypadkowo użyłeś
rowspan
zamiast
colspan
? A może przypadkowo zapomniałeś zamykającego tagu
& </tr & >
?
Rozszerzając odpowiedź tvanfosson, użyłbym

Atrybut
scope
dla elementów
th
https://developer.mozilla.org/ ... nt/th
do celów semantycznych i

dostępność
http://www.w3.org/WAI/GL/WCAG2 ... .html
:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
th, td { border: 1px solid black }

<pre class="snippet-code-html lang-html prettyprint-override">
<table>
<thead>
<tr>
<th colspan="2" scope='colgroup'>Major Heading 1</th>
<th colspan="2" scope='colgroup'>Major Heading 2</th>
</tr>
<tr>
<th scope='col'>Minor1</th>
<th scope='col'>Minor2</th>
<th scope='col'>Minor3</th>
<th scope='col'>Minor4</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
</tbody>
</table>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jednak poza przypadkiem, gdy komórka nagłówka obejmuje wiele kolumn, bardzo często występują również tabele, w których komórka nagłówka obejmuje dwa wiersze.
Oto przykład. Zobacz
col 5
i
data5
poniżej:
<table>
<thead>
<tr>
<th colspan="2">Major 1</th>
<th colspan="2">Major 2</th>
<th rowspan="2">col 5</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
</tr>
</tbody>
</table>

Tutaj

fiddle
http://jsfiddle.net/u3qw0cnn/1/
.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Strona internetowa W3C Internet Accessibility Initiative (WAI) mówi o używaniu struktury znaczników pokazanej poniżej.
(Zwróć uwagę, że wyrenderowane znaczniki w przykładowej tabeli w witrynie internetowej różnią się nieco od tego, co pokazują w przykładowych znacznikach. Zobacz łącze i sprawdź przykładową tabelę).
Źródło:

https://www.w3.org/WAI/ tutorials/table/invalid/# table-with-two-tier-headers
https://www.w3.org/WAI/tutorials/tables/irregular/
<table>
<col>
<colgroup span="2"></colgroup>
<colgroup span="2"></colgroup>
<tr>
<td rowspan="2"></td>
<th colspan="2" scope="colgroup">Mars</th>
<th colspan="2" scope="colgroup">Venus</th>
</tr>
<tr>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
<th scope="col">Produced</th>
<th scope="col">Sold</th>
</tr>
<tr>
<th scope="row">Teddy Bears</th>
<td>50,000</td>
<td>30,000</td>
<td>100,000</td>
<td>80,000</td>
</tr>
<tr>
<th scope="row">Board Games</th>
<td>10,000</td>
<td>5,000</td>
<td>12,000</td>
<td>9,000</td>
</tr>
</table>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się