简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Comment ajouter des bordures au formulaire de tableau en HTML

青灯夜游
Libérer： 2018-09-25 13:43:52
original
7448 Les gens l'ont consulté

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 

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>
Copier après la connexion
Copier après la connexion

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

Comment ajouter des bordures au formulaire de tableau en HTML2

cellpacing cell spacing

Comme le montre l'image ↑, la taille du tableau est : 200*118px

Comment ajouter des bordures au formulaire de tableau en HTML3. border=" 1" cellpacing="0" cellpadding="0"> cellpadding cell margin

Comme le montre l'image ↑, la taille du tableau est : 200*110px

Comment ajouter des bordures au formulaire de tableau en HTML4. Supprimez toutes les valeurs d'attribut​​du 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

Comment ajouter des bordures au formulaire de tableau en HTML 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 :

Comme le montre l'image ↓

<style>
    table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-color:#b6ff00; border-collapse: collapse;}   
</style>

<table border="1">
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</table>
Copier après la connexion

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

Comment ajouter des bordures au formulaire de tableau en HTML

Comme le montre l'image ↓

 table tr th, table tr td { border-color:#b6ff00; }
Copier après la connexion

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 :

Comment ajouter des bordures au formulaire de tableau en HTML

<🎜. >Pour résumer :


Les attributs du tableau en Html : 

<style>
        table,table tr th, table tr td { border:1px solid #0094ff; }
        table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
    </style>

    <table>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
        <tr><td>内容</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </table>
Copier après la connexion
Copier après la connexion

border="1"

: 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!

Étiquettes associées：
html
source：php.cn
Article précédent：Comparaison de la convivialité de div et de table dans les sites Web Article suivant：Comment introduire des pages externes en HTML (méthode des balises iframe)
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
Derniers articles par auteur
Derniers numéros
Le rayon de la bordure ne fonctionne pas pour l'image à l'intérieur du point d'ancrage J'utilise le code HTML suivant : <aclass="-video-detail-qualifiers-branding"&...
Depuis 2024-04-06 17:20:25
0
1
347
Pourquoi ma balise hr est-elle translucide lorsqu'elle est définie sur une couleur blanche unie ? J'ai un HTML (avec bootstrap) et un CSS, dans mon HTML j'ai une balise <hr> qui a un...
Depuis 2024-04-06 16:13:26
0
1
500
Bordure inférieure CSS sur la barre de navigation J'ai une barre de navigation et j'ai ajouté une ligne rouge en bas lorsqu'un élément de la...
Depuis 2024-04-06 15:04:41
0
2
347
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Les styles SASS ont priorité sur les requêtes multimédias J'essaie d'utiliser des requêtes multimédias pour remplacer les styles des appareils de bu...
Depuis 2024-04-05 15:03:00
0
1
3396
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！