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

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

Exemple

Pouvez-vous m’aider s’il vous plaît à faire une telle table en HTML?

    Je suggère:

     table { empty-cells: show; border: 1px solid #000; } table td, table th { min-width: 2em; min-height: 2em; border: 1px solid #000; } 
     
     
    I II III IIII
    1 2 3 4

    Si vous ne comprenez pas comment fonctionnent les mises en page de tables, elles commencent par x = 0, y = 0 et se propagent. Expliquons avec des graphiques, car ils sont tellement amusants!

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

    Pour votre première ligne, vous ne définissez que deux cellules. L’une d’entre elles s’étend sur 2 lignes et l’autre sur 4 colonnes. Donc, quand vous atteignez la fin de votre première ligne, cela ressemble à ceci:

    Prévisualisation # 0001

     

    Maintenant que la ligne est terminée, le “pointeur de tableau” passe à 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 remarque sur la différence entre les lignes de lignes.

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

    Prévisualisation # 0002

     

    La rangée suivante comprend toutes les cellules 1×1. Mais, par exemple, que faire si vous avez ajouté une cellule supplémentaire? Eh bien, il suffit de faire sauter le bord à droite.

    Prévisualisation # 0003

     

    * Mais que se passe-t-il si, au lieu d’append la cellule supplémentaire, toutes ces cellules ont un nombre de lignes de 2? La chose à 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 elle est vide). Si vous avez essayé d’append de nouvelles cellules dans la ligne immédiatement après, vous remarquerez qu’il commence à les append à la fin de la ligne inférieure.

    Prévisualisation # 0004

     

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

    Si quelqu’un cherche un range de lignes à gauche et à droite, voici comment vous pouvez le faire:

     table { border-collapse: collapse; } td { padding: 20px; border: 1px solid black; text-align: center; } 
     
    LEFT 1 2 3 4 RIGHT
    5 6 7 8
    - - - - - -

    Utilisez rowspan si vous souhaitez étendre les cellules et colspan pour s’étendre à travers.

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

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

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

     
      
    x y
    I II III IV
    nothing 1 2 3 4
    ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
      
    12
    3333
    13333

    Il est similaire à votre table

      
    x y
    I II III IV
    empty 1 2 3 4

    Colspan et Rowspan Une table est divisée en lignes et chaque ligne est divisée en cellules. Dans certaines situations, nous avons besoin que les cellules de la table s’étendent sur plusieurs colonnes ou lignes. Dans ces situations, nous pouvons utiliser les atsortingbuts Colspan ou Rowspan.

    Colspan L’atsortingbut colspan définit le nombre de colonnes qu’une cellule doit couvrir (ou fusionner) horizontalement. C’est-à-dire que vous souhaitez fusionner deux cellules ou plus dans une seule cellule.

      

    Comment colspan?

       
    Merged
    Third Cell Forth Cell

    Rowspan L’atsortingbut rowspan spécifie le nombre de lignes qu’une cellule doit couvrir verticalement. C’est-à-dire que vous souhaitez fusionner deux ou plusieurs cellules dans la même colonne en tant que cellule unique verticalement.

      

    Comment Rowspan?

       
    First Cell Merged
    Third Cell