Maison >interface Web >tutoriel HTML >Que signifient les valeurs rowspan et colspan du tableau en HTML ?
Que signifient les valeurs rowspan et colspan du tableau en HTML ?
- 王林avant
- 2023-08-31 23:33:052844parcourir
rowspan et colspan sont des attributs de la balise
Ces attributs doivent être placés à l'intérieur de la balise
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>
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>
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>
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>
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!