La méthode d'implémentation spécifique de la fusion de tableaux HTML

Auteur：Eve Cole Date de mise à jour：2024-12-18 10:51:45

Lorsque nous créons un formulaire HTML

Vous voyez que c'est très injuste. Cela nécessite la fusion des cellules

Principales étapes :

1. Confirmez d’abord si vous souhaitez fusionner vers la droite (fusion de colonnes) ou vers le bas (fusion de lignes).

2. Recherchez les cellules qui doivent être fusionnées.

3. Si la cellule fusionnée a du contenu ou occupe une position, la cellule fusionnée peut être supprimée dans le code source.

Attention particulière :

Lorsque nous fusionnons des cellules, si les cellules fusionnées ont du contenu, même si la fusion ne sera pas affectée, car le contenu des cellules fusionnées n'est en aucun cas traité, les cellules reculeront automatiquement.

Solution : Supprimez simplement les cellules supplémentaires.

Code principal :

Fusionner plusieurs lignes : rowspan="Nombre de cellules fusionnées"

Fusionner entre les colonnes : colspan="Nombre de cellules fusionnées"

Explication détaillée :

Cellule cible :

1 : Ligne croisée : La cellule du haut est la cellule cible, écrivez le code de fusion.

2 : Colonnes croisées : la cellule la plus à gauche est la cellule cible, écrivez le code de fusion.

Ensuite, nous suivons les principales étapes :

Forme initiale <corps>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th>Collecte d'informations sur les étoiles</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <th>Nom</th>
      <th>Genre</th>
      <th>Âge</th>
      <th>Loisirs</th>
    </tr>
    <tr>
      <td></td>
      <td>Frère</td>
      <td>Homme</td>
      <td>24</td>
      <td>Chantez, dansez, rappez et jouez au basket</td>
    </tr>
    <tr>
      <td></td>
      <td>Litang</td>
      <td>Homme</td>
      <td>20</td>
      <td>Mesure du code et gravure nette cinq</td>
    </tr>
    <tr>
      <td></td>
      <td>Menglei</td>
      <td>Homme</td>
      <td>27</td>
      <td>La célèbre épée vole la tour et devient le chasseur ultime</td>
    </tr>
  </table>
</corps>

Cela apparaît comme l'image ci-dessus

Fusion inter-lignes (rowspan) : si nous voulons l'effet suivant, nous devons utiliser l'attribut rowspan

<corps>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th rowspan="5">Collecte d'informations All-Star</th><!--Selon les exigences, recherchez le titre, écrivez l'attribut rowspan et écrivez le paramètre 5, ce qui signifie fusionner la première à la cinquième ligne. en même temps, commentez la première colonne de chaque ligne -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <!-- <th></th> -->
      <th>Nom</th>
      <th>Genre</th>
      <th>Âge</th>
      <th>Loisirs</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>Frère</td>
      <td>Homme</td>
      <td>24</td>
      <td>Chantez, dansez, rappez et jouez au basket</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>Litang</td>
      <td>Homme</td>
      <td>20</td>
      <td>Mesure du code et gravure nette cinq</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>Menglei</td>
      <td>Homme</td>
      <td>27</td>
      <td>La célèbre épée vole la tour et devient le chasseur ultime</td>
    </tr>
  </table>
</corps>

Fusion inter-colonnes (colspan) : si nous voulons l'effet suivant, nous devons utiliser l'attribut colspan

<corps>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th colspan="5">Collecte d'informations All-Star</th><!--Selon les exigences, recherchez le titre, écrivez l'attribut colspan et écrivez le paramètre 5, ce qui signifie fusionner la première à la cinquième colonne, et en même temps, commentez la première ligne de chaque colonne -->
      <!-- <td></td>
      <td></td>
      <td></td>
      <td></td> -->
    </tr>
    <tr>
      <!-- <th></th> -->
      <th>Nom</th>
      <th>Genre</th>
      <th>Âge</th>
      <th>Loisirs</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>Frère</td>
      <td>Homme</td>
      <td>24</td>
      <td>Chantez, dansez, rappez et jouez au basket</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>Litang</td>
      <td>Homme</td>
      <td>20</td>
      <td>Mesure du code et gravure nette cinq</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>Menglei</td>
      <td>Homme</td>
      <td>27</td>
      <td>La célèbre épée vole la tour et devient le chasseur ultime</td>
    </tr>
  </table>
</corps>

Ceci conclut cet article sur la mise en œuvre spécifique de la fusion de tableaux HTML. Pour plus de contenu sur la fusion de tableaux HTML, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles pertinents ci-dessous. J'espère que vous prendrez en charge les downcodes à l'avenir.