¿Cómo puedo construir un encabezado de tabla que abarque varias filas en HTML?

80

Me gustaría construir una tabla de la siguiente manera:

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

Dado que solo hay 1 línea para los elementos TH, ¿cómo puedo construir la fila del encabezado, como la alineación de las columnas? Las tablas jerárquicas no parecen una buena opción porque los anchos de las columnas no se alinean y tampoco puedo usar dos filas con etiquetas TH con colspan.

html html-table statguy
fuente
¿Y por qué no puedes usar dos filas y colspan?
tvanfosson
1
Varias filas de etiquetas TH se fusionarán en una sola fila de TH. Continuando con mi ejemplo anterior, la tabla generada será una sola fila de encabezado de Major Heading 1, Major Heading 2, Minor1, Minor2, Minor3, Minor4.
statguy
Una solución sería usar TD con CSS especial en lugar de TH, pero idealmente me gustaría seguir la construcción de tablas html tradicional.
statguy
No creo que sea correcto: jsfiddle.net/7pDqb
tvanfosson
3
¿Cerrado como fuera de tema? "¿Puedo tener un encabezado de tabla con varias filas?" parece una pregunta de desbordamiento de pila perfectamente buena. Me preguntaba si funcionaría poner múltiples tr en un thead yo mismo.
Andrew Koper

Respuestas:

109

Así es como lo haría (violín de trabajo en http://jsfiddle.net/7pDqb/ ) Probado en 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>
Expandir fragmento

tvanfosson
fuente
24

¿Estabas usando accidentalmente en rowspanlugar de colspan? ¿O olvidaste accidentalmente una </tr>etiqueta de cierre ?

Extendiendo la respuesta de tvanfosson, usaría el scopeatributo en los thelementos con fines semánticos y de accesibilidad :

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>
Expandir fragmento

asistente de pista.6
fuente
GRACIAS, exactamente mi caso, accidentalmente usando rowspan
maximus
7

Sin embargo, además del caso de la celda de encabezado que abarca varias columnas, también se ven con mucha frecuencia las tablas que tienen una celda de encabezado que abarca dos filas.

Aquí hay un ejemplo. Ver col 5y a data5continuación:

    <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>

Aquí está el violín .

gm2008
fuente
4

El sitio web de la Iniciativa de Accesibilidad Web (WAI) del W3C dice que se use la estructura de marcado que se muestra a continuación.

(Tenga en cuenta que el marcado representado en la tabla de ejemplo del sitio web es ligeramente diferente al que se muestra en el marcado de muestra. Consulte el enlace e inspeccione la tabla de ejemplo)

Fuente: 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
fuente