. Dans l'ensemble, votre code ressemblerait à ceci:
Nom |
Intitulé du poste |
Adresse e-mail |
Anna Fitzgerald |
Rédactrice |
exemple@entreprise.com |
John Smith |
Responsable marketing |
example2@company.com |
Zendaya Grace |
PDG |
example2@company.com |
Voici à quoi ressemblerait le tableau sur le front end de votre site Web:
Source de l'image
Notez que chaque colonne est juste assez large pour s'adapter au texte, et qu'il n'y a pas de bordures séparant une colonne ou une ligne de la suivante. Le résultat est encombré et difficile à lire.
Ci-dessous, nous allons examiner quelques façons de rendre ce tableau plus facile à lire.
Modifier la bordure du tableau
Les tableaux n'ont pas de bordures par défaut. Pour ajouter des bordures, utilisez la propriété CSS border.
Disons que je veux ajouter une simple bordure noire autour de mon tableau ci-dessus. Ensuite, il me suffirait d'ajouter le CSS suivant dans la section head de mon fichier HTML ou dans ma feuille de style externe.
table, th, td {
bordure: 1px noir uni;
}
Le code HTML dans la section corps du fichier HTML resterait le même.
Voici à quoi cela ressemblerait sur le front-end:
Source de l'image
Notez que les bordures autour le tableau, l'en-tête et les cellules du tableau sont séparés les uns des autres. Pour les réduire, utilisez la propriété CSS border-collapse. Vous devez simplement ajouter cette propriété à votre ensemble de règles CSS et définir la valeur sur "réduire". Voici à quoi ressemblerait votre CSS maintenant:
table, th, td {
border: 1px uni noir;
border-collapse: collapse;
}
Encore une fois, le HTML reste le même.
Voici à quoi cela ressemblerait sur le front-end:
Source de l'image
L'ajout de bordures a déjà aidé rendre ce tableau plus facile à lire - mais il semble toujours encombré. Voyons comment nous pouvons ajouter plus d'espace blanc à ce tableau.
Modification du remplissage du tableau
Comme mentionné ci-dessus, les tableaux sont uniquement aussi grandes que leur contenu l'exige par défaut. Votre deuxième étape consiste donc à ajouter plus d'espace autour du contenu dans les cellules du tableau. Pour ce faire, utilisez Propriété CSS padding .
Comme le remplissage spécifie l'espace entre le contenu d'une cellule et sa bordure, il vous suffit d'ajouter un remplissage à l'en-tête et aux éléments de données du tableau, pas l'élément de table lui-même. Cela signifie que vous allez créer un nouvel ensemble de règles CSS qui n'utilise que deux sélecteurs CSS : th et td. Vous définiriez ensuite la propriété CSS padding sur la valeur de votre choix. Ci-dessous, je la définirai sur 10px.
Voici ce que le CSS wou ld ressemble à:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
Le HTML reste le même.
Voici à quoi cela ressemblerait sur le frontal:
Source de l'image
Le tableau semble beaucoup mieux maintenant, mais nous pouvons l'améliorer en différenciant l'en-tête des autres cellules. Voyons comment ci-dessous.
Modification de l'en-tête du tableau
Pour faire ressortir l'en-tête du tableau, vous peut faire quelque chose d'aussi simple que d'ajouter une couleur d'arrière-plan à ces cellules. Il vous suffit d'utiliser le sélecteur d'élément ou "th" pour appliquer des propriétés de style uniques à l'en-tête uniquement. Ci-dessous, vous utiliserez le même CSS que ci-dessus, mais ajoutez un troisième ensemble de règles contenant la propriété CSS background-color . Vous pouvez ensuite définir la propriété sur une couleur spécifique valeur en utilisant un code couleur hexadécimal . Ci-dessous, j'utiliserai un code couleur hexadécimal pour une teinte douce de jaune.
Voici le CSS:
table, th, td {
border: 1px uni noir;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background- color: # FDDF95;
}
Voici à quoi cela ressemblerait sur le front-end:
Source de l'image
Ce tableau est plus beau et mieux! Supposons maintenant que vous souhaitiez styliser une colonne au lieu d'une ligne. Nous verrons comment procéder ci-dessous.
Modification de la largeur de colonne du tableau
Si vous deviez devinez comment styliser une colonne, vous pourriez penser que vous devrez ajouter un attribut de style à la cellule de chaque ligne. Ce serait frustrant, non? La bonne nouvelle est que vous n'êtes pas obligé de le faire.
Vous pouvez utiliser la balise
à la place. Cette balise spécifie un groupe d'une ou plusieurs colonnes dans un tableau afin que vous puissiez appliquer le CSS aux colonnes plutôt que cellule par cellule. Pour créer ce groupe, vous ajouteriez la balise
à la section body de votre fichier HTML. Dans cette balise, vous ajouteriez ensuite une balise pour chaque colonne de votre tableau ou pour chaque colonne que vous souhaitez styliser. Voici ce que le code HTML le code ressemble à:
Vous pouvez ensuite cibler ce groupe de colonnes avec CSS. Supposons que vous ne souhaitiez pas simplement spécifier le remplissage - ou l’espace entre le contenu d’une cellule et sa bordure -, vous souhaitez également spécifier la largeur de chaque colonne. Ensuite, vous pouvez ajouter un autre ensemble de règles à votre CSS et définir la propriété width.
Voici à quoi ressemblerait le CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: # FDDF95;
}
colgroup {
largeur: 250px;
}
Voici à quoi ressemblerait le HTML:
Nom |
Intitulé du poste |
Adresse e-mail |
Anna Fitzgerald |
Rédacteur |
example@company.com |
John Smith |
Responsable marketing |
example2@company.com |
Zendaya Grace |
PDG |
exemple2@entreprise.com |
Voici à quoi cela ressemblerait sur le front-end:
Source de l'image
Supposons que vous souhaitiez modifier la largeur d'une seule colonne, comme la colonne contenant les adresses e-mail. Au lieu d'ajouter du CSS interne à la section head de votre fichier HTML, vous pouvez simplement ajouter un attribut de style à la troisième balise
dans la section body. Dans cet attribut, vous devez ajouter et spécifier la propriété width. Voici à quoi ressemblerait la balise :
Voici à quoi cela ressemblerait sur le front-end:
Source de l'image
Une fois que vous êtes plutôt satisfait de l'apparence de votre tableau, vous voudrez peut-être changer sa position sur la page . Une manière vous pouvez le faire en modifiant son alignement par défaut. Voyons comment ci-dessous.
Centrage d'un tableau en HTML
Par défaut, les éléments, y compris l'élément de tableau, seront alignés à gauche sur la page. Si vous souhaitez le centrer sur la page, utilisez la propriété CSS margin.
Tout d'abord, vous allez ajouter un nom de classe à l'élément de table. Dans l'exemple ci-dessous, j'utiliserai le nom "centre". Ensuite, vous pouvez utiliser le sélecteur de classe pour centrer uniquement l'élément du tableau. Les autres éléments de la page resteront alignés à gauche. Voici à quoi ressemblera le HTML:
Nom |
Intitulé du poste |
Adresse e-mail |
Anna Fitzgerald |
Rédacteur |
example@company.com |
John Smith |
Responsable marketing |
example2@company.com |
Zendaya Grace |
PDG |
exemple2@entreprise.com |
Vous allez ensuite ajouter un autre ensemble de règles à votre CSS. À l'aide du sélecteur de classe ".center", vous définissez les propriétés margin-left et margin-right sur "auto". De cette façon, le tableau prendra la largeur spécifiée par CSS ou par le contenu qu'il contient et le navigateur s'assurera que l'espace restant est divisé également entre les marges gauche et droite.
Voici comment le CSS le ferait. regardez tous ensemble:
table, th, td {
border: 1px uni noir;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: # FDDF95;
}
.center {
margin-left: auto ;
margin-right: auto;
}
Voici comment cela ld regardez sur le front-end:
Source de l'image
Maintenant que vous avez modifié le remplissage, la largeur des colonnes, l'alignement et d'autres éléments de votre tableau, vous cherchez peut-être d'autres façons de faire ressortir votre tableau sur la page. Une façon est de changer la couleur d'arrière-plan non seulement de l'en-tête mais de l'ensemble du tableau. Voyons comment.
Modification de la couleur d'arrière-plan du tableau
Pour changer la couleur d'arrière-plan de l'ensemble du tableau, pas seulement l'en-tête du tableau, définissez simplement la propriété de couleur d'arrière-plan CSS pour l'en-tête du tableau et les éléments de données du tableau. Voici à quoi ressemblerait votre CSS:
table, th, td {
border: 1px uni noir;
border-collapse: collapse;
}
th, td {
padding: 10px;
background-color: # FDDF95;
}
.center {
margin-left: auto;
margin-right: auto ;
}
Le HTML resterait le même.
Voici à quoi cela ressemblerait sur le front end:
Source de l'image
Si vous souhaitez que l'en-tête du tableau et les éléments de données du tableau aient des couleurs d'arrière-plan différentes, utilisez simplement les deux sélecteurs d'élément, "th" et "td", un d définir la propriété de couleur d'arrière-plan sur différents codes de couleur hexadécimaux ou nom de couleur s.
Voici à quoi pourrait ressembler le CSS:
table, th, td {
border: 1px uni noir;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: # FFB500;
}
td {
background-color: # FDDF95;
}
.center {
margin-left: auto;
margin- right: auto;
}
Le HTML reste le même.
Voici à quoi cela ressemblerait sur le front end:
Source de l'image
Une autre façon de vous assurer que votre table ne reçoit pas perdu parmi les autres contenus de la page est d'augmenter sa taille de police. Ci-dessous, nous verrons comment.
Taille de la police du tableau HTML
Pour modifier la taille de la police d'un tableau HTML, utilisez la cible Propriété CSS font-size . Vous pouvez utiliser cette propriété pour l'en-tête du tableau et les éléments de données du tableau. Mais disons que vous voulez augmenter la taille de la police de l'en-tête du tableau uniquement.
Alors votre CSS ressemblerait à ceci:
table, th, td {
bordure: 1px noir uni;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
th {
background-color: # FFB500;
font-size: 20px;
}
td {
background-color: # FDDF95;
}
.center {
margin-left: auto;
margin-right: auto;
}
Votre code HTML resterait le même.
Voici à quoi cela ressemblerait sur le front-end:
Source de l'image
Création de tableaux en HTML
Si vous souhaitez partager de grandes quantités de données sur votre site Web, utilisez des tableaux pour présenter ces données d'une manière facile à lire et à comprendre pour les visiteurs. Toutes les étapes décrites ci-dessus peuvent vous aider à ajouter et à personnaliser tables à votre site Web unique. Il vous suffira de vous familiariser avec certains codes HTML et CSS.
Si vous préférez ne pas coder les tables à partir de zéro, vous pouvez utiliser le Framework CSS Bootstrap . Check out Présentation de l'élément de table CSS Bootstrap pour savoir comment procéder.
Aucun commentaire:
Enregistrer un commentaire