Introduction pertinente à Table en CSS

Bordure du tableau

Spécifiez la bordure du tableau CSS à l'aide de l'attribut border.

L'exemple suivant spécifie une bordure noire pour les éléments Th et TD d'un tableau :

Exemple

table, th, td{border: 1px solid black;}

Veuillez noter que dans l'exemple ci-dessus le tableau a un double cadre. En effet, les éléments table et th/td ont des limites distinctes.

Pour afficher une seule bordure d'un tableau, utilisez l'attribut border-collapse.

Collapse border

la propriété border-collapse définit si la bordure du tableau est réduite en une seule bordure ou séparée :

Instance

table{border-collapse:collapse;}table,th, td{border: 1px solid black;}

Largeur et hauteur du tableau

Les propriétés Largeur et Hauteur définissent la largeur et la hauteur du tableau.

L'exemple suivant est un tableau qui définit la largeur de 100 % et la hauteur du ème élément à 50 pixels :

Exemple

table 
{
width:100%;
}
th
{
height:50px;
}

Alignement du texte du tableau

Propriétés d'alignement du texte et d'alignement vertical dans les tableaux.

L'attribut text-align définit l'alignement horizontal, comme gauche, droite ou centre :

Exemple

td{text-align:right;}

L'attribut vertical-align définit l'alignement vertical, comme haut, bas ou milieu :

Instance

td
{
height:50px;
vertical-align:bottom;
}

Remplissage de table

Si vous souhaitez contrôler les bordures entre les espaces dans le contenu d'un tableau, vous devez utiliser l'option attribut padding des éléments td et th :

Exemple

td
{
padding:15px;
}

Table Color

L'exemple suivant spécifie la couleur de la bordure, ainsi que les couleurs du texte et de l'arrière-plan de le ème élément :

Exemple

table, td, th{border:1px solid green;}th{background-color:green;color:white;}

【Recommandations associées】

1 Recommandation spéciale : "Boîte à outils de programmation php" V0.1 Téléchargement de la version

2 Tutoriel vidéo en ligne CSS gratuit

3. Jiujian (2) - tutoriel vidéo CSS

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!