Qu'est-ce qu'un tableau HTML ? Comment utiliser divers attributs dans la balise

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

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
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. regroupement

Le 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 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

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

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!