Comment ajouter des bordures au formulaire de tableau en HTML-tutoriel HTML-php.cn

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

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

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 HTML 2

cellpacing cell spacing

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

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

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

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