come inserire una barta di scorrimento o meglio di scroll in HTML

Ecco qui velocemente un esempio che vi aiuta a capire come si fa...

In tanto cominciamo dal codice per la tabella, che è creata dai seguenti tag:

Codice:


<div style="width:400px;height:200px;overflow-y: scroll; border:2px solid black;">
...
...
</div>


DOVE:
width:400px; => rappresenta la larghezza da attribuire al div
height:200px; => rappresenta l'altezza da attribuire al div
overflow-y: scroll; => indica che, se il contenuto supera l'altezza stabilita, deve essere inserita la barra di scorrimento verticale
border:2px solid black; => indica spessore, tipo e colore del bordo.

NOTA IMPORTANTE!
Perché il codice della tabella funzioni bene, deve essere inserita con la stessa ampiezza del div.
Esempio: <table width="100%" border=0>

Bene è il gioco è fatto, adesso abbiamo la nostra barra di scorrimento alla destra del nostro box...

Se volete avere anche la barra di scorrimento anche sotto dovete inserire nel codice precedente questo tag => overflow-x: scroll;

E adesso ecco un esempio completo:

Codice:


<div style="width: 500px; height: 100px; overflow: scroll; border: 1px solid black;">
<table style="width: 584px; height: 137px;" border="0" cellspacing="1" cellpadding="4">
<tbody>
<tr>
<td width="20%"><strong>aaaaa</strong></td>
<td width="20%"><strong>bbbbbbb</strong></td>
<td width="20%"><strong>cccccc</strong></td>
<td width="20%"><strong>dddddd</strong></td>
<td width="20%"><strong>eeeeee</strong></td>
</tr>
<tr>
<td width="20%">fffff</td>
<td width="20%">gggggg</td>
<td width="20%">hhhhhh</td>
<td width="20%">iiiiiiiii</td>
<td width="20%">jjjjjjj</td>
</tr>
<tr>
<td width="20%">kkkkkkk</td>
<td width="20%">lllllll</td>
<td width="20%">mmmmmm</td>
<td width="20%">nnnnn</td>
<td width="20%">oooooo</td>
</tr>
<tr>
<td width="20%">pppppp</td>
<td width="20%">qqqqq</td>
<td width="20%">rrrrr</td>
<td width="20%">sssss</td>
<td width="20%">ttttt</td>
</tr>
<tr>
<td width="20%">uuuuu</td>
<td width="20%">vvvvvv</td>
<td width="20%">xxxxxxx</td>
<td width="20%">yyyyy</td>
<td width="20%">zzzzzz</td>
</tr>
</tbody>
</table>
</div>


ECCO IL RISULTATO:
http://flaviusso.altervista.org/esempio_scroll_html.html

Ottima Guida O:

grazie

la devo sistemare perché il codice html influisce sulla nostra pagina della guida

bene sistemata anche questa