Comment faire la bordure d'un tableau HTML ? Création de tableaux HTML et exemples-tutoriel HTML-php.cn

Cet article vous parle principalement de l'utilisation des bordures des balises de table html. Généralement, nous définissons la ligne de bordure sur 1 pour démontrer la méthode de bordure. Jetons ensuite un coup d'œil à cet article sur l'utilisation des bordures dans les balises de table de tableau html

Tout d'abord, regardons comment le tableau est défini :

Le tableau est défini par le Balise

Chaque tableau comporte plusieurs lignes (définies par la balise ), et chaque ligne est divisée en plusieurs cellules (définies par la balise

). Les lettres td font référence aux données du tableau, au contenu des cellules de données. Les cellules de données peuvent contenir du texte, des images, des listes, des paragraphes, des formulaires, des lignes horizontales, des tableaux, etc.

D'accord, commençons par créer un tableau simple :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<table border="1" width="300px" height="100">
<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>
</body>
</html>

Copier après la connexion

Il s'agit d'un tableau simple avec trois lignes et trois colonnes, comme indiqué dans l'image :

Comment faire la bordure dun tableau HTML ? Création de tableaux HTML et exemples

Pour de nombreuses personnes qui débutent en HTML, table

est la balise la plus couramment utilisée, mais de nombreux débutants ne comprennent pas le contrôle des bordures de tableau.

Généralement lorsque nous utilisons un tableau, nous lui donnons toujours un attribut de bordure, tel que :

, l'effet est comme indiqué ci-dessus :

Vous pouvez constatez que la bordure du tableau ressemble à Très large. Bien sûr, le "très large" ici n'est certainement pas la largeur de la bordure du tableau. La largeur que vous voyez devrait être causée par l'écart entre

. Il vous suffit donc de modifier l'attribut cellpacing du tableau, soit :

<table border="1px" cellspacing="0px" width="300px"    style="max-width:90%">
<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

L'effet est le suivant :

Comment faire la bordure dun tableau HTML ? Création de tableaux HTML et exemples

Nous avons initialement ajouté border= sur le tableau La raison 1 est qu'un style de ligne noire par défaut est ajouté au tableau, ce que nous avons dit ci-dessus. Par conséquent, si vous devez résoudre complètement ce problème et autoriser les bordures. pour afficher normalement, puis donnez Ajouter une couleur au tableau,

<table border="1px" bordercolor="#FF0000" cellspacing="0px" width="300px"    style="max-width:90%">
<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

Ce n'est pas évident si c'est du noir, on le change en rouge

Comment faire la bordure dun tableau HTML ? Création de tableaux HTML et exemples

Résumé : Comme le montre l'image, la bordure noire est devenue rouge. Nous pouvons y ajouter du contenu et en ajuster la taille, et nous pouvons également y ajuster le texte. Bref, le tableau est très utile. Dans cet article, nous avons présenté les bordures des tableaux. Bien entendu, nous utilisons rarement les bordures dans les applications réelles, sauf circonstances particulières. Généralement, nous modifions le paramètre de bordure à 0, de sorte qu'il n'y ait pas de bordure. Cependant, dans notre enseignement, la bordure doit fondamentalement être égale à un, ce qui est pratique pour la visualisation et l'ajustement.

[Recommandation de l'éditeur]

La balise html p peut-elle contenir la balise a ? Description du rôle de la balise html p

Comment utiliser une balise html ? Résumé de l'utilisation de la balise html a

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 table

source：php.cn

Article précédent：Comment utiliser la balise ins pour insérer du texte et la balise del pour supprimer du texte ensemble en HTML ? (avec des exemples) Article suivant：Comment implémenter l'iframe de navigation en arrière-plan HTML, cliquez pour changer l'URL (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