HTML Exemple de table
| Nombre | Prénom | Nom de famille | Points |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Définition de tableaux HTML
Exemple
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Essayez vous - même » Exemple expliqué:
Les tables sont définies avec la <table> balise.
Les tableaux sont divisés en lignes de la table avec la <tr> balise.
Les lignes de tableau sont divisées en données de table avec le <td> balise.
Une ligne de table peut également être divisé en rubriques de table avec le <th> balise.
Les données du tableau <td> sont les conteneurs de données de la table.
Ils peuvent contenir toutes sortes d'éléments HTML comme du texte, des images, des listes, d'autres tables, etc.
Une table HTML avec un attribut Border
Si vous ne spécifiez pas de frontière pour la table, il sera affiché sans frontières.
Une bordure peut être ajouté à l' aide de la border attribut:
Exemple
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Essayez vous - même » La border attribut est sur sa sortie de la norme HTML! Il est préférable d'utiliser les CSS.
Pour ajouter des bordures, utilisez la propriété CSS border:
Rappelez-vous de définir les frontières pour la table et les cellules du tableau.
Un tableau HTML avec des bordures Collapsed
Si vous voulez que les frontières à l' effondrement dans une frontière, ajouter CSS border-collapse :
Une table HTML avec un rembourrage cellulaire
rembourrage cellulaire spécifie l'espace entre le contenu de la cellule et de ses frontières.
Si vous ne spécifiez pas de rembourrage, les cellules de table seront affichées sans rembourrage.
Pour définir le rembourrage, utilisez le CSS padding propriété:
Exemple
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} Essayez vous - même » HTML Tableau Headings
Les titres du tableau sont définies avec le <th> balise.
Par défaut, tous les principaux navigateurs affichent les titres des tableaux en gras et centré:
Exemple
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> Essayez vous - même » À gauche aligner les têtes de tableau, utilisez le CSS text-align propriété:
Une table HTML avec espacement des frontières
l'espacement des frontières spécifie l'espace entre les cellules.
Pour définir l'espacement des frontières pour une table, utilisez la CSS border-spacing propriété:
Si la table est effondré frontières, l'espacement des frontières n'a pas d'effet.
Tableau des cellules qui enjambent De nombreuses colonnes
Pour une durée de cellules plus d'une colonne, utilisez le colspan attribut:
Exemple
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table> Essayez vous - même » Tableau des cellules qui enjambent le nombre de lignes
Pour une durée de cellules plus d'une ligne, utilisez le rowspan attribut:
Exemple
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table> Essayez vous - même » Un tableau HTML avec une légende
Pour ajouter une légende à une table, utilisez la <caption> tag:
Exemple
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table> Essayez vous - même » La <caption> balise doit être insérée immédiatement après la <table> balise.
Un style spécial pour une table
Pour définir un style spécial pour une table spéciale, ajouter un id attribut à la table:
Exemple
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>Maintenant, vous pouvez définir un style particulier pour ce tableau:
table#t01 {
width: 100%;
background-color: #f1f1c1;
} Essayez vous - même » Et d'ajouter plus de styles:
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
} Essayez vous - même » Résumé du chapitre
- Utilisez le code HTML <table> élément pour définir une table
- Utiliser le code HTML <tr> élément pour définir une ligne de la table
- Utilisez le code HTML <td> élément pour définir un ensemble de données de table
- Utilisez le code HTML <th> élément pour définir un cap de table
- Utilisez le code HTML <caption> élément pour définir une légende de table
- Utilisez le CSS border propriété pour définir une frontière
- Utilisez le CSS border-collapse propriété à l' effondrement des frontières cellulaires
- Utilisez le CSS padding propriété pour ajouter un rembourrage aux cellules
- Utilisez le CSS text-align propriété pour aligner le texte cellulaire
- Utilisez le CSS border-spacing propriété pour définir l'espacement entre les cellules
- Utilisez le colspan attribut pour faire une durée de cellule de colonnes
- Utilisez le rowspan attribut pour faire une portée de cellule de lignes
- Utilisez l' id attribut pour définir de façon unique une table
Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Tableau HTML Mots-clés
| Marque | La description |
|---|---|
| <table> | Définit une table |
| <th> | Définit une cellule d'en-tête dans un tableau |
| <tr> | Définit une ligne dans une table |
| <td> | Définit une cellule dans une table |
| <caption> | Définit une légende de table |
| <colgroup> | Indique un groupe d'une ou plusieurs colonnes dans un tableau de mise en forme |
| <col> | Spécifie des propriétés de colonne pour chaque colonne dans un <colgroup> élément |
| <thead> | Groupes le contenu d'en-tête dans une table |
| <tbody> | Groupes Le contenu du corps dans une table |
| <tfoot> | Groupes Le contenu de pied dans une table |