[GUIDA] Come creare una tabella nel forum.

[djlegend]

[GUIDA] Come creare una tabella nel forum.

Andiamo ad analizzare come creare una tabella sul forum di HW Legend!

Queste sono modifiche apportabili al codice "Tabella" inserite tramite il tasto bbcode del menù dei messaggi per una maggiore personalizzazione...



In questa maniera semplifichiamo e velocizziamo il lavoro....

OPERAZIONI DA FARE:

Ecco da cosa è composta la prima cella a11

Codice: Seleziona tutto

[table=width:50%;border:1px solid #cccccc][tr=text-align:left][td=border:1px solid #cccccc]a11[/td]

La a12 è:

Codice: Seleziona tutto

[td=border:1px solid #cccccc]a12[/td]

L'ultima cella della prima riga:

Codice: Seleziona tutto

[td=border:1px solid #cccccc]a12[/td][/tr]

Se volete una tabella con piu' di una cella sulla stessa riga vi basterà ripetere piu' volte questo comando dopo quella di base.

La seconda colonna a21 è data da:

Codice: Seleziona tutto

[tr=text-align:left][td=border:1px solid #cccccc]a21[/td]

Se volete altre celle accanto basterà aggiungerci il comando:

Codice: Seleziona tutto

[td=border:1px solid #cccccc]a22[/td]

Per chiudere la tabella:

Codice: Seleziona tutto

[/tr][/table]

La notazione degli elementi nella tabella è in forma matricale (per semplicità) a11 è il primo elemento e cosi via.....

Tr= vi da la possibilità di inserire il testo nel modo in cui piu' vi piace nella casella, puo' essere centrato con text-align:center a sinistra con text-align:left o a destra text-align:right per ogni colonna che inserite.

Esempio allineamento a sinistra:

Codice: Seleziona tutto

[table=width:50%;border:1px solid #cccccc][tr=text-align:left][td=border:1px solid #cccccc]a11[/td][td=border:1px solid #cccccc]a12[/td][td=border:1px solid #cccccc]a13[/td][/tr]
[tr=text-align:left][td=border:1px solid #cccccc]a21[/td][td=border:1px solid #cccccc]a22[/td][td=border:1px solid #cccccc]a23[/td][/tr]
[tr=text-align:left][td=border:1px solid #cccccc]a31[/td][td=border:1px solid #cccccc]a32[/td][td=border:1px solid #cccccc]a33[/td][/tr][/table]

[table=width:50%;border:1px solid #cccccc][tr=text-align:left][td=border:1px solid #cccccc]a11[/td][td=border:1px solid #cccccc]a12[/td][td=border:1px solid #cccccc]a13[/td][/tr]
[tr=text-align:left][td=border:1px solid #cccccc]a21[/td][td=border:1px solid #cccccc]a22[/td][td=border:1px solid #cccccc]a23[/td][/tr]
[tr=text-align:left][td=border:1px solid #cccccc]a31[/td][td=border:1px solid #cccccc]a32[/td][td=border:1px solid #cccccc]a33[/td][/tr][/table]

Td= Vi da la possibilità di inserire i bordi per ogni colonna e ogni riga io ho messo il pordo 1px nell'esempio ma potete comunque modificarlo
es senza bordo con allineamento centrale.

Codice: Seleziona tutto

[table=width:50%;border:1px solid #cccccc][tr=text-align:center][td=]a11[/td][td=]a12[/td][td=]a13[/td][/tr]
[tr=text-align:center][td=]a21[/td][td=]a22[/td][td=]a23[/td][/tr]
[tr=text-align:center][td=]a31[/td][td=]a32[/td][td=]a33[/td][/tr][/table]

[table=width:50%;border:1px solid #cccccc][tr=text-align:center][td=]a11[/td][td=]a12[/td][td=]a13[/td][/tr]
[tr=text-align:center][td=]a21[/td][td=]a22[/td][td=]a23[/td][/tr]
[tr=text-align:center][td=]a31[/td][td=]a32[/td][td=]a33[/td][/tr][/table]

border:numeropx vi da la possibilità di variare lo spessore delle righe, ad esempio 10px per contorno e 3px per la prima cella e 1 per le altre.

Codice: Seleziona tutto

[table=width:50%;border:10px solid #cccccc][tr=text-align:center][td=border:3px solid #cccccc]a11[/td][td=border:1px solid #cccccc]a12[/td][td=border:1px solid #cccccc]a13[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a21[/td][td=border:1px solid #cccccc]a22[/td][td=border:1px solid #cccccc]a23[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a31[/td][td=border:1px solid #cccccc]a32[/td][td=border:1px solid #cccccc]a33[/td][/tr][/table]

[table=width:50%;border:10px solid #cccccc][tr=text-align:center][td=border:3px solid #cccccc]a11[/td][td=border:1px solid #cccccc]a12[/td][td=border:1px solid #cccccc]a13[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a21[/td][td=border:1px solid #cccccc]a22[/td][td=border:1px solid #cccccc]a23[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a31[/td][td=border:1px solid #cccccc]a32[/td][td=border:1px solid #cccccc]a33[/td][/tr][/table]

Il gioco sembra complesso....ma una volta capito il sistema.....diventa abbastanza facile.

[Scrambler]

Antonio... e meno male che mi dicevi di non capire una mazza di forum et simila...!!

Cmq strumento molto utile per postare in maniera esteticamente ordinata comparative di vario genere.

Piccola nota: l'intera tabella potrà essere "centrata" nel post attraverso l'uso degli appositi tags ai margini del codice:

Codice: Seleziona tutto

[center][table=width:50%;border:10px solid #cccccc][tr=text-align:center][td=border:3px solid #cccccc]a11[/td][td=border:1px solid #cccccc]a12[/td][td=border:1px solid #cccccc]a13[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a21[/td][td=border:1px solid #cccccc]a22[/td][td=border:1px solid #cccccc]a23[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a31[/td][td=border:1px solid #cccccc]a32[/td][td=border:1px solid #cccccc]bla bla bla bla bla bla bla[/td][/tr][/table][/center]

[center][table=width:50%;border:10px solid #cccccc][tr=text-align:center][td=border:3px solid #cccccc]a11[/td][td=border:1px solid #cccccc]a12[/td][td=border:1px solid #cccccc]a13[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a21[/td][td=border:1px solid #cccccc]a22[/td][td=border:1px solid #cccccc]a23[/td][/tr]
[tr=text-align:center][td=border:1px solid #cccccc]a31[/td][td=border:1px solid #cccccc]a32[/td][td=border:1px solid #cccccc]bla bla bla bla bla bla bla[/td][/tr][/table][/center]

Da notare che la larghezza della tabella varia in funzione della larghezza del frame del forum, e che la larghezza delle colonne della tabella varia in funzione della lunghezza del testo contenuto nella cella che occupa il maggior spazio, riducendo le colonne in cui testo ne occupa meno.