Passo 9: L'ultimo esempio~
Adesso facciamo qualche esempio, partiamo con qualcosa di semplice:
Link♥
Link♥
Link♥
Link♥
Link♥ | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo |
|
|
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
<div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div>
</td>
<td>
<div style="background: #18b1c3; width: 100px; height: 60px">
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<div style="background: #f3a061; height: 60px">
</div>
</td>
</tr>
</table>
Prima cosa da fare: pensare alle righe e alle colonne della tabella.
In questo esempio sono
2 righe e
3 colonne.
Passo 2: Iniziare a scrivere la tabella.
CODICE
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
: Unire le colonne, in questo caso solo quelle della terza riga.
CODICE
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
: Personalizzare la tabella.
Partiamo al solito con la parte esterna: sfondo, bordo etc... fino all' interno.
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
: Interno tabella.
Al momento abbiamo questo.
Riempiamo la prima colonna: semplicemente ci postiamo dei link all' interno.
Ora, dato che io sono pignola, ho stretto la cella.
Non ho usato style, ma semplicemente width in percentuale,
è la stessa cosa. In entrambi i modi otterrete lo stesso effetto.
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Seconda colonna: inseriamo lo scrool con il testo.
Link♥
Link♥
Link♥
Link♥
Link♥ | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo | |
|
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
<div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Come vedete occupa anche la cella di destra, potete inserire un width oppure riempire la cella di destra, in questo modo si restringe.
Per la terza colonna usiamo un semplice box blu fatto con i div style.
CODICE
<div style="background: #18b1c3; width: 100px; height: 60px">
</div>
Link♥
Link♥
Link♥
Link♥
Link♥ | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo |
|
|
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
[URL=http://]Link♥[/URL]
</td>
<td>
<div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div>
</td>
<td>
<div style="background: #18b1c3; width: 100px; height: 60px">
</div>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
</table>
Ultima Riga: box arancione fatto con i div style.
CODICE
<div style="background: #f3a061; height: 60px">
</div>
Ed ecco il nostro codice **
Link♥
Link♥
Link♥
Link♥
Link♥ | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo |
|
|
Altro esempio:
Link♥
Link♥
Link♥
Link♥
Link♥ | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo | Qualcosa o quello che vuoi~ |
|
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 310px; border-radius: 20px; padding: 5px">
<tr>
<td width="20%">[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]
[URL=http://" target=]Link♥[/URL]</td>
<td><div style="overflow: auto; height:60px">testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo</div></td>
<td rowspan="2"><div style="letter-spacing: 2px; color: #404040; font-family: georgia; font-size: 18px; margin: 3px; font-style: italic; line-height: 120%">Qualcosa o quello che vuoi~</div></td>
</tr>
<tr>
<td colspan="2" align="center"><div style="background: #f3a061; height: 60px">
</div></td>
</tr>
</table>
Ho unito le due colonne della seconda riga, e la terza colonna delle 2 due righe.
Quindi c'è un
colspan="2" e un
rowspan="2".
.Passo 9: L'ultimo esempio~
.
Web