CSS - Mises en page

J'espère que vous êtes très à l'aise avec les tableaux HTML et que vous êtes efficace dans la conception de mises en page à l'aide de tableaux HTML. Mais vous savez que CSS fournit également de nombreux contrôles pour positionner les éléments dans un document. Puisque CSS est la vague du futur, pourquoi ne pas apprendre et utiliser CSS au lieu de tableaux à des fins de mise en page?

La liste suivante rassemble quelques avantages et inconvénients des deux technologies -

  • La plupart des navigateurs prennent en charge les tableaux, tandis que le support CSS est lentement adopté.

  • Les tableaux sont plus indulgents lorsque la taille de la fenêtre du navigateur change - en modifiant leur contenu et en les enveloppant pour s'adapter aux changements en conséquence. Le positionnement CSS a tendance à être exact et assez rigide.

  • Les tableaux sont beaucoup plus faciles à apprendre et à manipuler que les règles CSS.

Mais chacun de ces arguments peut être inversé -

  • CSS est essentiel pour l'avenir des documents Web et sera pris en charge par la plupart des navigateurs.

  • Le CSS est plus exact que les tableaux, permettant à votre document d'être visualisé comme vous le souhaitez, quelle que soit la fenêtre du navigateur.

  • Garder une trace des tables imbriquées peut être une vraie douleur. Les règles CSS ont tendance à être bien organisées, faciles à lire et à modifier facilement.

Enfin, nous vous suggérons d'utiliser la technologie qui vous convient le mieux et d'utiliser ce que vous savez ou ce qui présente vos documents de la meilleure façon.

CSS fournit également une propriété de mise en page de table pour accélérer le chargement de vos tables. Voici un exemple -

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

Vous remarquerez davantage les avantages sur les grandes tables. Avec le HTML traditionnel, le navigateur devait calculer chaque cellule avant de finalement rendre le tableau. Cependant, lorsque vous définissez l'algorithme de mise en page de tableau sur fixe , il suffit de regarder la première ligne avant de rendre l'ensemble du tableau. Cela signifie que votre tableau devra avoir des largeurs de colonne et des hauteurs de ligne fixes.

Exemple de disposition de colonne

Voici les étapes pour créer une disposition de colonne simple en utilisant CSS -

Définissez la marge et le remplissage du document complet comme suit -

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

Maintenant, nous allons définir une colonne de couleur jaune et plus tard, nous attacherons cette règle à un <div> -

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

Jusqu'à ce point, nous aurons un document avec un corps jaune, définissons maintenant une autre division à l'intérieur de level0 -

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

Maintenant, nous allons imbriquer une autre division dans le niveau 1, et nous changerons juste la couleur d'arrière-plan -

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

Enfin, nous allons utiliser la même technique, imbriquer une division de niveau3 à l'intérieur de niveau2 pour obtenir la disposition visuelle de la colonne de droite -

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

Complétez le code source comme suit -

<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

De même, vous pouvez ajouter une barre de navigation supérieure ou une barre d'annonces en haut de la page.

Il produira le résultat suivant -