Les tableaux (x)html

Mise en page

Comme nous l'avons vu dans l'introduction, de nombreuses mises en pages reposent sur l'utilisation de tableaux. Nous savons aussi que l'affichage d'un tableau nécessite des calculs, et donc prend du temps. Il est dès lors possible de séparer les éléments du tableau principal en éléments plus petits et donc plus rapides à afficher.

Prenons par exemple le cas d'une page composée d'un tableau principal en trois parties : une barre de navigation supérieure, une barre de navigation latérale, et le contenu réel de la page.
Voici le code qui serait généré par un éditeur WYSIWYG :

<table>
	<tr>
		<td colspan="2">
			<!-- Barre de navigation supérieure//-->
		</td>
	</tr>
	<tr>
		<td>
			<!-- Barre de navigation latérale //-->
		</td>
		<td>
			<!-- Contenu de la page //-->
		</td>
	</tr>
</table>

Nous devrions opter pour une mise en page en deux tableaux. Ces derniers seraient donc chargés individuellement, ce qui nous permet d'accélérer l'affichage du premier, au lieu d'attendre que toute la page soit chargée.

<table>
	<tr>
		<td>
			<!-- Barre de navigation supérieure//-->
		</td>
	</tr>
</table>
<table>
	<tr>
		<td>
			<!-- Barre de navigation latérale //-->
		</td>
		<td>
			<!-- Contenu de la page //-->
		</td>
	</tr>
</table>

Cette technique nous permet d'accélérer l'affichage du bandeau supérieur, mais peut générer certains espaces vides, ou des incohérences d'affichages sous Internet Explorer pour Mac par exemple. Il est donc préférable de tester la mise en page sous différents navigateurs.

Table des matières Haut

Chacun son style...

L'exemple précédent montre qu'il est possible de réaliser une mise en page qui s'affichera plus rapidement, mais qui reste soumise aux comportements capricieux des navigateurs face aux tableaux.
Nous allons donc réaliser le même type de mise en page à l'aide des balises div, qui puisent leurs informations dans notre feuille de style (CSS).

Par l'utilisation des feuilles de style CSS2, nous gagnons en souplesse dans la mise en page. En effet, il suffit de modifier la feuille de style pour modifier la mise en page du document.
Nous devrons donc veiller à ne plus utiliser de référence à des positions, en nommant de préférence les attributs en fonction du contenu.

<div id="b_s">
	<!-- Barre de navigation supérieure//-->
</div>
<div id="c">
	<!-- Contenu de la page //-->
</div>
<div id="b_l">
	<!-- Barre de navigation latérale //-->
</div>

Les informations de styles seront donc les suivantes :

<style type="text/css">
	<!--
	div#b_s
	{
		background:#ffff00;
		width:auto;
		margin:0;
		padding:0.5em;
	}
	div#c
	{
		float:right;
		width:75%;
		background:#0000ff;
		margin-left:25%;
		padding:0.5em;
	}
	div#b_l
	{
		background:#ff0000;
		margin-right:75%;
		padding:0.5em;
	}
	//-->
</style>

You are on the French version of the site, but your system indicates that you prefer to use the English language.
The entire site is not translated yet, but the menus and buttons on the interface are largely translated.

Would you like to reach the page in English?
Click here to continue in English: Consult the English version of this page

U bevindt zich op de Franse versie van de site, maar uw systeem geeft aan dat u liever de Nederlandse taal gebruikt.
De hele site is nog niet vertaald, maar de menu's en knoppen op de interface zijn grotendeels vertaald.

Wilt u de pagina in het Nederlands bereiken?
Klik hier om door te gaan in het Nederlands: Raadpleeg de Nederlandse versie van deze pagina

Sie befinden sich in der französischen Version der Website, Ihr System gibt jedoch an, dass Sie die deutsche Sprache bevorzugen.
Die gesamte Site ist noch nicht übersetzt, aber die Menüs und Schaltflächen auf der Benutzeroberfläche sind weitgehend übersetzt.

Möchten Sie die Seite auf Deutsch erreichen?
Klicken Sie hier, um fortzufahren: Konsultieren Sie die deutsche Version dieser Seite