Qu'est-ce que l'attribut 'rowspan' et comment l'utiliser avec l'élément 'td' en HTML ?

Qu Est Ce Que L Attribut Rowspan Et Comment L Utiliser Avec L Element Td En Html



En HTML, le ' envergure ” est un attribut qui peut être utilisé lors de la création de tableaux. Il est couramment utilisé pour fusionner plusieurs cellules adjacentes dans une direction verticale. Il peut être utilisé pour créer des conceptions de table complexes tout en ajoutant un intérêt visuel pour l'utilisateur. En l'utilisant, le développeur peut réduire le code HTML et améliorer la lisibilité du tableau. De plus, l'attribut 'rowspan' peut aider à organiser un tableau en regroupant plusieurs cellules.

Ce guide montre ce qu'est l'attribut 'rowspan' et comment l'utiliser avec l'élément 'td'.

Qu'est-ce qu'un attribut 'rowspan' ?

L'attribut 'rowspan' est utilisé pour fusionner plusieurs cellules dans une direction verticale. Il est accessible en tant que ' étendue de lignes = valeur ', où le ' valeur ” est le nombre de lignes qui doivent être fusionnées dans une direction verticale. Il est bénéfique pour améliorer la lisibilité de l'utilisateur et afficher des données complexes d'une manière plus attrayante pour l'utilisateur.





Qu'est-ce qu'un élément 'td' ?

Le ' td ” ou élément de données de tableau est utilisé pour définir une cellule dans un tableau HTML. Il est principalement utilisé en conjonction avec d'autres éléments HTML de tableau comme '', '', '

pour créer le contenu du tableau. Il peut également être utilisé avec des attributs tels que 'colspan' et 'rowspan' pour ajouter des fonctionnalités de conception supplémentaires, réduire la complexité et améliorer le facteur de lisibilité, etc. Il est utilisé dans le fichier HTML en utilisant le '
' étiqueter.



Comment utiliser l'attribut 'rowspan' avec l'élément 'td' ?

Pour une meilleure démonstration de la relation entre l'attribut 'rowspan' et l'élément 'td'. Passons en revue un exemple pratique en suivant le guide étape par étape ci-dessous :



Etape 1 : Création du tableau en HTML

Tout d'abord, créez un tableau à l'aide du '

' étiqueter. À l'intérieur, ajoutez plusieurs ' ' balises qui insèrent les lignes dans le tableau et utilisent le '
” tag pour créer des cellules :



< style >

tableau{

border-collapse:collapse;

marge : 40px ;

}

th,td{

bordure : 2 pixels rouge uni ;

rembourrage : 20px ;

}

< / style >

< / diriger >

< corps >

< tableau >

< tr >

< e > emp.id < / e >

< e > Nom de l'employé < / e >

< e > Salaire < / e >

< / tr >

< tr >

< td > 1 < / td >

< td > John < / td >

< td > 160 000 < / td >

< / tr >

< tr >

< td > 2 < / td >

< td > Joseph < / td >

< td > 120 000 < / td >

< / tr >

< tr >

< td > 3 < / td >

< td > Angèle < / td >

< td > 120 000 < / td >

< / tr >

< tr >

< td > 4 < / td >

< td > Écarlate < / td >

< td > 80 000 < / td >

< / tr >

< / tableau >

< / corps >

Dans l'extrait de code ci-dessus :

  • Tout d'abord, les cinq lignes ont été créées et des données factices sont fournies à chaque cellule.
  • Ensuite, le « tableau ” est sélectionné et définissez l'élément “ effondrement « valeur au CSS » border-collapse ' propriété.
  • Après cela, le « frontière ' et ' rembourrage ” Les propriétés sont utilisées pour améliorer la visibilité de l'utilisateur et créer un effet attrayant pour l'utilisateur.

Après l'exécution du code, le tableau apparaît comme ceci :



La sortie ci-dessus indique que la table est créée et stylisée.

Étape 2 : Utilisation de l'attribut « rowspan » avec l'élément « td »

Le ' envergure ” L'attribut fusionne les cellules adjacentes dans le sens vertical. Il est utilisé avec le '

” élément/balise. L'attribut prend un nombre comme valeur et indique combien de cellules sont fusionnées dans une direction verticale. La cellule adjacente à venir doit avoir une cellule de moins en quantité, et cet espace est rempli par l'attribut 'rowspan' comme indiqué ci-dessous :

< corps >

< tableau >

< tr >

< e >Emp.id< / e >

< e >Nom de l'employé< / e >

< e >Salaire< / e >

< / tr >

< tr >

< td > 1 < / td >

< td >Jean< / td >

< td > 160 ,000< / td >

< / tr >

< tr >

< td > 2 < / td >

< td >Joseph< / td >

< td envergure = '2' > 120 ,000< / td >

< / tr >

< tr >

< td > 3 < / td >

< td >Angèle< / td >

< / tr >

< tr >

< td > 4 < / td >

< td >Ecarlate< / td >

< td > 80 ,000< / td >

< / tr >

< / tableau >

< / corps >

Dans le code ci-dessus :

  • Le 'rowspan' est attaché à l'employé ayant un ' Salaire ” élément td.
  • La valeur de ' 2 ' est fourni à l'attribut 'rowspan' qui définit les mêmes données dans les deux cellules adjacentes, comme indiqué ci-dessous :

La sortie montre que les deux cellules sont fusionnées et que la lisibilité pour l'utilisateur est maintenant améliorée.

Conclusion

Le ' envergure L'attribut ' fonctionne avec le ' td ” pour fusionner plusieurs cellules adjacentes dans le sens vertical. L'attribut prend un nombre comme valeur et indique combien de cellules sont fusionnées. Il est utilisé lorsque les mêmes données sont fournies à plusieurs cellules. Ce blog a démontré ce qu'est 'rowspan' et comment l'utiliser avec l'élément 'td' en HTML.

Autre

Catégorie

Articles Populaires

Comment désactiver le contrôleur USB sur Raspberry Pi

Comment utiliser l'enregistreur d'écran sous Linux

Comment supprimer un serveur Discord

Qu'est-ce que la fonctionnalité TRIM pour SSD et comment l'activer ?

retour DECR

Qu'est-ce que l'envoi de SMS via le serveur signifie Android

Comment mettre en retrait dans LaTeX

Comment utiliser la fonction Max() en PHP

PySpark Pandas_Udf()

Comment installer Node.js sur Linux Mint 21

Qu'est-ce qu'un Roblox Noob

WordPress Docker Composer

Ajouter Dict à DataFrame dans Pandas

Comment exécuter macOS sur une instance AWS EC2

Comment installer LangChain

Comment obtenir des pommes rapidement dans Minecraft

Comment utiliser la fonction crypt() en PHP

Qu'est-ce qui est indéfini Vs non défini en JavaScript

Qu'est-ce que l'opérateur /= en C++ ?

Comment faire des escaliers en colimaçon dans Minecraft