Microsoft Expression Web - Tabella dati

In questo capitolo impareremo come aggiungere una tabella dati nella tua pagina web. Creiamo una nuova pagina HTML, ma qui vogliamo applicare anche il modello Web dinamico alla nostra pagina HTML.

Step 1 - Andiamo nel menu File e selezioniamo New → Create from Dynamic Web Template…

Si aprirà la seguente finestra di dialogo come mostrato nello screenshot seguente.

Step 2 - Seleziona il file master.dwt file e quindi fare clic sul pulsante Apri.

Step 3 - Salva la pagina web e chiamala datatable.html.

Step 4 - In Visualizzazione struttura, vai alla sezione del contenuto principale e rimuovi il testo.

Step 5 - Avanti, vai al Table → Insert Table… opzione di menu che aprirà la finestra di dialogo Inserisci tabella.

Seleziona il numero di righe e colonne. È inoltre possibile impostare diverse opzioni di layout come allineamento, spaziatura interna, dimensione e colore del bordo e colore di sfondo, ecc. Al termine, fare clic su OK.

Step 6 - La visualizzazione struttura di datatable.html apparirà ora come segue:

Ora, se guardi la vista codice della pagina, vedrai che il codice seguente viene aggiunto da Expression Web.

<table class = "auto-style2" style = "width: 100%"> 
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>    
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
  
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
</table>

Step 7 - Nel pannello delle attività Gestisci stili, fai clic con il pulsante destro del mouse “.auto-style2”. Fai clic su Scegli classe di rinomina "auto-style2".

Step 8 - Nella finestra di dialogo Rinomina classe, immettere mytable nel New namecampo. Assicurati che Rinomina riferimenti di classe in questa pagina sia spuntato, quindi fai clic su OK.

Ora, dai un'occhiata alla tua pagina web in visualizzazione struttura. Apparirà come segue:

Step 9 - Per formattare questa tabella e applicarvi uno stile, vai al pannello delle attività Gestisci stili e fai clic su New Style…

Step 10- Nella finestra di dialogo Nuovo stile, impostare le impostazioni del bordo e quindi fare clic su OK. C'è un'altra opzione per formattare la tabella dei dati. Nella visualizzazione struttura, fare clic con il pulsante destro del mouse sulla tabella e selezionareModify → Table AutoFormat…

In questa finestra di dialogo vedrai i diversi formati e altre impostazioni. Selezioniamo il formato Professional e facciamo clic su OK.

Step 11 - Ora, la visualizzazione struttura della tua pagina web appare come segue:

Aggiungiamo alcuni dati nella visualizzazione struttura.

Step 12- Salva la tua pagina web e visualizzala in anteprima in un browser. Apparirà come il seguente screenshot.