Comment définir le style de bordure pour un tableau HTML-tutoriel HTML-php.cn

Les méthodes de définition du style de bordure des tableaux HTML incluent : vous pouvez définir l'épaisseur et le style de couleur de la bordure via l'attribut border. Vous pouvez également définir l'espacement et les marges des cellules du tableau et fusionner les bordures pour embellir le tableau <.>

En HTML Nous pouvons ajouter un style de bordure au tableau. Ensuite, dans l'article, nous présenterons en détail comment définir le style de bordure du tableau. Il a un certain effet de référence et j'espère que ce sera le cas. utile à tout le monde.

Comment définir le style de bordure pour un tableau HTML

[Cours recommandés : Tutoriel HTML]

Pour ceux qui viennent d'apprendre le HTML, nous La balise est souvent utilisée, mais il y a encore de nombreuses questions sur le réglage de la bordure du tableau, je vais la présenter en détail ci-dessous

Nous pouvons définir la bordure via l'attribut border, comme Pour donner. le tableau une bordure de 1px nous pouvons le définir comme ceci :

<table border="1px solid #ccc">

Copier après la connexion

Rendu :

Comment définir le style de bordure pour un tableau HTML

À partir de l'image ci-dessus nous pouvons trouvez ceci Les paramètres s'appliquent uniquement aux bordures extérieures du tableau, et les cellules à l'intérieur n'ont pas de bordures, nous devons donc également définir des bordures pour les cellules internes

 table,table tr th, table tr td { 
       	border:1px solid #ccc;
       	 }

Copier après la connexion

Rendu :

Comment définir le style de bordure pour un tableau HTML

Nous pouvons fusionner les bordures du tableau en une seule bordure en définissant le cellpacing (espacement des cellules), le cellpadding (marges des cellules) et

(fusion des bordures), ce qui rend le tableau plus beau. Cette propriété définit si les bordures du tableau sont fusionnées en une seule bordure, ou si elles sont affichées séparément comme en HTML standard pour rendre le tableau plus beau border-collapse: collapse

<style>
       table,table tr th, table tr td { 
       	border:1px solid #ccc;
       	 }
       table{ 
       	width: 400px;
       	border-collapse: collapse;
    }   
    </style>
    <table  cellpadding="0";cellspacing="0">
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
        <tr>
        	<td>内容</td>
        	<td>内容</td>
        	<td>内容</td>
        </tr>
    </table>

Copier après la connexion

Rendu :

Image 047.png Vous pouvez également modifier la couleur de la bordure du tableau en définissant l'attribut border

Référence pour cet article : https://www.html.cn/doc/html/table/

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde

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：Comment centrer un div en HTML Article suivant：Introduction à la méthode d'intégration des cases à cocher et des boutons radio dans les tables d'éléments (exemple de code)

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