In HTML una tabella si crea con i tag: table, tr, td.
La struttura di base di una tabella è così strutturata:
Codice: Seleziona tutto
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
table = il tag che racchiude il codice della tabella.
tr = il tag che crea una riga della tabella.
td = il tag che crea i campi della tabella.
Aggiungeremo inoltre altri 2 tag per consentono di dare una dimensione alle colonne della tabella:
th = simile a "td" ma con la possibilità di stabilire la larghezza della colonna. Serve per creare la testata della tabella con i nomi dei campi della tabella.
tdc = simile a "td" ma con la possibilità di inserire la dimensione in percentuale della colonna.
Vediamo ora come si creano questi 5 BBCode che serviranno a creare le tabelle.
Selezionare PCA --> CONTENUTI --> BBCode quindi "Aggiungi nuovo BBCode".
Il primo nuovo BBCode sarà "table"
Alla voce "Uso del BBCode" inserire il seguente codice:
Codice: Seleziona tutto
[table={NUMBER}]{TEXT}[/table]
Codice: Seleziona tutto
<table style="width: {NUMBER}%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; border: 3px solid #6A6F34; padding: 5px;">{TEXT}</table>
Codice: Seleziona tutto
[table={NUMBER}]{TEXT}[/table]
Premere "Invia" e il BBCode è creato. La stessa cosa va fatta per gli altri 4 BBCode:
tr = Uso del BBCode
Codice: Seleziona tutto
[tr]{TEXT}[/tr]
Codice: Seleziona tutto
<tr>{TEXT}</tr>
Codice: Seleziona tutto
[tr]{TEXT}[/tr]
Codice: Seleziona tutto
[td]{TEXT}[/td]
Codice: Seleziona tutto
<td style="vertical-align: top; border:1px solid #111111; padding:1px; margin:1px;">{TEXT}</td>
Codice: Seleziona tutto
[td]{TEXT}[/td]
Codice: Seleziona tutto
[th={NUMBER}]{TEXT}[/th]
Codice: Seleziona tutto
<th style="width: {NUMBER}%; vertical-align: top; border: 1px solid #6A6F34; background:#B5C598; padding:0.2em 0.5em; margin: 1em 0;">{TEXT}</th>
Codice: Seleziona tutto
[th={NUMBER}]{TEXT}[/th]
Codice: Seleziona tutto
[tdc={NUMBER}]{TEXT}[/tdc]
Codice: Seleziona tutto
<td style="width: {NUMBER}%; vertical-align: top; border:1px solid #111111; padding:1px; margin:1px;">{TEXT}</td>
Codice: Seleziona tutto
[tdc={NUMBER}]{TEXT}[/tdc]
Esempio di tabella con bbcode table.
ATTENZIONE: nei BBcode della tabella è stato inserito uno spazio tra la parentesi quadra e il tag per evitare che venissero interpretati come BBcode. Nel BBcode non ci vanno spazi.
bbcode | uso del bbcode | trasforma in HTML | aiuto in linea |
---|---|---|---|
table | [ table={NUMBER}]{TEXT}[ /table] | <table style="width: {NUMBER}%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; border: 3px solid #6A6F34; padding: 5px;">{TEXT}</table> | [ table={NUMBER}]{TEXT}[ /table] |
tr | [ tr]{TEXT}[ /tr] | <tr>{TEXT}</tr> | [ tr]{TEXT}[ /tr] |
th | [ th={NUMBER}]{TEXT}[ /th] | <th style="width: {NUMBER}%; vertical-align: top; border: 1px solid #6A6F34; background:#B5C598; padding:0.2em 0.5em; margin: 1em 0;">{TEXT}</th> | [ th={NUMBER}]{TEXT}[ /th] |
td | [ td]{TEXT}[ /td] | <td style="vertical-align: top; border:1px solid #111111; padding:1px; margin:1px;">{TEXT}</td> | [ td]{TEXT}[ /td] |
tdc | [ tdc={NUMBER}]{TEXT}[ /tdc] | <td style="width: {NUMBER}%; vertical-align:top; padding:1px; margin:1px; border:1px solid #6A6F34; background: #B5C598;">{TEXT}</td> | [ tdc={NUMBER}]{TEXT}[ /tdc] |
ISTRUZIONI:
table = nel tag "table" va inserito il valore in percentuale della larghezza della tabella (es: [ table=100 ])
th = il tag "th" corrisponde alla testata della tabella (nome dei campi) e nel tag "th" va inserito il valore della larghezza della colonna, sempre in percentuale.
tdc = nel tag "tdc" va inserita la larghezza in percentuale del campo. E' simile al tag "th" e va usato nel caso non sia necessario utilizzare il tag "th" che contiene la testata della tabella con il nome dei campi.
La tabella di questa pagina è il risultato del seguente codice:
Codice: Seleziona tutto
[table=100]
[tr]
[th=5]bbcode[/th]
[th=20]uso del bbcode[/th]
[th=50]trasforma in HTML[/th]
[th=25]aiuto in linea[/th]
[/tr]
[tr]
[td]table[/td]
[td][ table={NUMBER}]{TEXT}[ /table][/td]
[td]<table style="width: {NUMBER}%table-layout: fixed; border-collapse: separate; border-spacing: 3px; border: 3px solid #6A6F34; padding: 5px;">{TEXT}</table>[/td]
[td][ table={NUMBER}]{TEXT}[ /table][/td]
[/tr]
[tr]
[td]tr[/td]
[td][ tr]{TEXT}[ /tr][/td]
[td]<tr>{TEXT}</tr>[/td]
[td][ tr]{TEXT}[ /tr][/td]
[/tr]
[tr]
[td]th[/td]
[td][ th={NUMBER}]{TEXT}[ /th][/td]
[td]<th style="width: {NUMBER}%; vertical-align: top; border: 1px solid #6A6F34; background:#B5C598; padding:0.2em 0.5em; margin: 1em 0;">{TEXT}</th>[/td]
[td][ th={NUMBER}]{TEXT}[ /th][/td]
[/tr]
[tr]
[td]td[/td]
[td][ td]{TEXT}[ /td][/td]
[td]<td style="vertical-align: top; border:1px solid #111111; padding:1px; margin:1px;">{TEXT}</td>[/td]
[td][ td]{TEXT}[ /td][/td]
[/tr]
[tr]
[td]tdc[/td]
[td][ tdc={NUMBER}]{TEXT}[ /tdc][/td]
[td]<td style="width: {NUMBER}%; vertical-align:top; padding:1px; margin:1px; border:1px solid #6A6F34; background: #B5C598;">{TEXT}</td>[/td]
[td][ tdc={NUMBER}]{TEXT}[ /tdc][/td]
[/tr]
[/table]
riga1 campo 1 | riga1 campo 2 | riga1 campo 3 |
riga2 campo 1 | riga2 campo 2 | riga2 campo 3 |
riga3 campo 1 | riga3 campo 2 | riga3 campo 3 |
La stessa tabella ma utilizzando il tag "th" nella prima riga:
campo 1 | campo 2 | campo 3 |
---|---|---|
riga1 campo 1 | riga1 campo 2 | riga1 campo 3 |
riga2 campo 1 | riga2 campo 2 | riga2 campo 3 |