Tableau HTML aide en alternant le nombre de cellules

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

  •  06-07-2019
  •  | 
  •  

Question

Quel est le code HTML approprié si je souhaite alterner le nombre de cellules dans chaque ligne? Je veux 2 cellules est la rangée 1, 3 dans la rangée 2, 2 en 3, 3 en 4 etc ... Semblable à un mur de briques. J'ai ceci jusqu'à présent, mais cela ne rend pas comme je le voudrais. Je sais que je pourrais faire ces tables gigognes, mais puis-je le faire avec une seule table? 

<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>
Était-ce utile?

La solution

Vous ne pouvez pas avoir une largeur de cellule fractionnée. Au lieu de cela, vous devez rechercher le plus petit dénominateur commun pour le nombre de lignes dans les plages inférieure et supérieure. Dans votre exemple, 2 et 3, ce qui correspond à 6, votre tableau a donc 6 cellules de largeur, les lignes paires couvrant 3 chacune et les lignes impaires couvrant 2 chacune. 

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

Notez que la largeur du tableau est facilement divisible par 2 et 3 et que les largeurs sont définies explicitement dans chaque cellule.

Autres conseils

Une façon de le faire serait via CSS. Vous pouvez configurer une table aussi grande que nécessaire (4x4, par exemple), puis appliquer un style à chaque cellule, selon le cas. Il y aurait deux styles, brique et vide, l’un signifiant "brique". et l'autre signifiant espace vide.

Vous pouvez donc faire quelque chose comme ce qui suit: 

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

Je suis à peu près sûr que les colspans doivent avoir une valeur entière, les fractions ne sont pas autorisées. Vous pouvez essayer d'ajouter une cellule factice avec 0 largeur, 0 remplissage, 0 marge sur la ligne à 3 cellules. 

<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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top