Ce chapitre vous présentera comment ajouter des bordures aux formulaires de tableau en HTML. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
De manière générale, l'ajout de bordures aux tableaux entraînera différents problèmes. Ce qui suit est une meilleure façon d'afficher le tableau après l'ajout de bordures
Mais selon différents besoins, nous avons parfois besoin de différents. styles, je vais faire ici un résumé et une analyse des facteurs qui affectent la bordure du tableau
1
Comme le montre l'image ↑, c'est-à-dire border=1, ce qui signifie ajouter une bordure de 1 pixel à chaque cellule et bordure du tableau
2
cellpacing cell spacingComme le montre l'image ↑, la taille du tableau est : 200*118px
Comme le montre l'image ↑, la taille du tableau est : 200*110px
4. Supprimez toutes les valeurs d'attributdu tableau dans le tableau. Lors de la définition de {border: 1px solid #151515} pour le tableau en CSS,
comme le montre l'image ci-dessous. Nous avons constaté que la bordure en CSS ajoute simplement une bordure extérieure au tableau
5. border-collapse : effondrement Border merge Cet attribut définit si la bordure. du tableau est fusionné en une seule bordure ou comme une seule bordure Afficher
séparément en HTML standard Pour le moment, si nous voulons simplement ajouter une bordure au tableau dans son ensemble, et n'en avons pas besoin. marges et espacements, en fait, il suffit d'écrire comme ceci :
6. On peut clairement voyez dans l'image ci-dessus que les bordures analysées par les deux navigateurs sont différentes. Mais en réalité, ce sont les mêmes. Ils ont tous deux ajouté des couleurs aux bordures en même temps, mais comme nos td et th ont une couleur par défaut et que nous ne leur avons pas ajouté de styles ici pour couvrir les lignes noires par défaut, cela a conduit à la situation dans Firefox In. En fait, cette situation est également disponible dans Google, mais ce n'est pas évident. Les lignes noires par défaut qu'il analyse sont couvertes par notre couleur. Si vous regardez attentivement, vous trouverez toujours des bords noirs. ajoutez des styles de couleurs à th et td. Mais
7. D'en haut, si vous regardez attentivement, vous trouvera toujours quelque chose qui ne va pas. Google semble avoir une bordure extérieure plus profonde. En fait, c'est parce que nous avons ajouté border=1 au tableau au début, car nous avons ajouté un style de ligne noire par défaut au tableau. , th, td et table ont tous des bords noirs par défaut. Par conséquent, si vous devez résoudre complètement ce problème pour que la bordure puisse être affichée normalement, vous devez l'écrire comme ceci :
: Ajouter une bordure noire de 1 pixel à l'ensemble du tableau (y compris le tableau et chaque cellule), ce qui équivaut à ce qui suit en CSS : table, table tr th, table tr td { border:1px solid #0094ff }
cellpadding="0" : La marge de la cellule est égale à 0, et sa valeur par défaut est 1px, ce qui équivaut à : {padding: 0 in css ;}
cellspacing="0" : L'espacement des cellules est est égal à 0, et sa valeur par défaut est 2px, ce qui équivaut à : border-collapse : effondrement en CSS, mais ils ne sont pas exactement les mêmes. L'espacement des cellules concerne uniquement l'espacement, tandis que border-collapse fusionne les bords adjacents en un seul bord, donc. évitant le problème des bords épaissis causés par les bords qui se chevauchent dans l'espacement des cellules. Par conséquent, il n'est pas recommandé ici de définir l'espacement des cellules sur 0 lors de la définition de la bordure du tableau à l'aide des attributs HTML. Si vous souhaitez qu'il soit égal à 0, il est plus recommandé d'utiliser les attributs de style CSS pour définir la bordure du tableau et d'utiliser border-. effondrement : effondrement pour fusionner les bordures, au lieu de définir l'espacement des cellules sur 0, ce qui entraîne le problème d'épaississement des bords qui se chevauchent.
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!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
2 
3. border=" 1" cellpacing="0" cellpadding="0"> cellpadding cell margin
5. border-collapse : effondrement Border merge Cet attribut définit si la bordure. du tableau est fusionné en une seule bordure ou comme une seule bordure Afficher 
