¿Puede la tabla HTML tener un número variable de celdas en filas?

Question

¿O debería la cantidad total de celdas igual a columns * rows?

Parece que una tabla con diferente cantidad de celdas en filas diferentes pasa el Validador W3.

Answer 1

Eso no infringe la definición. Sin embargo, se debe utilizar el atributo colspan para expandir la columna de la fila entera:

<table> 
    <tr> 
    <td>Row with</td> 
    <td>2 cols</td> 
    </tr> 
    <tr> 
    <td colspan="2">Row with only one col</td> 
    </tr> 
</table> 

Eso también ayudará si tiene bordes alrededor de las células.

Usted puede incluso tener tablas con una columna que se expande a dos filas:

<table> 
    <tr> 
    <td rowspan="2">First column in row 1 and row 2</td> 
    <td>Second column in row 1</td> 
    </tr> 
    <tr> 
    <td>second column in row 2</td> 
    </tr> 
</table> 

Answer 2

Puede usar colspan, pero la suma que incluye los valores colspan debe ser igual para que la tabla se represente correctamente.

<table> 
    <tr> 
    <td colspan="2">blah</td> 
    </tr> 
    <tr> 
    <td>blah</td> 
    <td>boo</td> 
    </tr> 
</table> 

La primera fila tiene una célula, pero se extiende por 2 células debido a la colspan, la segunda fila tiene dos células y esto es perfectamente válido.

Answer 3

Sí, se puede. En table > tr > td, td contiene el contenido. Td referencia aquí: http://www.htmlcodetutorial.com/tables/_TD.html. En esa referencia, puede ver que TD tiene 2 atributos que son: colspan y rowspan. Al usar esos 2 atributos, una tabla puede tener diferentes cantidades de celdas en filas diferentes.
Demostración:

<table border="1"> 
    <tr> 
      <td>a</td> 
      <td>b</td> 
    </tr> 
    <tr> 
      <td colspan="2">c</td> 
    </tr> 
</table> 

Y

<table border="1"> 
    <tr> 
      <td rowspan="2">a</td> 
      <td>b</td> 
    </tr> 
    <tr> 
      <td>c</td> 
    </tr> 
</table> 

Answer 4

Sí, se puede hacer una tabla HTML y dejar de lado <td> elementos sobre algunas de las filas, pero esto se considera de mal gusto, porque no se puede estar seguro de cómo el renderizador HTML (navegador) manejará esta situación. Puede ser interpretado de forma ligeramente diferente por diferentes navegadores.

La forma recomendada de definir una tabla con un número variable de celdas mostradas por fila es usar colspan para unir dos o más celdas adyacentes en una sola. Esto mantendrá las celdas más a la derecha alineadas con sus columnas correctas y eliminará cualquier ambigüedad sobre lo que quiere que haga el procesador de HTML.

Answer 5

Utilizó:

<table> 
<thead> 
    <th>Column one</th> 
    <th>Column two</th> 
    <th>Column three</th> 
</thead> 
<tbody> 
    <tr> 
     <td rowspan="2">A large cell</td> 
     <td>Another small cell0</td> 
     <td>Another small cell0</td> 
    </tr> 
    <tr> 
     <td>Another small cell1</td> 
     <td>Another small cell1</td> 
    </tr> 
</tbody>