CSS - Layout

Spero che tu sia molto a tuo agio con le tabelle HTML e che tu sia efficiente nella progettazione di layout di pagina utilizzando tabelle HTML. Ma sai che i CSS forniscono anche molti controlli per posizionare gli elementi in un documento. Poiché i CSS sono l'onda del futuro, perché non imparare e utilizzare i CSS invece delle tabelle per scopi di layout di pagina?

Il seguente elenco raccoglie alcuni pro e contro di entrambe le tecnologie:

• La maggior parte dei browser supporta le tabelle, mentre il supporto CSS viene adottato lentamente.

• Le tabelle perdonano di più quando le dimensioni della finestra del browser cambiano, modificando il contenuto e il wrapping per adattarsi alle modifiche di conseguenza. Il posizionamento CSS tende ad essere esatto e abbastanza rigido.

• Le tabelle sono molto più facili da imparare e manipolare rispetto alle regole CSS.

Ma ognuno di questi argomenti può essere invertito:

• I CSS sono fondamentali per il futuro dei documenti Web e saranno supportati dalla maggior parte dei browser.

• Il CSS è più preciso delle tabelle e consente di visualizzare il documento come previsto, indipendentemente dalla finestra del browser.

• Tenere traccia delle tabelle annidate può essere una vera seccatura. Le regole CSS tendono ad essere ben organizzate, di facile lettura e facilmente modificabili.

Infine, ti suggeriamo di utilizzare qualsiasi tecnologia abbia senso per te e utilizzare ciò che sai o ciò che presenta i tuoi documenti nel modo migliore.

CSS fornisce anche proprietà di layout delle tabelle per velocizzare il caricamento delle tabelle. Di seguito è riportato un esempio:

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

Noterai maggiormente i vantaggi sui tavoli di grandi dimensioni. Con l'HTML tradizionale, il browser doveva calcolare ogni cella prima di rendere finalmente la tabella. Quando si imposta l'algoritmo di layout della tabella su fixed , tuttavia, è sufficiente esaminare la prima riga prima di eseguire il rendering dell'intera tabella. Significa che la tua tabella dovrà avere larghezze di colonna fisse e altezze di riga.

Esempio di layout della colonna

Ecco i passaggi per creare un semplice layout di colonna utilizzando CSS:

Imposta il margine e la spaziatura interna del documento completo come segue:

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

Ora definiremo una colonna di colore giallo e successivamente collegheremo questa regola a un <div> -

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

Fino a questo punto avremo un documento con corpo giallo, quindi definiamo ora un'altra divisione all'interno del livello 0 -

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

Ora nidificheremo un'altra divisione all'interno del livello1 e cambieremo solo il colore di sfondo -

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

Infine, useremo la stessa tecnica, annidare una divisione di livello3 all'interno di livello2 per ottenere il layout visivo per la colonna di destra -

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

Completa il codice sorgente come segue:

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

Allo stesso modo, puoi aggiungere una barra di navigazione in alto o una barra degli annunci nella parte superiore della pagina.

Produrrà il seguente risultato: