Come formatare le tabelle, fare colonne uguali e agiungere titolo.

Oggi vediamo cosa posiamo fare con le tabella su una pagina web, come decorare il loro aspetto finale coi CSS, regolare la larghezza delle celle o  aggiungere un titolo. Creare dei collegamenti a vari cellule della tabella e come inserire una tabella nel altra.

1. Come aggiungere un id o una classe ad una tabella

Se una pagina o un sito web contiene diverse tipi di tabelle e pensi che debono essere diversi  poi semplicemente aggiungere ad esso un id o una classe e  dopo atraverso linguaggio css creare dei stili adatti,  per esempio,

<table class="list">
<tr>
  <th>Comedy</th>
  <th>Adventure</th>
  <th>Action</th>
</tr>
<tr>
  <td>Scary Movie</td>
  <td>Indiana Jones</td>
  <td>The Punisher</td>
</tr>
<tr>
  <td>Epic Movie</td>
  <td>Star Wars</td>
  <td>Bad Boys</td>
</tr>
</table>
<table id="company">
<tr>
  <th>Company</th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
</tr>
<tr>
  <td>Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
</tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
</tr>
</table>

a questo punto la  class = "list" può essere utilizzata per decorare varie tabelle sulla stessa pagina e  id = "compagnia" - solo per una  tabella. (anche se in realta se  a due tabelle sulla stessa pagina atribuire lo stesso id lo stile di visualizzazione sara uguale, e solo un concetto che id – e un attributo  individuale e class - multiplo ).

2. Come aggiungere un link al interno di una tabella

Le celle di tabella possono contenere quasi tutti gli elementi a noi noti cominciando da una immagine e finendo con un form. Per inserire un collegamento al interno di una  cella è necessario aggiungere  l'elemento <a>  collegandolo ad un testo o una immagine o un bottone, Funziona cosi come in altri casi vediamo un esempio:

<table>
<tr>
  <th>Comedy</th>
  <th>Adventure</th>
  <th>Action</th>
</tr>
<tr>
  <td><a href="# ">Scary Movie</a></td>
  <td>Indiana Jones</td>
  <td>The Punisher</td>
</tr>
<tr>
  <td>Epic Movie</td>
  <td>Star Wars</td>
  <td>Bad Boys</td>
</tr>
</table>

Posiamo stilizzare anche questi collegamenti creando dei stili in un foglio di sitle css per questo elemento  a{}, o atribuire una classe solo per questo link per essere piu precisi nella scelta di questo è solo questo link.

3. Come creare un riferimento ad una cella della tabella

Collegamento ad una cella di tabella viene creato con l'aiuto di ancora. Per fare questo, alla cella si attribuisce un attributo id(in questo caso solo id non posiamo utilizzare una classe) con un valore, per esempio,

<td id="nome del identificatore">contenuto della cella </td>

E per creare un collegamento a questa cella, dobbiamo indicare  il solito percorso atraverso tag href= come si fa per un link  

<a href="#nome di identificatore">testo del link</a>

Se il passaggio sara fatto da una pagina o un sito esterno diverso da questo  dovremo scrivere percorso assoluto non dimenticando la nostra ancora,  ad esempio,

<a href="http://www.ioeweb.it/css/tabella/#color">testo del link</a>.  

Per mostrare meglio il risultato del passaggio posiamo evidenziare il punto di destinazione con il cambiamento del colore dello sfondo della cella o colore del testo della cella, o aggiungere una sottolineatura, etc.

td:target {background: salmon;}
td:target {color: salmon;}
td:target {text-decoration: underline;}

Esempio

La tabella è stata compilata sulla base di indice di ascolto. Clicando questo link potrete scoprire quale film è il mio preferito il colore della cella diventera rosso e  testo bianco

 

I miglior film del anno
Fantascienza Comedia Aventura
L'uomo di Marte Il giorno migliore Indiana Jones
Arival L'ora legale Agenti
Matrix Cena da amici John Wick

4. Come impostare la larghezza uguale delle colonne nella tabella

Larghezza della tabella di default è determinata dal contenuto delle sue cellule. Gestire larghezza delle colonne (cellule) posiamo in  seguenti modi:
1) Se viene specificata la larghezza della tabella, atraverso la regola  table {table-layout: fixed;}  la largezza delle celle sara uguale, e come riferimento dei calcoli si prende la  larghezza della cellula più lunga.

2) Se per una  tabella viene indicata il parametro  tabel {width: 100%},  la larghezza delle celle sara calcolata in% , per esempio, td {width: 25%}, allora la larghezza di tutte le celle sara  uguale.

3) Impostando la larghezza fissa con l'aiuto delle unità di lunghezza, per esempio, th {width: 200px}.ragiungeremo effeto delle cellule uguali

Non dimenticate che alla larghezza della tabella  sara aggiunto lo spazio interno padding e lo spessore dei bordi  (se per la tabella non è impostata la proprieta {box-sizing: border-box}).

5. Come stilizare un titolo della tabella

Titolo della tabella viene aggiunto attraverso tag <caption> Titolo della tabella </caption> , che viene inserito immediatamente dopo il tag di apertura <table>. Per default, il titolo stesso si trova sopra la tabella al momento di visualizzazione, e il testo del titolo viene alienato al centro rispetto la tabella .

Gestire la posizione del titolo si può attraverso proprietà caption-side, per esempio, caption {caption-side: bottom} metterà il titolo dopo la tabella.

In effetti titolo rappresenta una cella di tabella , quindi posimo gestirlo come una  solita cella di una tabella, come questo per esempio

caption {
  padding: 7px;
  background: silver;
  font-style: italic;
  text-align: right;
} 

6. Come creare tabelle nidificate

Per inserire una tabella in un altra è necessario inserire il codice della nuova tabella  nella cella selezionata della tabella principale, ad esempio:

<table class="nesting">
  <tr>
    <th>cella del titolo dell tabella</th>
    <th>cella del titolo dell tabella</th>
  </tr>
  <tr>
    <td>cella della tabella </td>
    <td>
      <table>
        <tr>
          <th>cella del titolo dell tabella anidata </th>
        </tr>
        <tr>
          <td>cella della tabella anidata</td>
        </tr>
      </table>
    </td>
  </tr>
</table> 

cella del titolo dell tabella cella del titolo dell tabella
cella della tabella
cella del titolo dell tabella anidata
cella della tabella anidata

Le tabelle nidificate possono contenere qualsiasi numero di righe e celle. Per loro è possibile indicare  proprietà e stili diverse dalla tabella base e in essa come in una tabella normale si possa  inseriti  immagini testo  e tutto il resto.

 

Letto 688 volte