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:#FFFFFF;
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.