Bordures CSS dans un tableau ou div

Administrateur

Parfois c'est utile de faire un tableau avec une bordure. Ceci étant en XHTML c'est completement interdit de coller le style dans le tableau. Alors la mise en page de la bordure sera encore et toujours dans la feuille de style CSS

Déjà on va voir l'épaisseur de la bordure et pour une bordure de 2 pixel c'est :

Code:

.maclasse
{
border: 1px;
}

Si vous voulez que l'on voit juste la bordure du haut et du bas :

Code:

.maclasse
{
border-top: 1px;
border-bottom: 1px;
}

Si vous voulez que l'on voit juste la bordure de gauche et de droite :

Code:

.maclasse
{
border-left: 1px;
border-right: 1px;
}

Maintenant les couleurs de la bordure :

Code:

.maclasse
{
border: 1px #000000;
}

Et là les couleurs seront différentes à droite et à gauche

Code:

.maclasse
{
border-left: 1px #000000;
border-right: 1px #FF0000;
}

Voyons maintenant les styles de la bordure :

medium
thin
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid

Pour un résultat professionnel je vous conseil vivement du 1px solid :

Code:

.maclasse
{
border: 1px solid #000000;
}

Maintenant vous pouvez faire des choses un peu plus compliqué en combinant tout ça :

Code:

.maclasse
{
border-left: 1px solid #000000;
border-right: 1px solid #FF0000;
border-top: 3px dotted #006600;
border-bottom: 3px dotted #006600;
}

Guest-88

Bonjour,

Merci beaucoup, vraiment très bien décrit et très pratique!

titanesk

Bonjour, Merci fort utile pour les débutants :)

Bonne journée, et à très bientôt.

Bordures CSS dans un tableau ou div