Keine Cache-Version

Caching deaktiviert Standardeinstellung für diese Seite:aktiviert (code LNG204)
Wenn die Anzeige zu langsam ist, können Sie den Benutzermodus deaktivieren, um die zwischengespeicherte Version anzuzeigen.

Les tableaux (x)html

Inhaltsverzeichnis

Mise en page

Ancienne méthode de layout

Ce code est toujours valide et s'affichera correctement dans la plupart des navigateurs.
Cependant, depuis le 31/07/2003 l'infobrol n'est plus affiché en utilisant des tableaux pour contrôler sa mise-en-page, mais une combinaison de css et de classe.
Cette page montre donc comment se libérer des tableaux pour la mise en forme.

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 :

  1. <table>
  2. 	<tr>
  3. 		<td colspan="2">
  4. 			<!-- Barre de navigation supérieure//-->
  5. 		</td>
  6. 	</tr>
  7. 	<tr>
  8. 		<td>
  9. 			<!-- Barre de navigation latérale //-->
  10. 		</td>
  11. 		<td>
  12. 			<!-- Contenu de la page //-->
  13. 		</td>
  14. 	</tr>
  15. </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.

  1. <table>
  2. 	<tr>
  3. 		<td>
  4. 			<!-- Barre de navigation supérieure//-->
  5. 		</td>
  6. 	</tr>
  7. </table>
  8. <table>
  9. 	<tr>
  10. 		<td>
  11. 			<!-- Barre de navigation latérale //-->
  12. 		</td>
  13. 		<td>
  14. 			<!-- Contenu de la page //-->
  15. 		</td>
  16. 	</tr>
  17. </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.

Inhaltsverzeichnis 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.

  1. <div id="b_s">
  2. 	<!-- Barre de navigation supérieure//-->
  3. </div>
  4. <div id="c">
  5. 	<!-- Contenu de la page //-->
  6. </div>
  7. <div id="b_l">
  8. 	<!-- Barre de navigation latérale //-->
  9. </div>

Les informations de styles seront donc les suivantes :

  1. <style type="text/css">
  2. 	<!--
  3. 	div#b_s
  4. 	{
  5. 		background:#ffff00;
  6. 		width:auto;
  7. 		margin:0;
  8. 		padding:0.5em;
  9. 	}
  10. 	div#c
  11. 	{
  12. 		float:right;
  13. 		width:75%;
  14. 		background:#0000ff;
  15. 		margin-left:25%;
  16. 		padding:0.5em;
  17. 	}
  18. 	div#b_l
  19. 	{
  20. 		background:#ff0000;
  21. 		margin-right:75%;
  22. 		padding:0.5em;
  23. 	}
  24. 	//-->
  25. </style>

float:right

La déclaration du style et le code html de la page peuvent vous heurter : les plus curieux d'entre-vous auront remarqué que je présente le contenu de la page avant celui du menu de navigation qui se trouve pourtant à gauche dans la page.
Nous pouvons réaliser ce genre d'opération grâce à la déclaration float:right  qui détermine l'affichage du contenu de la page. Ceci est assez important lors du référencement dans les moteurs, car le code placé en haut de page est considéré comme ayant plus de pertinence.

Deutsche Übersetzung

Sie haben gebeten, diese Seite auf Deutsch zu besuchen. Momentan ist nur die Oberfläche übersetzt, aber noch nicht der gesamte Inhalt.

Wenn Sie mir bei Übersetzungen helfen wollen, ist Ihr Beitrag willkommen. Alles, was Sie tun müssen, ist, sich auf der Website zu registrieren und mir eine Nachricht zu schicken, in der Sie gebeten werden, Sie der Gruppe der Übersetzer hinzuzufügen, die Ihnen die Möglichkeit gibt, die gewünschten Seiten zu übersetzen. Ein Link am Ende jeder übersetzten Seite zeigt an, dass Sie der Übersetzer sind und einen Link zu Ihrem Profil haben.

Vielen Dank im Voraus.

Dokument erstellt 21/07/2002, zuletzt geändert 26/10/2018
Quelle des gedruckten Dokuments:https://www.gaudry.be/de/html-optimisation-tableaux-suite.html

Die Infobro ist eine persönliche Seite, deren Inhalt in meiner alleinigen Verantwortung liegt. Der Text ist unter der CreativeCommons-Lizenz (BY-NC-SA) verfügbar. Weitere Informationen auf die Nutzungsbedingungen und dem Autor.