1. Accueil
  2. Question et réponse
  3. Comment augmenter la largeur d'une colonne dans un tableau HTML?

Comment augmenter la largeur d'une colonne dans un tableau HTML?

2010-02-16 6 views
2

Comment augmenter la largeur d'une colonne dans un tableau HTML?Comment augmenter la largeur d'une colonne dans un tableau HTML?

Voici mon code. J'essaye d'obtenir la deuxième étiquette <td> dans chaque rangée pour s'étendre de sorte qu'il y ait plus d'espace entre la zone de texte d'entrée (le 1er tag <td>) et le nom du cookie et son prix (3ème étiquette <td>). Des idées?

<!--Order Info. table -nested table 2 --> 
<!--This is the first nested table within the main table --> 
     <table border="0" width="65%" cellpadding="2"> 
     <!--Row 1 --> 
       <tr> 
        <th colspan="3" align="left">Order Information</th> 
       </tr> 
     <!--Row 2 --> 
       <tr> 
        <td>QTY</td> 
        <td colspan="15"></td> 
        <td>Subtotal</td> 
        <td colspan="90"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td> 
       </tr> 
     <!-- Row 3 --> 
       <tr> 
        <td><input name="quantitya" id="quantitya" size="3" type="textbox" value="0"/></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Chocolate Nut - $10.99</td> 
        <td><input name="subtotala" id="subtotala" size="10" type="textbox" value="0"/></td> 
        <td colspan="40">If yes, note the text for the gift card:</td> 
       </tr> 
     <!-- Row 4 --> 
       <tr> 
        <td><input name="quantityb" id="quantityb" size="3" type="textbox" value="0"/></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Chocolate Chip - $9.99</td> 
        <td><input name="subtotalb" id="subtotalb" size="10" type="textbox" value="0"/></td> 
        <td colspan="5"><textarea wrap="soft" name="giftcardtext" id="giftcardtext" rows="3" cols="20" ></textarea></td> 
       </tr> 
     <!--Row 5 --> 
       <tr> 
        <td><input name="quantityc" id="quantityc" size="3" type="textbox" value="0"/></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Macadamia Nut - $12.99</td> 
        <td><input name="subtotalc" id="subtotalc" size="10" type="textbox" value="0"/></td> 
       </tr> 
     <!--Row 6 --> 
       <tr> 
        <td><input name="quantityd" id="quantityd" size="3" type="textbox" value="0"/></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Oatmeal Raisin - $10.99</td> 
        <td><input name="subtotald" id="subtotald" size="10" type="textbox" value="0"/></td> 
       </tr> 
     <!--Row 7 --> 
       <tr> 
        <td><input name="quantitye" id="quantitye" size="3" type="textbox" value="0"/></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Chocolate Dessert - $10.99</td> 
        <td><input name="subtotale" id="subtotale" size="10" type="textbox" value="0"/></td></td> 
        <td>Shipping:</td> 
        <td colspan="30"></td> 
        <td colspan="150">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td> 
       </tr> 
     <!--Row 8 --> 
       <tr> 
        <td><input name="quantityf" id="quantityf" size="3" type="textbox" value="0"/></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Butter - $7.99</td> 
        <td><input name="subtotalf" id="subtotalf" size="10" type="textbox" value="0"/></td></td> 
        <td>Total:</td> 
        <td colspan="30"></td> 
        <td colspan="1"><input name="totala" id="totala" size="3" type="textbox" value="0.00" /></td> 
       </tr> 
     <!--Row 9 --> 
       <tr> 
        <td colspan="0"></td> 
        <td colspan="4"></td> 
        <td colspan="11" align="left">Subtotal</td> 
        <td><input name="subtotalg" id="subtotalg" size="10" type="textbox" value="0" /></td></td> 
       </tr> 
     </table>

Source

2010-02-16 Ashley

+2

Je pensais que colspan vous permettait d'indiquer à un td d'occuper les cellules td suivantes vers la droite et n'avait pas d'impact sur les largeurs de pixels réelles ... Avez-vous 90 ou 40 colonnes dans votre tableau? –

+0

Comme @Jared l'a laissé entendre, 'colspan' est un nombre de colonnes, pas une largeur de pixel. Il y a un 'colspan = 180' dedans! Aie! – pavium

+0

Vous utilisez incorrectement le tag colspan comme d'autres l'ont signalé. Sortez-les et commencez à partir de là. –

Répondre

2

Vous pouvez le faire en pixels ou en pourcentage:

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="300"> 
<TR> 
<TD WIDTH="100">Column 1</TD> 
<TD WIDTH="200">Column 2</TD> 
</TR> 
</TABLE>

ou

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%"> 
<TR> 
<TD WIDTH="25%">Column 1</TD> 
<TD WIDTH="75%">Column 2</TD> 
</TR> 
</TABLE>

Source

2010-02-17 00:12:11

5

Vous donner la colonne une largeur, soit en utilisant les styles en ligne

<td style="width: 50%">

ou, mieux, dans une feuille de style

td.column1 { width: 50% } 
.... 
<td class="column1"> 
....

Vous pouvez également spécifier un rembourrage pour l'espace entre les colonnes

td.column1 { padding-right: 64px }

En passant, les valeurs énormes colspan varient beaucoup. Que sont-ils censés accomplir?

Source

2010-02-17 00:10:45

0

Si vous avez besoin de plus d'espace entre les colonnes de la table, vous pouvez utiliser les propriétés de marge/largeur CSS avec n'importe quelle valeur qui vous convient. Je déconseillerais fortement d'inclure la mise en forme visuelle html dans votre code html, même si vous le faites, prenez le temps d'apprendre la signification de certaines propriétés html, car "colspan" ne spécifie pas la largeur entre tds, mais les combine en un td.

Source

2010-02-17 00:12:05 Gal

0 
<td style="width: 100px;">Cell data here</td>

Remplacer le nombre avec ce que la largeur que vous voulez. Notez que les colonnes auront la taille maximale dans la table. Donc, si la colonne 2 est 200px dans la ligne 1 et 300px dans la ligne 2, la colonne finira par être 300px dans toutes les lignes.

Source

2010-02-17 00:13:58

Questions connexes

 Questions connexes