Tutoriel graphique sur la façon de contrôler les bordures intérieures et extérieures, la couleur et la taille du tableau à l'aide de html5+CSS

Par défaut, notre CSS efface la bordure du tableau. Partageons avec vous les styles de CSS pour contrôler les bordures intérieures et extérieures, les couleurs et les tailles du tableau. Les amis qui souhaitent apprendre peuvent s'y référer

En fait, selon le bon sens, les sites Web d'aujourd'hui auraient dû abandonner les tables depuis longtemps ! Cependant, le site Web du client n'était toujours pas satisfait des effets de bordure lors de l'ajout de contenu : soit aucun, soit très épais. Il était évident que ce client était perfectionniste.

Par défaut, notre CSS efface la bordure du tableau. Il n'y a pas de bordure. L'effet que vous voyez est le suivant.

Tableau sans bordure

Afin d'ajouter une bordure au tableau, j'ai écrit cette phrase en CSS :

.table{border:solid 1px #add9c0;}

Hey , il semble que je sois trop naïf. L'effet que je vois dans le navigateur est le suivant :

Tableau avec uniquement des bordures extérieures

D'accord, je suis trop naïf. avouez que je n'ai pas touché à Table depuis quelques années, mais ce n'est pas du tout ma responsabilité, car Table a en fait été abandonnée par des designers populaires. J'ai donc supprimé la phrase de style CSS et l'ai réécrite comme ceci :

.td{border:solid 1px #add9c0;}

Mais le problème est toujours présent. Comment quelqu'un avec une demande aussi fine comme le client peut-il tolérer l'épaisse bordure intérieure du tableau ? Étoffe de laine?

Tableau avec bordure intérieure très épaisse

Il n'y a pas d'autre moyen que d'utiliser une astuce Supprimez le code CSS que vous venez d'écrire et écrivez. directement :

.td{border:solid #add9c0; border-width:0px 1px 1px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

D'accord, maintenant tu oses être arrogant ? Cela ne signifie-t-il pas que vous cédez ?

Tableau avec des bordures très fines

Il n'y a pas de péché à être intime, mais si le contenu du texte et la bordure du tableau sont si proches qu'il n'y a pas d'espace , cela affectera l'apparence, alors Modifiez légèrement les deux lignes de code tout à l'heure :

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding-left:10px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

Si vous avez besoin que les deux parties soient si intimes, écrivez simplement comme ceci :

.td{border:solid #add9c0; border-width:0px 1px 1px 0px; padding:10px 0px;}
.table{border:solid #add9c0; border-width:1px 0px 0px 1px;}

D'accord, jetons un oeil maintenant Quant à l'effet final, le client est déjà très content à ce moment-là, et c'est l'effet qu'il souhaite !

Tableau à effet idéal

Si vous utilisez cette méthode à d'autres endroits, vous devez faire attention à l'écriture standardisée du code CSS :

Méthode d'écriture recommandée : border-width:0px 1px 1px 0px;

Déconseillée : border-width:0 1 1 0;

Enfin, je voudrais rappeler à tous que si vous Je ne peux pas utiliser Table, essayez de ne pas l'utiliser. Après tout, ce n'est pas une technologie si avancée. Vous devriez essayer de travailler sur p+CSS !

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!