Passo 8: Non sei solo~
Per fare codici a colonne, semplicemente il sottostante, opuure anche per i codici precedenti, è consigliato l'uso di una tabella.
Questo perchè fare 2 colonne con i Div o gli Span è estremamente difficile.
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. |
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. |
Sulle tabelle non mi dilungherò a lungo perchè io vi insegnerò le cose base, forumfree farà il resto.
Se prendete il
generatore automatico, otterrete una tabella del genere (io ho impostato una riga e 1 colonne).
Ora, sappiate che:
-
table è la tabella.
-
tr indica la riga.
-
td indica la colonna.
Quindi possiamo provare a semplificare il codice così da togliere la parte grafica della skin.
CODICE
<table>
<tr>
<td>
</td>
</tr>
</table>
Sulle prime, se provate a incollare il codice non noterete nulla di diverso.
Proviamo a personalizzarlo.
Stesse tecniche di prima gente, solo che
table, tr e td questa volta sono i
TAGS Principali e quindi non c'è bisogno di div o span (li potete usare comunque, ma per comodità potete risparmiare caratteri).
Allineiamo la tabella al centro, impostiamo una larghezza e mettiamo uno sfondo.
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 400px">
<tr>
<td>
</td>
</tr>
</table>
Come notate, ho aggiunto a table
HTML
align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 400px"
Lo style e l'align possono essere applicati anche al tr e td. Ad esempio voglio fare la colonna nera. Scriverò così:
HTML
style="background: #000; color: #fff"
CODICE
<table align="center" style="background: #fff; border: 1px solid #fff; box-shadow: 0 0 1px #c0c0c0; font-family: georgia; font-size: 12px; width: 400px">
<tr>
<td style="background: #000; color: #fff">
Colonna
</td>
</tr>
</table>
Lo stesso vale per la riga tr.
Alla fine non è difficile, applicate gli stessi procedimenti per il div e sarete a cavallo.
Però anche le tabelle hanno qualcosa di rognoso.
Ogni riga deve avere lo stesso numero di colonne, altrimenti il codice vi sballa.
Esempio:
| | |
| <!--RIGA1-->| COLONNA1 | COLONNA2 | COLONNA3 | COLONNA4 | <!--RIGA2-->| COLONNA1 | COLONNA2 | COLONNA4 | <!--RIGA3-->| COLONNA1 | COLONNA2 |
| |
| | |
Ma qui un santo è venuto in nostro soccorso (non chiedetemi chi), e ha risolto il problema.
Con l'aggiunta al tag
tdcolspan→ uniamo più colonne orizzontali.
rowspan→ uniamo più colonne verticalmente.
Esempio:
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. | testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. |
testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. |
In principio erano
2 righe e
3 colonne.
Io ho unito la prima colonna alta con quella bassa (cancellando quest'ultima dal codice). Infatti il primo td ha questo codice:
Il valore
2 è dato perchè dovete sommare le colonne che volete unire: in questo caso
se stesso più la colonna sotto.
Poi ho unito la seconda colonna bassa con la terza colonna bassa (cancellando quest'ultima dal codice).
Il valore
2 è dato perchè dovete sommare le colonne che volete unire: in questo caso
se stesso più la colonna accanto.
Anche qui è tutta una questione di pratica e di attenzione.
Qui sotto ci sono alcuni link dove potete approfondire il tema =)
xhtml.html.it xhtml.html.it (2) xhtml.html.it (3) xhtml.html.it (4)Oppure cercate su Google
Tabella HTML.
.Passo 8: Non sei solo~
.
Web