Jak mogę utworzyć nagłówek tabeli, który obejmuje wiele wierszy w HTML?

80

Chciałbym skonstruować tabelę w następujący sposób:

|   Major Heading 1    |  Major Heading 2    |
|   Minor1  |  Minor2  | Minor3  |  Minor4   |
----------------------------------------------
|   col1    |   col2   |   col3  |    col4   |
rest of table ...

Widząc, że jest tylko 1 wiersz dla elementów TH, jak mogę skonstruować wiersz nagłówka, taki jak wyrównane 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 ze znacznikami TH z colspan.

html html-table statguy
źródło
Dlaczego nie możesz użyć dwóch rzędów i colspana?
tvanfosson
1
Wiele wierszy znaczników TH zostanie połączonych w jeden wiersz TH. Kontynuując powyższy przykład, wygenerowana tabela będzie pojedynczym wierszem nagłówka Major Heading 1, Major Heading 2, Minor1, Minor2, Minor3, Minor4.
statguy
Jednym z rozwiązań byłoby użycie TD ze specjalnym CSS zamiast TH, ale najlepiej byłoby podążać za tradycyjną konstrukcją tabeli html.
statguy
Nie sądzę, że jest poprawne: jsfiddle.net/7pDqb
tvanfosson
3
Zamknięte jako niezwiązane z tematem ?! „Czy mogę mieć nagłówek tabeli z wieloma wierszami?” wydaje się być bardzo dobrym pytaniem o przepełnienie stosu. Zastanawiałem się tylko, czy włożenie wielu trów do kasety zadziałałoby.
Andrew Koper,

Odpowiedzi:

109

Tak bym to zrobił (działające skrzypce na http://jsfiddle.net/7pDqb/ ) Testowane w Chrome.

th, td { border: 1px solid black }
<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>
Rozwiń fragment

tvanfosson
źródło
24

Czy przypadkowo używałeś rowspanzamiast colspan? A może przypadkowo zapomniałeś zamykającego </tr>tagu?

Wychodząc od odpowiedzi tvanfossona, użyłbym scopeatrybutu na thelementach do celów semantycznych i dostępności :

th, td { border: 1px solid black }
<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>
Rozwiń fragment

rink.attendant.6
źródło
Dziękuję, dokładnie moja sprawa, przypadkowo używając rowspan
maximus
7

Jednak oprócz przypadku komórki nagłówka obejmującej wiele kolumn, bardzo często widoczne są również tabele, w których komórka nagłówka obejmuje dwa wiersze.

Oto przykład. Zobacz col 5i data5poniż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>

Oto skrzypce .

gm2008
źródło
4

Strona internetowa W3C Web Accessibility Initiative (WAI) mówi, aby używać struktury znaczników pokazanej poniżej.

(Zwróć uwagę, że wyrenderowane znaczniki w przykładowej tabeli w witrynie są nieco inne niż te, które pokazują w przykładowych znacznikach. Zobacz link i sprawdź przykładową tabelę).

Źródło: https://www.w3.org/WAI/tutorials/tables/irregular/#table-with-two-tier-headers

<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>
cantera
źródło