Salve ragazzi,
Nell'abbozzare un articolo mi son riproposto il problema di come esporre quantità di codice di una certa rilevanza senza occupare 2 - 3 schermate, o anche più, di browser, cosa che trovo alquanto odiosa, riducendo il tutto a proporzioni più modeste, tipo l'esempio sotto :
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Una tabelle di prova</title>
</head>
<body>
<table width="900px">
<caption>
<span align="center"><b>Una tabella di prova</b></span>
</caption>
<thead style="background: blue; color: yellow">
<tr>
<th width="100px">Col. 1</th>
<th width="500px">Colonna 2</th>
<th width="150px">Col. 3</th>
<th width="130px">Col. 4</th>
<th width="20px"></th>
</tr>
</thead>
<tfoot style="background: blue; color: yellow">
<tr>
<th>Piede</th>
<th colspan="4">Celle 2, 3, 4 e 5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>R 1 C 1</td>
<td>Riga 1 Colonna 2</td>
<td>R 1 C 3</td>
<td>R 1 C 4</td>
</tr>
<tr>
<td>R 2 C 1</td>
<td>Riga 2 Colonna 2</td>
<td>R 2 C 3</td>
<td>R 2 C 4</td>
</tr>
<tr>
<td>R 3 C 1</td>
<td>Riga 3 Colonna 2</td>
<td>R 3 C 3</td>
<td>R 3 C 4</td>
</tr>
<tr>
<td>R 4 C 1</td>
<td>Riga 4 Colonna 2</td>
<td>R 4 C 3</td>
<td>R 4 C 4</td>
</tr>
<tr>
<td>R 5 C 1</td>
<td>Riga 5 Colonna 2</td>
<td>R 5 C 3</td>
<td>R 5 C 4</td>
</tr>
<tr>
<td>R 6 C 1</td>
<td>Riga 6 Colonna 2</td>
<td>R 6 C 3</td>
<td>R 6 C 4</td>
</tr>
<tr>
<td>R 7 C 1</td>
<td>Riga 7 Colonna 2</td>
<td>R 7 C 3</td>
<td>R 7 C 4</td>
</tr>
<tr>
<td>R 8 C 1</td>
<td>Riga 8 Colonna 2</td>
<td>R 8 C 3</td>
<td>R 8 C 4</td>
</tr>
<tr>
<td>R 9 C 1</td>
<td>Riga 9 Colonna 2</td>
<td>R 9 C 3</td>
<td>R 9 C 4</td>
</tr>
</tbody>
<table>
</body>
</html>
A dire in vero, è un problema di semplice soluzione e che mi ero già posto un annetto fa, poi perso per strada
... lo ripropongo nel caso sia utile a qualcun altro oltre che me
Posto che abbiate il vostro codice e che vogliate, per chiarezza, mostrarlo comprensivo delle identazioni, copiatelo ed incollatelo nel post, editarlo direttamente sarebbe laborioso dato che non potreste dare le tabulazioni, quindi selezionatelo e premete il tasto "
CODE" e rispondete "
Ok" alla finestra di dialogo che vi viene proposta, non annulla pena la perdita delle identazioni. Tenete presente che le identazioni verrebbero comunque perse dando una qualsiasi formattazione al codice ... scherzetti dell'interprete, perciò lasciate il vostro codice inalterato
Ora avrete il vostro codice in una sezione racchiusa tra i pseudo-tag "
CODE" e "
/CODE" a loro volta racchiusi tra parentesi quadre "
[ ]" ... ovviamente tenute separate per evitare che l'interprete si scateni
Vi sarà sufficiente aprire e chiudere un "
div" che inglobi anche i tag "CODE" - "/CODE" (parentesi comprese) a cui assegnare uno stile prevedente una altezza "
height" fissa, espressa in pixel, e la proprietà "
overflow" impostata su "
auto" e il gioco è fatto.
Vi faccio l'esempio sotto, nel quale ho compreso l'azzeramento delle marginature interne ed esterne al div, purtroppo l'indicazione del "CODE" ho dovuta staccarla dalle parentesi, l'interprete incombe
HTML
<div style="margin : 0; padding: 0; width: 90%; height: 200px; overflow: auto;">
[ CODE ]....[ /CODE ]</div>>
Semplice no?, oltretutto non necessariamente l'uso deve limitarsi al codice, un div in tal modo definito può essere utilizzato anche per altro, p.e. contenere citazioni piuttosto lunghe o ... quello che vi passa per la testa
Spero che sia utile a qualcuno e che i più esperti mi perdonino e, anzi, se hanno soluzioni migliori vogliano condividerle.
Ciao
Edited by nuzzopippo - 14/5/2014, 17:20
