Qu'est-ce qu'un tableau HTML ? Les différents attributs et utilisations de la balise f5d188ed2c074f8b944552db028f98a1 sont tous présentés dans cet article. Il est très approprié pour les personnes qui débutent avec la balise table d'apprendre. Cet article explique clairement tous les attributs de base de la table. html table table est également Il y a des attributs et quelques utilisations ici
Tout d'abord, comprenons ce qu'est une table et sa fonction
Qu'est-ce que un tableau Tableau : Un
tableau composé d'un certain nombre de cases rectangulaires appelées cellules disposées ensemble dans l'ordre de gauche à droite, de haut en bas. Le rôle d'un tableau : afficher des informations dans une certaine structure.
Comment nous utilisons le tableau :
Définir le tableau : f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08
Créer une ligne de tableau : a34de1251f0d9fe1e645927f19a896e8 ;/tr>
Créer des colonnes (cellules) :b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf
Remarque : Par défaut, les colonnes de chaque ligne sont unifiées.
table : display:table;
Caractéristiques de la table html :
1. 🎜>2. Largeur adaptative (déterminée par le contenu)
Attributs du tableau html :
1, < Attributs
1.width : Définir la largeur du tableau
2.height : Définir la hauteur du tableau
3.align : Définir la hauteur de le tableau dans son élément parent Alignement horizontal, valeur : gauche, centre, droite
4.border : bordure, largeur de bordure, valeur en px, px peut être omis
5.cellpadding
utiliser les « » La distance entre les cellules ou entre les cellules et la table <.>
7.bgcolor : couleur de fond
2. Attribut a34de1251f0d9fe1e645927f19a896e8 dans le tableau
1.align : L'alignement horizontal du contenu de cette ligne
2.valign
L'alignement vertical du contenu de cette ligne
Valeurs : haut, milieu, bas
3.bgcolor
3. L'attribut b6c5a531a458a2e790c1fd6421739d1c
largeur
hauteur
aligner
-
valign
-
bgcolor
-
colspan : définir les cellules pour qu'elles s'étendent sur les colonnes
-
rowspan : Définissez les cellules pour qu'elles s'étendent sur les lignes
<table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>3. Applications complexes des tableaux
1. regroupement
Le tableau peut être divisé en 3 parties
1. En-tête du tableauae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a
2. Corps du tableau45d34ede88d816973d95e26696dafc5dca745a59da05f784b8811374296574e1
3. Pied de table 06669983c3badb677f993a8c29d18845 d93f946a39a259de3097f230ac6e3edf
Remarque : si les lignes du tableau ne sont pas regroupées, elles sont toutes par défaut appartiennent au corps
2. Tableaux irréguliers
Le nombre de colonnes dans chaque ligne n'est pas unifié.
1. Traverser les colonnes
<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table> Fusionner les colonnes, faire en sorte que les cellules spécifiées soient horizontales vers la droite, fusionner plusieurs cellules (y compris vous-même)
Syntaxe : attribut colspan de td
2. Traverser les lignes
Fusionner les lignes, laisser la cellule spécifiée descendre verticalement, fusionner plusieurs cellules (y compris elle-même)
Syntaxe : attribut rowspan de td
Remarque : Que ce soit entre lignes ou colonnes, les cellules fusionnées doivent être supprimées du code
3 Imbrication des tableaux
Dans un tableau, un autre tableau est intégré.
Le tableau imbriqué doit apparaître dans b6c5a531a458a2e790c1fd6421739d1c
Tableau HTML style unique Attributs
1. Border-collapse des attributs de style de table html
<table>
<tr>
<td>
<table>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table> attribut : border-collapse
Valeur : 1.separate : valeur par défaut, bordure séparée mode
1.collapse : mode de fusion des bordures
2. Marge de bordure de l'attribut de style de table html
1. bordures de cellules adjacentes (similaires à l'espacement des cellules)
2. Attribut : border-spacing
Valeur :
1. Prenez 1 valeur
ce qui signifie que l'espacement horizontal et vertical sont égaux
2. Prenez 2 valeurs
. Premier L'espacement horizontal représenté par la première valeur
L'espacement vertical représenté par la deuxième valeur
Séparé par un espace
3 Exigences
bordure-. le repli doit être séparé
Il doit être valide en mode bordure séparée
3. Position du titre de l'attribut de style de table html
3ce998821a5062e2e187f46f1a50ab3c
Fonction : Changer la position du titre de la position par défaut en dessous du tableau
Attribut : côté légende
Valeur :
1. en haut : Par défaut
2. En bas : Le titre est sous le tableau
4. Règles d'affichage pour les attributs de style de tableau du tableau html
1.Fonction
Spécifiez comment le navigateur présente un tableau. Il précise en fait les règles d'algorithme de la cellule
Algorithme par défaut : la largeur de la cellule est déterminée par le contenu et n'est pas limitée par la valeur de largeur définie.
2. Attribut : table-layout
Valeur :
1 auto : valeur par défaut, automatique, la largeur de la colonne est déterminée par le contenu
2. fixe : disposition du tableau fixe, la largeur des colonnes est déterminée par la valeur définie.
3. Disposition automatique du tableau & disposition du tableau fixe
1. Disposition automatique du tableau (auto)
La taille de la cellule s'adaptera à la taille du contenu
Dans Lorsque le tableau est complexe, le chargement sera plus lent
Convient pour une utilisation lorsque la taille de chaque colonne est incertaine
Méthode de présentation de tableau traditionnelle
2. Tableau fixe mise en page (fixe)
La taille de la cellule est déterminée par la valeur définie et n'a rien à voir avec le contenu
Cela accélérera l'affichage du tableau, et le navigateur ne le fera pas besoin de le calculer après avoir chargé la première ligne.
4. Effet d'affichage caché
Attribut : visibilité:collapse
est utilisé sur les éléments du tableau pour supprimer une ligne ou une colonne sans affecter toute la disposition du tableau
Merci d'avoir lu cet article. Si vous avez des questions ou des questions à ce sujet, vous pouvez les poser ci-dessous.
Il y a un autre article sur cette version avancée, bienvenue à cliquer : Introduction au style de balise de table html5 (avec un exemple de centrage CSS de table html5)
[ Petits articles connexes édités par l'éditeur]
Quelle est la fonction de la balise html em ? La différence entre les balises 907fae80ddef53131f3292ee4f81644b et 5a8028ccc7a7e27417bff9f05adf5932
Que signifie la balise html optgroup ? Analyse des exemples d'utilisation et d'attributs de la balise html optgroup
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!
