Les normes d'accessibilité désapprouvent l'usage des tableaux à des fins de mise en page. Cette technique qui a connu ces grands jours dans les années 90 est à considérer comme inadéquate. Il est préférable de lui substituer une mise en page à l'aide de DIV.
Le rôle d'un tableau est avant tout de présenter des informations d'une manière claire et concise, ligne par ligne, cellule par cellule.
| alphabet | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| A | B | C | D | E | F | G | H | I | J | K | L | M |
| N | O | P | Q | R | S | T | U | V | W | X | Y | Z |
Code HTML :
<table summary="Ce tableau est un alphabet">
<tbody>
<tr>
<th colspan="13">alphabet</th>
</tr>
<tr>
<td abbr="La lettre A">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
<td>J</td>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
<tr>
<td>N</td>
<td>O</td>
<td>P</td>
<td>Q</td>
<td>R</td>
<td>S</td>
<td>T</td>
<td>U</td>
<td>V</td>
<td>W</td>
<td>X</td>
<td>Y</td>
<td>Z</td>
</tr>
</tbody>
</table>
code CSS :
table {
width: 90%;
font-style: normal;
border: 2px ridge;
margin-left: auto;
margin-right: auto;
margin-top: 36px;
margin-bottom: 20px;
background-color: #fdf3eb;
color:#660000;
border-color: #e2d1cb;
}
th {
text-align: left;
font-weight: bold;
text-transform: uppercase;
border-style: solid;
border-width: 1px;
text-align: center;
padding: 10px;
color:#660000;
border-color: #e2d1cb;
background-color: #e2d1cb;
}
td {
text-align: left;
border-style: solid;
border-width: 1px;
padding: 10px;
color:#660000;
border-color: #e2d1cb;
}
Lié à la balise <table>, l'attribut "summary" bien que destiné à en décrire vocalement le contenu est "détourné de son usage technique à des fins de référencement:
summary="Ce tableau est un l'alphabet"
Il en est de même pour l'attribut "abbr" lié à la balise <td>
abbr="La lettre A"
il faudrait faire de même pour toutes les cellules d'un tableau contenant, par exemple, des acronymes, la valeur de l'attribut "abbr" correspondant au libellé complet de la signification de chacune des lettres qui constituent un acronyme..., par exemple :
pour W3C, la valeur de "abbr" serait : "World Wide Web Consortium" qui explique, par ailleurs, aux locuteurs francophones, la signification énigmatique du chiffre 3.
Le titre du tableau est une cellule particulière obtenue par l'usage de la balise th au lieu de la balise td; ces cellules sont fusionnées par l'usage de l'attribut <th colspan="13"> (col pour "colonne") qui, dans ce cas, permet donc la fusion horizontale de 13 cellules.
Pour fusionner des cellules verticales, il faut utiliser l'attribut "rowspan" (row pour "ligne")
La balise tfoot peut être utilisée pour indiquer le pied du tableau ; toutefois,elle n'est pas valide en XHTML strict.
Les tableaux peuvent assez souvent être remplacés par des listes à puces contraintes de se placer à l'horizontale en utilisant la propriété "float", où "float" associé à la direction "left" contraint donc les puces à s'aligner horizontalement à la droite les unes des autres, sur toute la largeur spécifiée. Au delà des possibilités de cette largeur, les puces passent à la ligne horizontale suivante :
Code HTML :
<div class="alpha">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</div>
code CSS :
.alpha
{
width: 300px;
height: 64px;
}
.alpha li
{
float:left;
list-style-type: none;
margin-left: 5%;
}
.alpha ul
{
width: 100%;
margin-left: 50%;
}
Commentaires :
Cette façon de faire peut être très intéressante pour présenter une série de miniatures cliquables conduisant, chacune, à une image en grandeur réelle.
Dans le cadre d'une utilisation de navigateurs en mode texte, les listes à puces sont la base d'une ergonomie optimale qui respecte les normes d'accessibilité.
ul = unordered lists
ol = ordered lists (listes numérotées, par exemple)
li= list items
Les listes de définitions (dl pour "definition list") sont assez proches des listes à puces ; elles sont composées d'une ligne de titre (dt pour "definition term") suivie d'une ligne de définition (dd pour "definition description"), histoire de préciser la signification de ces abréviations de code si limpides aux anglophones ; reste à savoir si "ld" pour "liste de définition" serait plus parlant à des francophones !
Code HTML:
<dl>
<dt>ABATTRE DU BOIS</dt>
<dd>Jouer son coup avec des dames prises du talon.</dd>
<dt>ACCOUPLER SES DAMES</dt>
<dd>C'est placer deux dames sur une même flèche pour réaliser une case entière.s</dd>
<dt>ACTE DE JEU</dt>
<dd>Au trictrac, certaines actions sont irréversibles. Ce sont ces actes qui déterminent le début et la fin d'un coup ainsi que le moment où une faute est consommée. Ils se produisent par l'utilisation des dés, des jetons ou des dames et parfois du fichet : lancer ou rompre les dés ; lâcher ses jetons ; ôter ou ne pas ôter ses jetons ; toucher ou lâcher ses dames.s</dd>
</dl>
Définitions extraites de : Michel Malfilâtre, Dictionnaire raisonné du trictrac
code CSS :
dt
{
text-transform: uppercase;
color : #fff7ee
}
dl
{
margin-left: 40px;
margin-right: 40px;
color: #000000;
background-color: #d69b3b;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 16px;
padding-right:16px;
margin-bottom: 16px;
}
<a href="howto1.php"> lien vers une page HTML nommée howto1.php</a>
<a name="nom de l'ancre"></a>une ancre dans une page HTML</a>
<a href="#nom de l'ancre">lien vers une ancre située dans la même page HTML</a>
<a href="howto2.php#nom de l'ancre"> lien vers une ancre située dans une autre page HTML nommée howto2.php</a>
Vous pouvez aussi appeller directement un DIV par son ID.
Au lieu d'utiliser cette syntaxe maintenant non validable W3C
<a name="signet1"></a>
vous pouvez utiliser l'ID de votre DIV comme ancre :
<div id="signet1"></a>
Ceci donc pour rappel de la construction générale et basique des liens en HTML.
Vous pouvez cependant insérer ces liens dans une liste à puces qui les disposera donc soit horizontalement, soit verticalement.
Il existe une autre technique (mise en pratique sur les bandes latérales de ce site) qui permet de construire des menus verticaux agrémentés d'effets de boutons modifiables au passage de la souris (hover)
Code HTML
<div class="menug">
<a href="../index.php">accueil</a>
<a href="mailto:postmaster@zecyb.org">contact</a>
<a href="sites.php">créations</a>
<a href="stages.php">stages</a>
<a href="plan.php">abc...</a>
</div>
code CSS :
.menug a
{
display: block;
text-align: left;
padding: 0px 0px 4px 10px;
text-decoration: none;
font-size: 0.8em;
width: 110px;
color: #003a6a;
background: transparent url(../img/menug.png) no-repeat;
}
.menug a:hover
{
color: #ffffff;
background: #fdf3eb url(../img/menugh.png) no-repeat;
}
<a> est une balise Inline ; "display: block;" permet de lui donner des dimensions (width: 110px;) et de lui adjoindre une image de background (background: transparent url(../img/menug.png) no-repeat;) qui peut donc être un de ces fameux boutons cliquables qui plus est, transformables au passage de la souris par l'appel d'une seconde image de background (background: #fdf3eb url(../img/menugh.png) no-repeat;)... la porte est ainsi ouverte à des milliers de variations sur ce thème.
voir également : dégradé, arrière-plan, titre
Formation Ubuntu/Windows, développement et administration de sites
déclaration à la CNIL : n° 1397076
Photographies, logo, illustrations : Pierre BELLENEY
