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.

Pouvez-vous s'il vous plaît m'aider à créer un tel tableau en HTML?

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:

• tdélément .
• thélément .
• tbodyélément .
• theadélément .
• tableélément .

Si vous ne savez pas comment les dispositions de table fonctionnent, elles commencent essentiellement à x = 0, y = 0 et se frayent un chemin. Expliquons avec des graphiques, car ils sont tellement amusants!

Lorsque vous démarrez une table, vous créez une grille. Votre première ligne et 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 descendant avec chaque valeur incrémentée de y.

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

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

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

Cette ligne contient quatre cellules qui sont toutes des blocs 1x1, remplissant la même largeur de la ligne au-dessus.

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

La ligne suivante contient toutes les cellules 1x1. Mais, par exemple, que se passe-t-il si vous ajoutez une cellule supplémentaire? Eh bien, il ressortirait juste du bord à droite.

<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 nous (plutôt que d'ajouter la cellule supplémentaire) faisons en sorte que toutes ces cellules aient une longueur de lignes de 2? La chose que vous devez considérer ici est que même si vous n'ajoutez plus de cellules dans la ligne suivante, la ligne doit toujours exister (même si c'est une ligne vide). Si vous essayez d'ajouter de nouvelles cellules dans la ligne immédiatement après, vous remarquerez que cela commencerait à les ajouter à la fin de la ligne du bas.

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

Si quelqu'un recherche un rowpan à 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>

Alternativement , si vous souhaitez ajouter la GAUCHE et la DROITE à un ensemble de lignes existant, vous pouvez obtenir le même résultat en les jetant avec un replié colspanentre:

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>

À utiliser rowspansi vous souhaitez étendre les cellules vers le bas et colspans'étendre à travers.

Vous pouvez utiliser rowspan="n"sur un élément td pour qu'il s'étende sur des nlignes et colspan="m"sur un élément td pour qu'il s'étendem colonnes.

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

La propriété que vous recherchez pour ce 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>

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

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

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 du tableau s'étendent sur (ou fusionnent) plusieurs colonnes ou lignes. 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 couvrir (ou fusionner) horizontalement. Autrement dit, vous souhaitez fusionner deux ou plusieurs cellules dans une ligne en 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 s'étendre verticalement. Autrement dit, vous souhaitez fusionner deux ou plusieurs cellules dans la même colonne comme 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>

J'ai utilisé ngIf pour l'une de mes logiques similaires. c'est comme suit:

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

ici, j'obtiens la valeur rowspan de mon objet modèle.

C'est similaire à 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>