web-dev-qa-db-fra.com

Fractionnement d'une cellule de tableau en deux colonnes en HTML

J'ai le tableau suivant:

<table border="1">
  <tr>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td>Split this one into two columns</td>
  </tr>
</table>

Et je souhaite diviser la cellule qui contient " Diviser celle-ci en deux colonnes " en deux cellules/colonnes. Comment puis-je m'y prendre?

violon

htmlcsshtml-table
31
user1038814

Comme ceci http://jsfiddle.net/8ha9e/1/

Ajouter colspan="2" au 3 <th> et ensuite 4 <td> est dans votre deuxième rangée.

<table border="1">
  <tr>
    <th scope="col">Header</th>
    <th scope="col">Header</th>
    <th scope="col" colspan="2">Header</th>
  </tr>
  <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <!-- The following two cells will appear under the same header -->
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>
36
punkrockbuddyholly

Je suis venu ici pour un problème similaire auquel je faisais face avec les en-têtes de table.

La réponse de @ MrMisterMan, ainsi que d'autres, ont été vraiment utiles, mais les frontières battaient mon jeu. Donc, j'ai fait quelques recherches pour trouver l'utilisation rowspan.

Voici ce que j'ai fait et je suppose que cela pourrait aider les autres à faire face à quelque chose de similaire.

<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px">
    <tr align="center" >
        <th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th>
        <th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th>
        <th style="padding:2.5px;" rowspan="2">Quantity</th>
        <th style="padding:2.5px;" colspan="2">Rate per Item</th>
        <th style="padding:2.5px;" colspan="2">AMOUNT</th>
    </tr>
    <tr>
        <th>Rs.</th>
        <th>P.</th>
        <th>Rs.</th>
        <th>P.</th>
    </tr>
</table>
16
lU5er

Vous avez deux options.

  1. Utilisez une colonne supplémentaire dans l'en-tête et utilisez <colspan> dans votre en-tête pour étirer une cellule de deux colonnes ou plus.
  2. Insérer un <table> avec 2 colonnes à l'intérieur du td pour lequel vous voulez des colonnes supplémentaires.
15
kumarharsh

Changer la <td> à scinder pour ressembler à ceci:

<td><table><tr><td>split 1</td><td>split 2</td></tr></table></td>
3
cameronjonesweb

est-ce ce que vous cherchez?

<table border="1">
<tr>
 <th scope="col">Header</th>
 <th scope="col">Header</th>
 <th scope="col" colspan="2">Header</th>
</tr>
<tr>
 <th scope="row">&nbsp;</th>
 <td>&nbsp;</td>
 <td>Split this one</td>
 <td>into two columns</td>
</tr>
</table>
3
GMZ

Utilisez cet exemple, vous pouvez scinder avec l'attribut colspan

<TABLE BORDER>
     <TR>
         <TD>Item 1</TD>
         <TD>Item 1</TD>
         <TD COLSPAN=2>Item 2</TD>
    </TR>
    <TR>
         <TD>Item 3</TD>
         <TD>Item 3</TD>
         <TD>Item 4</TD>
         <TD>Item 5</TD>
    </TR>
</TABLE>

Plus d'exemples sur http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html .

2
Donovan Charpin

S'il vous plaît essayez de la manière suivante.

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
  <tr>
    <td colspan="2">Sum: $180</td>
  </tr>
</table>
0
Surendra K