Comment fusionner les cellules d'un tableau en HTML ?-tutoriel HTML-php.cn

Comment fusionner les cellules d'un tableau en HTML ?

王林

Libérer： 2023-09-10 16:09:04

avant

2994 Les gens l'ont consulté

Comment fusionner les cellules dun tableau en HTML ?

Nous utilisons les attributs colspan et rowspan pour fusionner des cellules en HTML. L'attribut rowspan spécifie le nombre de lignes dans lesquelles les cellules doivent être fusionnées, tandis que l'attribut colspan est utilisé pour spécifier le nombre de colonnes dans lesquelles les cellules doivent être fusionnées.

Cet attribut doit être placé à l'intérieur de la balise

Grammaire

Voici la syntaxe de fusion des cellules d'un tableau en HTML.

<td rowspan="2">cell data</td>

Copier après la connexion

Exemple

Ce qui suit est un exemple de programme pour fusionner les cellules des lignes d'un tableau en HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Utiliser l'attribut colspan

Nous pouvons fusionner les cellules des colonnes d'un tableau en utilisant la syntaxe suivante.

Grammaire

Pour colspan, nous utilisons la syntaxe suivante.

<td colspan="2">cell data</td>

Copier après la connexion

Exemple

Ce qui suit est un exemple de programme pour fusionner les cellules des colonnes d'un tableau en HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Last Name</th>
         <th>Job role</th>
      </tr>
      <tr>
         <td colspan="2" >Tharun chandra</td>
         <td >Content writer</td>
      </tr>
      <tr>
         <td colspan="2">Akshaj Vank</td>
         <td >Content writer</td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Exemple

Ce qui suit est notre exemple de programme pour effectuer rowspan et colspan sur un tableau HTML.

<!DOCTYPE html>
<html>
   <style>
      table,tr,th,td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th >First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td >Tharun</td>
         <td rowspan="2">Content writer</td>
      </tr>
      <tr>
         <td >Akshaj</td>
      </tr>
      <tr>
         <td colspan="2">Welcome to the company</td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!