web-dev-qa-db-fra.com

Comment utilisez-vous colspan et rowspan dans les tableaux HTML?

Je ne sais pas comment fusionner des lignes et des colonnes dans des tableaux HTML.

Example

Pouvez-vous m'aider à créer un tel tableau en HTML?

htmlhtml-table
87
Max Frai

Je suggérerais:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}
<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

Références:

105
David Thomas

Si vous avez du mal à comprendre le fonctionnement des dispositions de table, elles commencent essentiellement par x = 0, y = 0 et se frayent un chemin. Expliquons avec des graphiques, parce qu'ils sont tellement amusants!

Lorsque vous démarrez une table, vous créez une grille. Votre première ligne et votre cellule seront dans le coin supérieur gauche. Pensez-y comme à un pointeur de tableau se déplaçant vers la droite avec chaque valeur incrémentée de x et vers le bas avec chaque valeur incrémentée de y.

Pour votre première ligne, vous ne définissez que deux cellules. L'une s'étend sur 2 rangées et l'autre sur 4 colonnes. Ainsi, lorsque vous atteignez la fin de votre première ligne, cela ressemble à ceci:

Preview #0001

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

Maintenant que la ligne est terminée, le "pointeur de tableau" passe à la ligne suivante. Puisque la position x de la position 0 est déjà occupée par une cellule précédente, elle passe à la position 1 pour commencer à remplir les cellules. * Voir la remarque sur la différence entre les rangées.

Cette rangée contient quatre cellules qui sont toutes des blocs 1x1, remplissant la même largeur que la rangée au-dessus.

Preview #0002

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

La rangée suivante contient toutes les cellules 1x1. Mais, par exemple, si vous avez ajouté une cellule supplémentaire? Eh bien, il suffirait de sortir l’Edge à droite.

Preview #0003

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

* Mais que se passe-t-il si au lieu de cela (plutôt que d'ajouter la cellule supplémentaire), toutes ces cellules ont une rangée de 2? Ce que vous devez prendre en compte ici est que même si vous n’ajoutez plus de cellules dans la ligne suivante, la ligne doit toujours exister (même s’il s’agit d’une ligne vide). Si vous essayez d’ajouter de nouvelles cellules à la ligne immédiatement après, vous remarquerez qu’elle commencera à les ajouter à la fin de la ligne du bas.

Preview #0004

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Profitez du monde merveilleux de la création de tables!

109
animuson

Si quelqu'un cherche un RowSpan à gauche ET à droite, voici comment vous pouvez le faire:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Sinon , si vous souhaitez ajouter les éléments GAUCHE et DROIT à un ensemble de lignes existant, vous pouvez obtenir le même résultat en les lançant avec une colspan réduite entre:

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}
<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

13
Lane

Utilisez rowspan si vous souhaitez étendre les cellules vers le bas et colspan pour les étendre.

5
Wadester

Vous pouvez utiliser rowspan="n" sur un élément td pour le scinder de n lignes et colspan="m" sur un élément td pour le scinder de m colonnes.

On dirait que votre premier td a besoin d'un rowspan="2" et le prochain td a besoin d'un colspan="4".

3
Surreal Dreams

La propriété que vous recherchez pour le premier td est rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>
3
Chris Sobolewski
<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
2
hjpotter92
<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>
1
Wadester

C'est semblable à votre table

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>

0
Ha3Ha3Ha3

Colspan et Rowspan Un tableau est divisé en lignes et chaque ligne est divisée en cellules. Dans certaines situations, nous avons besoin que les cellules de tableau couvrent (ou fusionnées) plus d'une colonne ou d'une ligne. Dans ces situations, nous pouvons utiliser les attributs Colspan ou Rowspan.

Colspan L'attribut colspan définit le nombre de colonnes qu'une cellule doit recouvrir (ou fusionner) horizontalement. C'est-à-dire que vous souhaitez fusionner deux ou plusieurs cellules consécutives dans une seule cellule.

<td colspan=2 >

Comment colspan?

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Rowspan L'attribut rowspan spécifie le nombre de lignes qu'une cellule doit recouvrir verticalement. En d'autres termes, vous souhaitez fusionner deux cellules ou plus dans la même colonne en une seule cellule verticalement.

<td rowspan=2 >

Comment Rowspan?

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>
0
Fel