Les tableaux HTML par défaut semblent assez décevants - égayez-les avec de beaux effets CSS.
L'ajout d'un tableau à votre site Web est un moyen utile de présenter clairement de grandes quantités d'informations. Les tableaux permettent également une utilisation efficace de l'espace et vous permettent de lire et de comparer plus facilement des données complexes.
Vous pouvez concevoir des tableaux plus attrayants visuellement à l'aide de CSS. Cela peut également améliorer l'expérience utilisateur globale de votre site Web.
Conception moderne de rangées et de colonnes simples
Vous pouvez ajouter une conception de tableau simple avec des lignes et des colonnes uniques et aucune cellule fusionnée. Le style du tableau garantit également que votre page Web est attrayante pour l'utilisateur. Outre le style de table, il existe d'autres effets HTML sympas et Dispositions de site Web d'affichage CSS vous pouvez ajouter à votre site Web.
Vous pouvez afficher le code de cet exercice dans son Dépôt GitHub.
- Dans un nouveau fichier HTML, ajoutez la structure de base du code HTML :
html>
<html>
<diriger>
<titre>Mon tableau simpletitre>
diriger>
<corps>
corps>
html> - À l'intérieur du corps, ajoutez des balises de table :
<tableau>
tableau> - L'élément de tableau HTML doit contenir ligne de tableau balises pour chaque ligne à l'intérieur du tableau. La ligne du haut est couramment utilisée pour les en-têtes. Utiliser en-tête de tableau Balises HTML pour représenter chaque colonne du tableau :
<tr>
<e>En-tête 1e>
<e>En-tête 2e>
<e>En-tête 3e>
tr> - Ajoutez d'autres lignes sous la ligne d'en-tête. Utiliser données du tableau Balises HTML pour ajouter des données dans chaque cellule du tableau :
<tr>
<td>Ligne 1, Colonne 1td>
<td>Ligne 1, Colonne 2td>
<td>Ligne 1, Colonne 3td>
tr>
<tr>
<td>Ligne 2, Colonne 1td>
<td>Ligne 2, Colonne 2td>
<td>Ligne 2, Colonne 3td>
tr>
<tr>
<td>Ligne 3, Colonne 1td>
<td>Ligne 3, Colonne 2td>
<td>Ligne 3, Colonne 3td>
tr>
<tr>
<td>Ligne 4, Colonne 1td>
<td>Ligne 4, Colonne 2td>
<td>Ligne 4, Colonne 3td>
tr>
<tr>
<td>Ligne 5, Colonne 1td>
<td>Ligne 5, Colonne 2td>
<td>Ligne 5, Colonne 3td>
tr> - Ajoutez une balise de style à l'intérieur de la balise head. Ajoutez un style général au tableau, tel que des ombres, des coins de tableau arrondis, des polices et des marges :
<style>
tableau {
border-collapse: effondrement;
largeur: 100%;
couleur: #333;
famille de polices: Arial, sans empattement;
taille de police: 14pixels;
aligner le texte: gauche;
rayon de bordure: 10pixels;
débordement: caché;
boîte ombre: 0 0 20pixelsRVB(0, 0, 0, 0.1);
marge: auto;
marge supérieure: 50pixels;
marge inférieure: 50pixels;
}
style> - Donnez un style à l'en-tête du tableau pour lui donner une couleur d'arrière-plan et un texte aligné :
tableaue {
Couleur de l'arrière plan: #ff9800;
couleur: #fff;
poids de la police: gras;
rembourrage: 10pixels;
transformation de texte: majuscule;
l'espacement des lettres: 1pixels;
border-top: 1pixelssolide#fff;
Bordure du bas: 1pixelssolide#ccc;
} - Stylisez les lignes du tableau pour alterner entre les couleurs grises et blanches et pour ajouter un effet lorsque vous survolez la ligne :
tableautr:nième-enfant (pair)td {
Couleur de l'arrière plan: #f2f2f2;
}tableautr:flottertd {
Couleur de l'arrière plan: #ffedcc;
} - Stylez les données à l'intérieur des cellules du tableau :
tableautd {
Couleur de l'arrière plan: #fff;
rembourrage: 10pixels;
Bordure du bas: 1pixelssolide#ccc;
poids de la police: gras;
} - Ouvrez votre fichier HTML pour afficher le tableau dans un navigateur Web :
Conception de table de cellules multilignes
Certains tableaux incluent des colonnes avec des lignes fusionnées pour former une cellule multiligne.
- Supprimez toutes les lignes du tableau actuel, en ne gardant que celle du haut avec les en-têtes :
<tableau>
<tr>
<e>En-tête 1e>
<e>En-tête 2e>
<e>En-tête 3e>
tr>
tableau> - Créez une cellule multiligne à l'aide de l'attribut rowspan. Cela développera cette cellule sur le nombre de lignes spécifié.
Section 1
<tr>
<tdenvergure="2">Cellule multilignetd>
<td>Ligne 1, Colonne 2td>
<td>Ligne 1, Colonne 3td>
tr>
<tr>
<td>Ligne 2, Colonne 2td>
<td>Ligne 2, Colonne 3td>
tr> - Lors de l'ajout d'une autre ligne multicellulaire avec une valeur d'étendue de lignes différente, ajoutez le nombre correspondant de lignes de tableau Balises HTML. Cela correspond à la hauteur ou au nombre de lignes sur lesquelles la cellule s'étend. Par exemple, si une cellule a un rowspan de 3, vous devrez ajouter trois lignes aux autres colonnes pour aligner correctement le tableau.
Section 2
<tr>
<tdenvergure="3">Cellule multilignetd>
<td>Ligne 3, Colonne 2td>
<td>Ligne 3, Colonne 3td>
tr>
<tr>
<td>Ligne 4, Colonne 2td>
<td>Ligne 4, Colonne 3td>
tr>
<tr>
<td>Ligne 5, Colonne 2td>
<td>Ligne 5, Colonne 3td>
tr> - Ouvrez votre fichier HTML pour afficher le tableau dans un navigateur Web :
Conception de tableau de lignes fusionnées
Semblables aux cellules multilignes, les tableaux peuvent également avoir des lignes qui fusionnent sur plusieurs colonnes.
- Supprimez toutes les lignes du tableau actuel, en ne gardant que celle du haut avec les en-têtes :
<tableau>
<tr>
<e>En-tête 1e>
<e>En-tête 2e>
<e>En-tête 3e>
tr>
tableau> - Ajoutez plus de lignes de tableau au tableau. Utilisez l'attribut colspan pour fusionner l'une des lignes sur 3 colonnes :
Section 1
<tr>
<tdstyle="couleur de fond: #ffedcc"colpan="3">Q1td>
tr>
<tr>
<td>Ligne 2, Colonne 1td>
<td>Ligne 2, Colonne 2td>
<td>Ligne 2, Colonne 3td>
tr>
<tr>
<td>Ligne 3, Colonne 1td>
<td>Ligne 3, Colonne 2td>
<td>Ligne 3, Colonne 3td>
tr>
<tr>
<td>Ligne 4, Colonne 1td>
<td>Ligne 4, Colonne 2td>
<td>Ligne 4, Colonne 3td>
tr> - Ajoutez une autre ligne fusionnée pour séparer les sections du tableau :
Section 2
<tr>
<tdstyle="couleur de fond: #ffedcc"colpan="3">Q2td>
tr>
<tr>
<td>Ligne 6, Colonne 1td>
<td>Ligne 6, Colonne 2td>
<td>Ligne 6, Colonne 3td>
tr>
<tr>
<td>Ligne 7, Colonne 1td>
<td>Ligne 7, Colonne 2td>
<td>Ligne 7, Colonne 3td>
tr>
<tr>
<td>Ligne 8, Colonne 1td>
<td>Ligne 8, Colonne 2td>
<td>Ligne 8, Colonne 3td>
tr> - Ouvrez votre fichier HTML pour afficher le tableau dans un navigateur Web :
Utilisez des tableaux attrayants pour tirer le meilleur parti de vos données
Les tableaux HTML sont un excellent moyen d'afficher des données structurées sur votre site Web. Vous pouvez les styler avec CSS pour améliorer l'apparence par défaut. Cependant, assurez-vous de ne pas vous laisser emporter et d'utiliser des tableaux pour la mise en page. Pour des raisons d'accessibilité, conservez-les strictement pour les données.
Les tableaux plus volumineux peuvent être laborieux à créer et à mettre à jour, surtout si vous utilisez des colonnes et des lignes qui s'étendent. Vous pouvez écrire votre propre code pour générer le balisage ou profiter de syntaxes plus conviviales comme Markdown.
