La différence entre l'espacement des cellules et le rembourrage des cellules dans le tableau

Qu'est-ce que la table ? Il est composé de cellules. Dans le tableau, le nombre de dépend du nombre de cellules enveloppées dans De plus, le tableau par défaut n'aura pas de lignes de tableau affichées dans le navigateur avant d'ajouter le style CSS table tr td,th{border:1px solid #000;};

Méthodes courantes d'écriture de tableaux en HTML : A. … : une ligne d'un tableau, autant de paires de tableaux tr qu'il y a de plusieurs lignes ; ;/td> : Une cellule du tableau. Une ligne contient plusieurs paires de ... , indiquant le nombre de colonnes dans une ligne ; ;/th> : En-tête du tableau Dans une cellule, en-tête de tableau, le texte est en gras et affiché au centre par défaut D. /*Le contenu du résumé sera ne s'affichera pas dans le navigateur. Sa fonction est d'augmenter la lisibilité (sémantisation) du tableau, de permettre aux moteurs de recherche de mieux comprendre le contenu du tableau et également de permettre aux lecteurs d'écran de mieux aider les utilisateurs spéciaux à lire le contenu du tableau. */ Balise E.caption, ajoute un titre et un résumé au tableau. Le titre permet de décrire le contenu du tableau : La position d'affichage du titre : au dessus du tableau

Header Data Copier après la connexion 今天星期五/th> today is Friday Copier après la connexion Revenons au. point.La différence entre cellpadding et cellpacing. Examinons d'abord l'ensemble d'images de tableau suivant et la comparaison des codes d'espacement de cellules :

table中cellspacing的区别 table{ margin-bottom: 50px; } .ceshi{ border-spacing: 20px; /*Specifies the distance between the borders of adjoining cells in a table. */ } 第一个单元格 测试1 测试2 测试3 第二个单元格 测试1 测试2 测试3 第三个单元格 测试1 测试2 测试3 Copier après la connexion Comparaison des codes, les deux premiers tableaux uniquement. avoir des paramètres différents pour l'espacement des cellules, l'un est "0" et l'autre est "20", comme indiqué. Le résultat est que la distance entre chaque cellule du premier tableau est de 0 et la distance entre chaque cellule du deuxième tableau est de 20 ; extension : le deuxième tableau est cohérent avec le troisième tableau, mais les trois tableaux n'ont pas d'espacement de cellules défini. Nous avons constaté que border-spacing: 20px; a le même résultat que Cellpacing="20". utilisé pour spécifier l'écart entre les cellules du tableau. La valeur du paramètre de cette propriété est un nombre, indiquant le nombre de pixels occupés par l'espacement des cellules.

tabl表格中cellpadding的区别 table{ margin-bottom: 50px; } 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 我是快乐的cell表格 Copier après la connexion

À en juger par les résultats de l'exécution du code ci-dessus : les deux tables n'ont que des valeurs de code cellpadding différentes. Dans le premier tableau, les mots "Je suis une table de cellules heureuse". " Le mot "Je suis une table de cellules heureuse" dans le deuxième tableau est loin de la cellule où il se trouve. C'est parce que cellpadding="0" est défini. , c'est parce que cellpadding="20", c'est-à-dire , la distance entre "Je suis une table de cellules heureuse" et la bordure de la cellule où elle se trouve est de 20 pixels. En termes simples, la valeur de cellpadding est égale à la quantité d'espace vide que les cellules du tableau conservent à l'intérieur de leurs propres limites. Les éléments de la cellule n'entreront jamais dans ces espaces vides. ||Notez que l'attribut cellpadding est utilisé pour spécifier la taille de la distance vide entre le contenu de la cellule et la limite de la cellule. La valeur du paramètre de cet attribut est également un nombre, qui représente le nombre de pixels occupés par la hauteur de la distance vide entre le contenu de la cellule et les bordures supérieure et inférieure et le nombre de pixels occupés par la largeur de la distance vide entre le contenu de la cellule. contenu de la cellule et les bordures gauche et droite.

par exemple Résumé : l'espacement des cellules représente la distance entre les cellules, et le rembourrage cellulaire représente la distance entre le contenu de la cellule et la bordure ; le premier est compris comme une marge, et le second est comme un nid (cellule) ; contenu de la table ; remplissage du nid (remplissage de la table) (cellpadding) - représente une distance à l'extérieur du nid, utilisée pour séparer le nid et l'espace du nid (espacement de la table) (espacement des cellules) - représente la bordure de la table et le nid ; padding La distance est aussi la distance entre les remplisseurs de nids

Extension 1 : Comment fusionner les lignes et les colonnes du tableau ? colspan fusionne entre les colonnes, rowspan fusionne entre les lignes

Affichage du code :

colspan与rowspan的区别 table{ margin: 0 auto; margin-bottom: 50px; text-align: center; } 正常展示：一行三列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办？colspan跨列合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 正常展示：二行二列 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 现在要展示一行二列,怎么办?rowspan跨行合并 说点啥了,不知道 说点啥了,不知道 说点啥了,不知道 --> 说点啥了,不知道 Copier après la connexion Extension 2 : Comment fusionner les bordures du tableau ? border-collapse: collapsus;

table{ border-collapse: collapse; /* border-collapse: separate; */ /*Indicates whether the row and cell borders of a table are joined in a single border or detached as in standard HTML. */ } 单元格1 单元格2 单元格3 Copier après la connexion Enfin, dans le navigateur Chrome, la couleur de bordure du tableau par défaut du système est grise, l'espacement des bordures est de 2, etc.

/* user agent stylesheet */ /* table { display: table; border-collapse: separate; border-spacing: 2px; border-color: grey; } */ /* border="1"默认等于border="1px" border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; */ /* bordercolor返回或设置对象的边框颜色 bordercolor:W3C - String Specifies the color of the border of the element. Specify either a color name or RGB color code. */ Copier après la connexion Tutoriel recommandé : " Tutoriel CSS "