Résumé des différents attributs de table HTML (avec code)-tutoriel HTML-php.cn

Cet article partage avec vous un résumé des différents attributs de table du HTML (avec code). Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Ici, nous résumons et enregistrons principalement certains attributs et styles simples du tableau pour plus de commodité future.

Utilisé pour définir des tableaux en HTML, avec des attributs locaux border représentant les bordures. doit être 1 ou la chaîne vide (""). Cet attribut ne contrôle pas le style de la bordure, mais est contrôlé par CSS

Les éléments du tableau peuvent avoir des éléments tr, th, td, thead, tbody, tfoot, colgroup

2 .

　 est utilisé pour définir une ligne du tableau. Étant donné que les tableaux HTML sont orientés lignes, chaque ligne doit être représentée séparément

L'élément tr peut être utilisé dans les éléments table, thead, tbody et tfoot

L'élément tr peut contenir un ou plusieurs td Ou l'élément

Ses attributs align, bgcolor et autres sont obsolètes. Si vous souhaitez définir des attributs, veuillez utiliser les paramètres CSS

Utilisé pour définir l'en-tête de la table et le wrapper de l'en-tête. Vous pouvez définir une ou plusieurs lignes, qui sont des étiquettes de colonnes d'éléments du tableau
Sans l'élément head, tous les tr sont supposés appartenir au corps du tableau

6.

Utilisé pour définir le corps du tableau

7

Utilisé pour définir le pied de page. du tableau marqué

⚠️ :

, doivent avoir la balise Les balises, peu importe où elles sont placées dans la balise

<.> 　 est utilisé pour définir les cellules du tableau. Il peut être utilisé avec les attributs locaux colspan, rowspan et headers 　(1)colspan : Column span, cet attribut spécifie les colonnes qui la cellule peut s'étendre sur Nombre, la valeur de cet attribut doit être un entier (2) rowspan : row span, cet attribut précise le nombre de lignes que la cellule peut s'étendre, la valeur de cet attribut doit être un entier 3) en-têtes : La valeur de cet attribut est la valeur de l'attribut ID d'une ou plusieurs cellules, qui associe les cellules aux en-têtes de colonnes et peut être utilisée avec des lecteurs d'écran ⚠️ : chacun Le tableau doit contenir les trois éléments ci-dessus Un exemple simple <!DOCTYPE html><html> <body> <table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table> </body></html> Copier après la connexion L'effet est le suivant : 4.	Utilisé pour définir les cellules d'en-tête, nous permettant de distinguer efficacement data et sa description Il possède les mêmes attributs locaux que l'élément < td> La différence entre les deux est la suivante :	Oui Représente la balise d'en-tête, généralement située dans la première ligne ou colonne. De plus, le texte dans	sera en gras par défaut, mais	ne le sera pas.	cell. 5.

<.>

　 est utilisé pour définir les cellules du tableau. Il peut être utilisé avec les attributs locaux colspan, rowspan et headers

　(1)colspan : Column span, cet attribut spécifie les colonnes qui la cellule peut s'étendre sur Nombre, la valeur de cet attribut doit être un entier

(2) rowspan : row span, cet attribut précise le nombre de lignes que la cellule peut s'étendre, la valeur de cet attribut doit être un entier

3) en-têtes : La valeur de cet attribut est la valeur de l'attribut ID d'une ou plusieurs cellules, qui associe les cellules aux en-têtes de colonnes et peut être utilisée avec des lecteurs d'écran

⚠️ :

chacun Le tableau doit contenir les trois éléments ci-dessus

Un exemple simple

<!DOCTYPE html><html>
    <body>
        <table>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
            </tr>
            <tr>
                <td>D</td>
                <td>E</td>
                <td>F</td>
            </tr>
        </table>
    </body></html>

Copier après la connexion

L'effet est le suivant :

Utilisé pour définir les cellules d'en-tête, nous permettant de distinguer efficacement data et sa description

Il possède les mêmes attributs locaux que l'élément <

td> La différence entre les deux est la suivante :

Oui Représente la balise d'en-tête, généralement située dans la première ligne ou colonne. De plus, le texte dans

sera en gras par défaut, mais

ne le sera pas.

cell.

, seront affectées respectivement à l'en-tête et au bas du tableau. peut apparaître avant ou après Avant html5, l'élément doit apparaître avant l'élément . Dans html5, l'élément >
8.

Utilisé pour définir un groupe de colonnes de tableau, qui peut être utilisé pour appliquer des styles à une certaine colonne. Bien sûr, vous pouvez. utilisez également ce qui suit : L'élément col

a l'attribut local span indiquant le nombre de colonnes que le groupe de colonnes doit s'étendre. La valeur par défaut est une colonne, c'est-à-dire que la définition du style pour une colonne du tableau
　
peut contenir un ou plusieurs éléments

9, < ;col>

Utilisé pour représenter une seule colonne du tableau. Il est recommandé d'utiliser pour envelopper l'élément attribut pour définir le groupe
a également un attribut local L'attribut span
　
est placé à l'intérieur de l'élément , et l'instance de ; représente une colonne du groupe. Utilisez cette balise pour appliquer des styles à un groupe de colonnes et à une seule colonne du groupe

10,

Utilisé pour définir le titre du tableau , chacun Le tableau ne peut contenir qu'un seul élément

Un exemple simple :

Afficher le code

<!DOCTYPE html><html>
    <head>
        <style>
            thead th,tfoot th {
                text-align: left;
                background: grey;
                color: white            }
            tbody th {
                text-align: right;
                background: lightgrey;
                color: grey            }
            /* tbody td {
                background: greenyellow;
            } */
            #colgroup1 {
                background-color: blueviolet            }
            #col3 {
                background-color: yellow;
                font-size: small            }
        </style>
    </head>
    <body>
        <table>
            <colgroup id="colgroup1">
                <col id="collAnd2" span="2"/>
                <col id="col3"/>
            </colgroup>
            <colgroup id="colgroup2" span="2"></colgroup>
            <thead>
                <tr>
                    <th>Rank</th>
                    <th>Name</th>
                    <th>Color</th>
                    <th colspan="2">Size & Votes</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Rank Footer</th>
                    <th>Name Footer</th>
                    <th>Color Footer</th>
                    <th colspan="2">Size And Votes Footer</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <th>Favorite:</th>
                    <td>XML</td>
                    <td>CSS</td>
                    <td>Java</td>
                    <td>IOS</td>
                </tr>
                <tr>
                    <th>2nd Favorite:</th>
                    <td>Web</td>
                    <td>HTML5</td>
                    <td>CS</td>
                    <td>460</td>
                </tr>
            </tbody>
        </table>
    </body></html>

Copier après la connexion

L'effet est le suivant :

Recommandations associées :

Introduction à la génération dynamique d'éléments HTML et à l'ajout d'attributs aux éléments (avec code)

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!

Étiquettes associées：

HTML不同表格属性

source：php.cn

Article précédent：Introduction à la façon de générer dynamiquement des éléments HTML et d'ajouter des attributs aux éléments (code ci-joint) Article suivant：Analyse des attributs des balises méta des informations méta en HTML (avec code)

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur