La tabla HTML ayuda a alternar el número de celdas

StackOverflow https://stackoverflow.com/questions/1619179

  •  06-07-2019
  •  | 
  •  

Pregunta

¿Cuál es el HTML adecuado si quiero alternar el número de celdas en cada fila? Quiero 2 celdas es la fila 1, 3 en la fila 2, 2 en 3, 3 en 4, etc ... Similar a una pared de ladrillo. Tengo esto hasta ahora, pero no se procesa como me gustaría. Sé que podría hacer estas tablas de anidación, pero ¿puedo hacer esto con una tabla? 

<table border="1" cellpadding="10">
  <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
</table>
¿Fue útil?

Solución

No puede tener un ancho de fracciones de intervalo de celda. En su lugar, debe encontrar el mínimo denominador común para el número de filas en los rangos superior e inferior. En su ejemplo, 2 y 3, que es 6, entonces su tabla tiene 6 celdas de ancho, con las filas pares que abarcan 3 cada una y las filas impares que abarcan 2 cada una. 

<table width="360">
    <tr>
        <td align="center" width="180" colspan="3">x</td>
        <td align="center" width="180" colspan="3">x</td>
    </tr>
    <tr>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
    </tr>
</table>

Tenga en cuenta que el ancho de la tabla es fácilmente divisible entre 2 y 3, y los anchos se establecen explícitamente en cada celda.

Otros consejos

Una forma de hacerlo sería a través de CSS. Debería configurar una tabla que sea tan grande como la necesite (4x4, por ejemplo), y luego aplicar un estilo a cada celda según corresponda. Habría dos estilos, ladrillo y vacío, uno que significa un " ladrillo " y el otro que significa espacio vacío.

Entonces, podrías hacer algo como lo siguiente: 

<html>
<head>
<style type="text/css">
  td { border-style:none; width:30px; }
  td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>

<table>
<tr>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td>Y</td>
</tr>
<tr>
 <td>Y</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
</tr>

Estoy bastante seguro de que los colspans deben tener un valor entero, no se permiten fracciones. Puede intentar agregar una celda ficticia con 0 de ancho, 0 de relleno, 0 margen en la línea de 3 celdas. 

<tr>
    <td colspan="2"> <span> X </span> </td> 
    <td colspan="2"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td><!-- dummy !--></td> 
</tr>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top