Quelles sont les propriétés de la table de configuration CSS ?

CSS définit les attributs du tableau : 1. attribut border-collapse, réduire la bordure du tableau ; 2. attribut padding ; 3. attribut border-spacing ; 4. attribut caption-side ; ; 6 , attribut de disposition de table.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Tableau CSS :

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

Attributs

Description

border-collapse

Définissez s'il faut fusionner les bordures du tableau en une seule bordure.

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

border-spacing

Définit la distance séparant les bordures des cellules.

côté légende

Définissez la position du titre du tableau.

cellules-vides

Définissez s'il faut afficher les cellules vides dans le tableau.

table-layout

Définissez l'algorithme d'affichage des cellules, des lignes et des colonnes.

1. Réduire la bordure du tableau : attribut border-collapse (1) Fonction : Définissez si les bordures du tableau sont fusionnées en une seule bordure, ou affichées séparément comme en HTML standard (2 ) Point de connaissance supplémentaire : le tableau a une bordure à double ligne. En effet, les éléments table, th et td ont des bordures indépendantes. (3) Valeurs possibles :

Valeur	Description
séparé	Valeur par défaut. Les frontières seront séparées. Les propriétés border-spacing et empty-cells ne sont pas ignorées.
réduire td>	Les bordures sont fusionnées en une seule bordure lorsque cela est possible. Les propriétés border-spacing et empty-cells sont ignorées.
hériter td>	Spécifie que la valeur de l'attribut border-collapse doit être héritée de l'élément parent.

(4) Prise en charge du navigateur : tous les principaux navigateurs prennent en charge l'attribut border-collapse.

Ps : doit spécifier !DOCTYPE, sinon l'effondrement de la bordure peut produire des résultats inattendus.

2. Marges du tableau : attribut de remplissage

#Fonction : Contrôler le contenu et le contenu dans le table Pour la distance de la bordure, veuillez définir l'attribut padding pour les éléments td et th

3.

(1) Fonction : Cet attribut spécifie la distance entre les limites des cellules dans le modèle de bordure séparée. Cette propriété est ignorée sauf si border-collapse est défini sur séparé. Bien que cette propriété ne s'applique qu'aux tables, elle est héritée par tous les éléments de la table.

(2) Valeurs possibles :

值	描述
length length	规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。 如果定义一个length参数，那么定义的是水平和垂直间距。 如果定义两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。
inherit	规定应该从父元素继承   border-spacing 属性的值。

Valeur

Description

longueur longueur

Spécifie la distance entre les bordures des cellules adjacentes. Utilisez des unités telles que px, cm, etc. Les valeurs négatives ne sont pas autorisées.

值	描述
top	默认值。把表格标题定位在表格之上。
bottom	把表格标题定位在表格之下。
inherit	规定应该从父元素继承 caption-side 属性的值。

Si vous définissez un paramètre longueur, alors l'espacement horizontal et vertical est défini. Si deux paramètres longueur sont définis, alors le premier définit l'espacement horizontal et le second définit l'espacement vertical.

hériter

spécifie que la valeur de l'attribut border-spacing doit être héritée de l'élément parent.

(3) Compatibilité des navigateurs : tous les principaux navigateurs, à l'exception d'IE, prennent en charge la propriété d'espacement des bordures. Internet Explorer 8 (et versions ultérieures) prend en charge la propriété border-spacing si !DOCTYPE est spécifié. 4. Titre du tableau : attribut côté légende (1) Fonction : Définir la position du tableau title, Cette propriété spécifie l'emplacement du titre du tableau par rapport au cadre du tableau. Le titre du tableau s'affiche comme s'il s'agissait d'un élément de niveau bloc avant (ou après) le tableau. (2) Valeurs possibles :

valeur	Description
haut	Valeur par défaut. Placez le titre du tableau au-dessus du tableau.
bas	Positionnez le titre du tableau sous le tableau.
hériter	Spécifie que la valeur de l'attribut côté légende doit être héritée de l'élément parent.

(3) Compatibilité des navigateurs : tous les principaux navigateurs, à l'exception d'IE, prennent en charge l'attribut côté légende. Internet Explorer 8 (et versions ultérieures) prend en charge l'attribut côté légende si !DOCTYPE est spécifié.

5. Traitement des cellules vides : attribut cellules vides

(1) Fonction : Cet attribut définit comment pour représenter des cellules de tableau qui ne contiennent aucun contenu. S'ils sont affichés, les bordures et l'arrière-plan de la cellule sont dessinés. Cette propriété est ignorée sauf si border-collapse est défini sur séparé.

(2) Valeurs possibles :

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。
inherit	规定应该从父元素继承 empty-cells 属性的值。

valeur

Description

masquer

Ne tracez pas de bordures autour des cellules vides.

afficher td>

Dessinez une bordure autour des cellules vides. défaut.

hériter td>

Spécifie que la valeur de l'attribut empty-cells doit être héritée de l'élément parent.

(3) Compatibilité des navigateurs : tous les navigateurs, à l'exception d'IE, prennent en charge l'attribut cellules vides. Internet Explorer 8 (et versions ultérieures) prend en charge l'attribut cellules vides si !DOCTYPE est spécifié.

6. Algorithme de disposition du tableau : attribut de disposition du tableau

(1) Fonction : pour afficher les cellules du tableau, Règles d'algorithme pour les lignes et les colonnes. Cet attribut spécifie l'algorithme de présentation utilisé pour compléter la présentation du tableau.

(2) Deux algorithmes :

  <1>Disposition de table fixe : fixe

       #Avantages : Permet au navigateur de disposer le tableau plus rapidement (dans une disposition de tableau fixe, la disposition horizontale dépend uniquement de la largeur du tableau, de la largeur des colonnes, de la largeur de la bordure du tableau, de l'espacement des cellules et du contenu. de la cellule n'est pas pertinent En utilisant une disposition de tableau fixe, l'agent utilisateur peut afficher le tableau après avoir reçu la première ligne) ;

  <2>Mise en page automatique des tableaux :

automatique

  #Avantages : Plus représentatif du HTML traditionnel, (En disposition automatique du tableau, la largeur de la colonne est définie par le contenu le plus large de la cellule de la colonne sans ligne) ; en effet, cela nécessite l'accès à tout le contenu du tableau avant de déterminer la disposition finale.

(3) Valeurs possibles :

valeur

Description

值	描述
automatic	默认。列宽度由单元格内容设定。
fixed	列宽由表格宽度和列宽度设定。
inherit	规定应该从父元素继承 table-layout 属性的值。

automatique

Par défaut. La largeur des colonnes est définie par le contenu de la cellule.

fixé td>

La largeur de colonne est définie par la largeur du tableau et la largeur de la colonne.

hériter td>

Spécifie que la valeur de l'attribut table-layout doit être héritée de l'élément parent.

(Partage de vidéos d'apprentissage : 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!