Colonnes Spanning dans le tableau HTML

Question

J'essaye de faire une opération très simple de fusionner deux colonnes dans une table. Cela semble facile avec le colspan, mais si je fusionne des colonnes différentes sans laisser au moins une ligne sans colonnes fusionnées, le dimensionnement est complètement foiré. S'il vous plaît voir l'exemple suivant à http://www.allthingsdope.com/table.html ou jeter un coup d'oeil et essayez le code suivant:

Bon:

<table width="700px"> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td width="200px">3: 200px</td> 
    <td width="100px">4: 100px</td> 
</tr> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td colspan=2 width="500px" >2 & 3: 500px</td> 
    <td width="100px">4: 100px</td> 
</tr> 

<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td colspan=2 width="300px">3 & 4: 300px</td> 
</tr> 
</table> 

Bad:

<table width="700px"> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td colspan=2 width="500px" >2 & 3: 500px</td> 
    <td width="100px">4: 100px</td> 
</tr> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td colspan=2 width="300px">3 & 4: 300px</td> 
</tr> 
</table> 

Cela semble si simple, mais je ne peux pas le comprendre !

Answer 1

Ne placez pas l'attribut width sur les cellules individuelles. Ceci a été déprécié depuis au moins html 4.01 (http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6, si vous vous souciez que le w3c n'approuve pas votre codage). En tout cas, vous rencontrez toutes sortes de problèmes si vous essayez de mélanger cela avec des colspans.

Au lieu de cela, ajouter <col> éléments à la table, comme ceci:

<table width="700px"> 
     <col width="100px"/> 
     <col width="300px"/> 
     <col width="200px"/> 
     <col width="100px"/> 
     <tr> 
      <th>1: 100px</th> 
      <td colspan="2">2 &amp; 3: 500px</td> 
      <td>4: 100px</td> 
     </tr> 
     <tr> 
      <th>1: 100px</th> 
      <td>2: 300px</td> 
      <td colspan="2">3 &amp; 4: 300px</td> 
     </tr> 
    </table> 

Le < élément col > existe précisément pour servir comme un espace réservé sur lequel pour accrocher les attributs applicables à une colonne entière.

Answer 2

Remplacez simplement le paramètre width dans la colonne fusionnée par "auto" - il obtiendra "tout ce qui reste" qui fonctionne parfaitement. Donc:

<table width="700px" border="1px"> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td colspan=2 width="auto" >2 & 3: 500px</td> 
    <td width="100px">4: 100px</td> 
</tr> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td colspan=2 width="auto">3 & 4: 300px</td> 
</tr> 
</table>