Que signifient les valeurs rowspan et colspan du tableau en HTML ?-tutoriel HTML-php.cn

Que signifient les valeurs rowspan et colspan du tableau en HTML ?

王林

Libérer： 2023-08-31 23:33:05

avant

2790 Les gens l'ont consulté

rowspan et colspan sont des attributs de la balise

. Ceux-ci sont utilisés pour spécifier le nombre de lignes ou de colonnes dans lesquelles les cellules doivent être fusionnées. L'attribut rowspan est utilisé pour fusionner des lignes et l'attribut colspan est utilisé pour fusionner les colonnes d'un tableau en HTML.

Ces attributs doivent être placés à l'intérieur de la balise

comme indiqué dans l'image ci-dessous -

Que signifient les valeurs rowspan et colspan du tableau en HTML ?

Grammaire

Voici la syntaxe pour fusionner les cellules d'un tableau en HTML -

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

Copier après la connexion

Exemple 1 - Définition de envergure de ligne

Regardons maintenant un exemple où l'étendue des lignes de l'une des colonnes est définie sur 2.

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
      table,
      tr,
      th,
      td {
         border: 1px solid black;
         padding: 20px;
      }
   </style>
</head>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>First Name </th>
         <th>Job role</th>
      </tr>
      <tr>
         <td></td>
         <td rowspan="2"></td>
      </tr>
      <tr>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Ce qui suit est le résultat de l'exemple de programme ci-dessus

Exemple 2 - Paramètre colspan

Vous trouverez ci-dessous un exemple de fusion de cellules de colonne de tableau en HTML.

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

Copier après la connexion

Ce qui suit est le résultat de l'exemple de programme ci-dessus.

Exemple 3

Voici un autre exemple de fusion de lignes et de colonnes en définissant les valeurs des propriétés rowspan et colspan dans un seul programme

<html>
<head>
   <style>
      table, th, td {
         border: 1px solid black;
         width: 100px;
         height: 50px;
      }
   </style>
</head>
<body>
   <h1>Heading</h1>
   <table>
      <tr>
         <td colspan="2" ></td>
      </tr>
      <tr>
         <td ></td>
         <td></td>
      </tr>
      <tr>
         <td colspan="2"></td>
      </tr>
   </table>
</body>
</html>

Copier après la connexion

Ce qui suit est le résultat de l'exemple de programme ci-dessus.

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!