Tabela html ajuda o número alternado de células

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Qual é o HTML adequado se eu quiser alternar o número de células em cada linha? Eu quero 2 células é linha 1, 3 na linha 2, 2 em 3, 3 em 4 etc ... semelhante a uma parede de tijolos. Eu tenho isso até agora, mas não se renderiza como eu gostaria. Eu sei que poderia fazer isso mesas de ninho, mas posso fazer isso com uma mesa? 

<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>
Foi útil?

Solução

Você não pode ter larguras fracionárias de extensão celular. Em vez disso, você precisa encontrar o denominador menos comum para o número de linhas nos intervalos inferiores e superiores. No seu exemplo, 2 e 3, que são 6 - então sua mesa tem 6 células de largura, com as fileiras pares de 3 cada e as linhas ímpares que abrangem 2 cada.

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

Nota A largura da tabela é facilmente divisível por 2 e 3, e as larguras são explicitamente definidas em cada célula.

Outras dicas

Uma maneira de fazer isso seria via CSS. Você configuraria uma tabela tão grande quanto precisa (4x4, por exemplo) e aplicará um estilo a cada célula, conforme apropriado. Haveria dois estilos, tijolo e vazio, um significando um "tijolo" e o outro significando espaço vazio.

Então, você pode fazer algo como o seguinte:

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

Tenho certeza de que os Colspans devem ter um valor inteiro, as frações não são permitidas. Você pode tentar adicionar uma célula fictícia com 0 largura, 0 preenchimento e 0 margem na linha de 3 células. 

<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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top