Etape n°4
On peut aussi utiliser <dl>, <dt> et <dd> si besoin au lieu de <ul> et <li>.
#menugauche{
background-color:transparent;
font-family:"times new roman",Arial,Tahoma,Helvetica,sans-serif;
height:35em;
left:0;
overflow:hidden;
padding:0;
position:absolute;
top:90px;
width:155px;
z-index:10;
}
#menugauche dl{
margin:0;
padding:0;
}
#menugauche dt{
margin-top:0;
border-bottom:1px solid #90BADE;
border-top:1px solid #90BADE;
margin-bottom:-1px;
}
#menugauche dt.none{
border:0;
line-height:1em;
}
#menugauche dt a{
background-color:#D2E1FB;
border-left:6px solid #E9F5FE;
border-right:6px solid #E9F5FE;
color:#0A00B0;
display:block;
padding-bottom:5px;
padding-top:4px;
padding-right:3px;
padding-left:5px;
text-decoration:none;
font-weight:800;
width:135px;
}
#menugauche dt a:hover{
background-color:#A9CFFE;
color:#FFF;
border-left:8px solid #6600CC;
border-right:8px solid #5200A4;
border-bottom:3px solid #E9F5FE;
border-top:4px solid #E9F5FE;
padding-bottom:1px;
padding-top:1px;
padding-right:0;
width:135px;
}
Un titre pour un tableau avec trois colonnes
Gauche
Centre
Droite
Le texte disparaît
s'il dépasse
les possibilités de l'écran
afin de conserver
l'alignement.
Un titre pour un tableau avec deux colonnes
Colonne de gauche large
colonne étroite
texte centré
caractères gras
Une colonne à gauche occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Une colonne à droite occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Passons à la dernière étape.