Comment ajouter des bordures au formulaire de tableau en HTML

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>

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 spacing

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

3. border=" 1" cellpacing="0" cellpadding="0"> cellpadding cell margin

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

4. 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

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>

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

Comme le montre l'image ↓

 table tr th, table tr td { border-color:#b6ff00; }

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 :

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>

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!