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 dedépend du nombre de cellules enveloppées dansDe plus, le tableau par défaut n'aura pas de lignes de tableau affichées dans le navigateur avant d'ajouter le style CSS

第一个单元格

测试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.

    
        
        
        
    

    
        

            

                
我是快乐的cell表格
                
我是快乐的cell表格
                
我是快乐的cell表格
            
        
        

            

                
我是快乐的cell表格
                
我是快乐的cell表格
                
我是快乐的cell表格
            
        
    

À 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跨行合并
        

            
说点啥了,不知道
            
说点啥了,不知道
        
        

            
            
说点啥了,不知道
        
    
    

Extension 2 : Comment fusionner les bordures du tableau ? border-collapse: collapsus;

    
    

        

            

                
单元格1
                
单元格2
                
单元格3
            
        
    

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. 
*/

Tutoriel recommandé : "Tutoriel 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!