Qu'est-ce qu'un tableau HTML ? Comment utiliser divers attributs dans la balise 寻∝梦 Libérer： 2018-08-22 13:59:09 original 24617 Les gens l'ont consulté Qu'est-ce qu'un tableau HTML ? Les différents attributs et utilisations de la balise 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 : Créer une ligne de tableau : ;/tr> Créer des colonnes (cellules) : 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 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 largeur hauteuraligner 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 Aussi d'autres balises dans le tableau : 1, Fonction : Définir le titre du tableau Position : Affiché au centre directement au-dessus du tableau 2. Titre de la ligne ou titre de colonne Titre de colonne : Chaque colonne de chaque ligne, en gras, horizontal L'effet de centrage affiche Titre de ligne : la première colonne de chaque ligne, en gras, le centrage horizontal l'effet affiche Titre de la ligne (colonne) : <table> <caption>标题</caption> <tr> <td></td> <td></td> </tr> </table>3. Applications complexes des tableaux 1. regroupementLe tableau peut être divisé en 3 parties 1. En-tête du tableau 2. Corps du tableau< tbody> 3. Pied de table 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 lignesFusionner les lignes, laisser la cellule spécifiée descendre verticalement, fusionner plusieurs cellules (y compris elle-même) Syntaxe : attribut rowspan de tdRemarque : Que ce soit entre lignes ou colonnes, les cellules fusionnées doivent être supprimées du code3 Imbrication des tableaux Dans un tableau, un autre tableau est intégré. Le tableau imbriqué doit apparaître dans 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-collapseValeur : 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 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 et 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!

Qu'est-ce qu'un tableau HTML ? Les différents attributs et utilisations de la balise