Maison > Article > interface Web > Résumé des différents attributs de table HTML (avec code)
Résumé des différents attributs de table HTML (avec code)
- 不言original
- 2018-07-21 11:38:542059parcourir
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.
1. 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 3, est utilisé pour définir les cellules du tableau. Il peut être utilisé avec les attributs locaux colspan, rowspan et headers chacun Le tableau doit contenir les trois éléments ci-dessus 4. td> La différence entre les deux est la suivante : 5. 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. 7 9, < ;col> 10,
Afficher le code
Recommandations associées : 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!
<.>
<!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>
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 <
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.
Utilisé pour définir le corps du tableau
Les balises, peu importe où elles sont placées dans la balise , 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.
<!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>L'effet est le suivant :