Qu'est-ce qu'une table? Il est composé de cellules cellulaires. Dans le tableau, le nombre de <td> dépend du nombre de cellules cellulaires enveloppées dans chaque ligne <tr>! De plus, la table de table par défaut n'a pas de ligne de table affichée dans le navigateur avant l'ajout du style CSS;
Méthodes d'écriture de table communes dans HTML: A. <TR>… </TR>: Une rangée d'une table, il y a plusieurs paires de tr et il y a plusieurs lignes; B. <Td>… </td>: une cellule d'une table, qui contient plusieurs paires de <td>… </td>, ce qui signifie qu'il existe plusieurs colonnes dans une ligne; C. <h>… </th>: Une cellule à la tête de la table, l'en-tête de la table, et le texte est audacieux et affiché au centre; D. <Table Summary = Table Introduction Text> / * Le contenu du résumé ne sera pas affiché dans le navigateur. Sa fonction est d'augmenter la lisibilité (sémanisation) de la table, permettre aux moteurs de recherche de mieux comprendre le contenu du tableau et permettre aux lecteurs d'écran de mieux aider les utilisateurs spéciaux à lire le contenu du tableau. * / E.Caption Tag, ajoutez un titre et un résumé au tableau, le titre est utilisé pour décrire le contenu de la table, l'emplacement d'affichage du titre: au-dessus du tableau
<Table Border = CellPacing = CellPadding => <Tr> <Th> En-tête </th> </tr> <tr> <td> Data </td> </tr> </s table>
<Table Border = CellPacing = CellPadding = Rummary => <Wegenbity> </ Légende> <Tr> <Th> Aujourd'hui est vendredi </td> </tr> </ Table>
Retour au sujet, revenons au point où la différence entre Cellpadding et lepisation de cellule est la comparaison entre l'ensemble suivant d'images de table et le code de l'espacement des cellules:
<! Doctype html> <html> <éadf> <meta charset = utf-8> <tight> Différences dans lepaçage de cellules dans la table </title> <style type = text / css> table {margin-bottom: 50px; } .Ceshi {Border-Opage: 20px; / * Spécifie la distance entre les bordures des cellules adjacentes dans un tableau. */ } </style> </head> <table width=600 cellpacing=0 bordercolor=#333 border=1> <caption>First cell</caption> <tr> <td>Test 1</td> <td>Test 2</td> <td>Test 3</td> </tr> </table> <table width=600 cellpacing=20 bordercolor=#333 border=1> <Pection> Second Cell </Pection> <Tr> <Td> Test 1 </td> <Td> Test 2 </td> <Td> Test 3 </td> </tr> </ Table> <Table Width = 600 BorderColor = # 333 Border = 1 Class = Ceshi> <pection> Troisième cellule </ TDD> Test 2 <TD> Test 2 <td> Tester 3 </td> </tr> </ table> </html>En comparant le code, les deux tables supérieures ont des paramètres différents, l'un est 0 et l'autre est 20. Le résultat affiché est que la distance entre chaque cellule dans le premier tableau est 0, et la distance entre chaque cellule dans le deuxième tableau est 20. Extension: le deuxième tableau est cohérent avec le troisième tableau, mais le troisième tableau n'a pas d'espacement de cellule. Nous avons constaté que cet espacement des bordures: 20px; est le même que le résultat de l'espacement cellulaire = 20. EG Résumé: L'attribut d'espacement cellulaire est 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 points de pixel occupé par l'espace cellulaire.
<! Doctype html> <html> <éadf> <meta charset = utf-8> <tight> Différences dans cellpadding in tables </tapie> <style type = text / css> table {margin-bottom: 50px; } </style> </head> <body> <table width=600px border=1 bordercolor=#ccc cellpadding=0> <tr> <th>I am a happy cell table</th> <th>I am a happy cell table</th> <th>I am a happy cell table</th> </tr> </table> <table width=600px border=1 bordercolor=#cc cellpadding=20> <Tr> <th> Je suis une forme de cellule heureuse </th> <th> Je suis une forme de cellule heureuse </th> <th> Je suis une forme de cellule heureuse </th> <th> Je suis une forme de cellule heureuse </th> </tr> </ Table> </ Body> </html>À en juger par les résultats en cours d'exécution du code ci-dessus: les deux tableaux ont des valeurs différentes de codes CellPadding. Dans le premier tableau, les mots "Je suis une cellule heureuse" sont 0 de la cellule où il est situé, c'est-à-dire parce que CellPadding = 0 est défini; Dans le deuxième tableau, les mots "Je suis une cellule heureuse" sont loin de la cellule où il se trouve, c'est-à-dire que la distance entre la cellule où je suis une cellule heureuse est de 20 pixels. En termes simples, combien la valeur du pavage de cellule est égale à, combien de blancs sont laissés vers l'intérieur à partir de la limite des cellules dans le tableau, et les éléments de la cellule n'entreront jamais ces blancs. || Remarque que la propriété CellPadding est utilisée pour spécifier la taille de la distance vide entre la teneur en cellule et la limite cellulaire. La valeur du paramètre de cette propriété est également un nombre, indiquant le nombre de pixels occupés par la hauteur de la distance vide entre la teneur en cellule et les limites supérieures et inférieures et le nombre de pixels occupés par la largeur de la distance vide entre la teneur en cellule et les limites gauche et droite.
EG Résumé: Le transparence de cellule représente la distance entre les cellules, la palette de cellules représente la distance entre la teneur en cellule et la bordure; Le premier est comme une marge, le second est comme un rembourrage; Nest (cellule) - le contenu de la table; Le remplissage du nid (remplissage de table) (CELLPADDING) - représente une distance à l'extérieur du nid, utilisé pour séparer le nid et l'espace de nid; Espace de nidification (espacement de la table) - représente la distance entre la bordure de la table et le remplissage du nid, et est également la distance entre le remplissage du nid
Extension 1: Comment fusionner les lignes et les colonnes d'une table? Colspan Cross-Colonne Muge, Rowspan Cross Row Merge
Affichage du code:
<! Doctype html> <html> <éadf> <meta charset = utf-8> <tight> La différence entre ColSpan et Rowspan </Title> <style type = text / css> table {margin: 0 auto; marge-fond: 50px; Texte-aligne: Centre; } </ style> </ head> <body> <table width = 600 CellPadding = 10 Cellpacing = 2 border = 1 borderColor = # ccc> <egenction> Affichage normal: une ligne et trois colonnes </pition> <tr> <td> Dites quelque chose, ne savez pas quelque chose, je ne sais pas </ TD> width = 600 CellPadding = 10 Cellpaçage = 2 border = 1 borderColor = # cc> <ménage> Que dois-je faire maintenant pour afficher une ligne et deux colonnes? COLSPAN CROSS-COLNM MERGE </PENSION> <TR> <TD> Dis quelque chose, je ne sais pas </td> <td Colspan = 2> Dites quelque chose, je ne sais pas </td> <! - <Td> Dites quelque chose, je ne sais pas </td> -> </tr> </ball> <! -! ==========================================================================================================. ==========================================================================================================. ==========================================================================================================. ===========================================================================================================. <Td> Dites quelque chose, je ne sais pas </td> </tr> <tr> <td> dire quelque chose, je ne sais pas </td> <td> dire quelque chose, je ne sais pas </td> <td> dire quelque chose, je ne sais pas </td> </tr> </sable> <table width = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor = # ccc> <sgetrans> colonnes? Rowspan Cross-Row Merge </Pection> <Tr> <td Rowspan = 2> Dites quelque chose, je ne sais pas </td> <td> Dites quelque chose, je ne sais pas </td> -> <td> Dites quelque chose, ne savez pas </td> </tr> </ / table>Expansion 2: Comment fusionner les bordures de la table? Border-Collapse: s'effondrer;
<! - Merger les cellules de la table -> <style type = text / css> Tableau {border-collapse: effondrement; / * Border-Collapse: séparé; * / / * Indique si les bordures de ligne et de cellules d'une table sont jointes en une seule bordure ou détachées comme dans le HTML standard. * /} </ style> <Table Width = 600 CellPadding = 10 CellPacing = 2 Border = 1 BorderColor = # CCC> <TBODY> <TR> <TD> Cell 1 </td> <td> Cell 2 </td> <Td> Cell 3 </td> </body> </plow>Enfin, dans le navigateur Chrome, le gris de la bordure du tableau par défaut du système, l'espacement des bordures est de 2, etc.
/ * Agent utilisateur Stylesheet * / / * table {affichage: table; Border-Collapse: séparé; Espacement des bordures: 2px; Color à la frontière: gris; } * / / * Border = 1 Default est égal à la bordure = 1px Border-top-width: 1px; largeur de droite: 1px; largeur de la frontière: 1px; bordure-gauche: 1px; * / / * BorderColor retourne ou définit la couleur de la bordure de l'objet BorderColor: W3C - String Spécifie la couleur de la bordure de l'élément. Spécifiez soit un nom de couleur ou un code couleur RVB. * /Ceci est l'article sur les détails de la différence entre le cesllpacing et le pavage de cellule dans le tableau. Pour plus de contenu lié à Cesllpacing et à CellPadding dans les tableaux, veuillez rechercher des articles précédents sur Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!