È possibile utilizzare una tabella HTML per visualizzare qualsiasi contenuto che si adatta bene all'interno di un grafico, come ad esempio i punteggi o le tabelline. Se si desidera assegnare una certa larghezza per la vostra tavola per adattarsi sul vostro sito web, ma il contenuto è più ampia, è necessario aggiungere una barra di scorrimento orizzontale a tavola. Tuttavia, le tabelle non supportano le barre di scorrimento, quindi si dovrà utilizzare una soluzione alternativa al fine di fare questo in modo efficace.

Le tabelle HTML

Le tabelle sono un elemento Hypertext Markup Language costituita da righe e colonne. Quando una riga e di colonna si intersecano, formano una cella. Questa cella contiene quindi testo, immagini, link e altri elementi. Una tabella può essere costituito da una sola cellula - da una riga e colonna - o un numero illimitato di cellule. Il codice di base per una tabella è il seguente:

<Table>
<Tr> <td> Cell 1, riga 1 </ td>
<Td> Cella 2, riga 1 </ td> </ tr>
<Tr> <td> Cell 1, riga 2 </ td>
<Td> Cella 2, riga 2 </ td> </ tr>
</ Table>

scrollbar Comportamento

Per default, la maggior parte dei contenitori - tra strati div - creeranno barre di scorrimento orizzontale e verticale quando il contenuto all'interno del contenitore è più grande del contenitore stesso. Questo permette al visitatore di scorrere per vedere il resto del contenuto ritagliato, senza estendere le dimensioni del contenitore e, eventualmente, rompendo il layout della pagina. Quando il contenuto è più piccolo del contenitore, non appare alcuna barra di scorrimento. Tuttavia, le tabelle mostrano mai le barre di scorrimento, anche quando si forza una barra di scorrimento con il codice. Pertanto, è necessario inserire il vostro intero tavolo in un altro contenitore, come ad esempio un div, per dare l'apparenza di un tavolo scorrevole.

scorrimento Contenitori

È possibile introdurre una barra di scorrimento orizzontale per il vostro elemento che contiene, anche se questo elemento non avrebbe, naturalmente, una barra di scorrimento con i fogli di stile a cascata o CSS. Per applicare una barra di scorrimento al contenitore, aggiungere la proprietà style "scroll" con il valore "scorrimento" e inserire la tabella all'interno del contenitore, come il seguente esempio:

<Div style = "width: 400px; height: 180px; overflow: auto; trabocco-y: hidden">
<Table style = "width: 500px; height: 175px;">
<Tr> <td> Cell 1, riga 1 </ td>
<Td> Cella 2, riga 1 </ td> </ tr>
</ Table>
</ Div>

Questo codice si applica sia una barra di scorrimento orizzontale del tavolo, permettendo al visitatore di vedere la totalità del contenuto.

considerazioni

Si noti che l'impostazione della proprietà "troppo pieno" a "auto" produrrà sia una barra di scorrimento verticale e orizzontale quindi è necessario nascondere la barra di scorrimento verticale, sull'asse "Y". Questo metodo funziona meglio se il div contenitore è leggermente più alto di vostro tavolo e fino a quando il tavolo è più largo del div. In caso contrario, non apparirà la barra di scorrimento. È possibile forzare le frecce scrollbar a comparire, ma non sarà attivo, se si imposta il valore di overflow a "scorrere" invece di "auto".