BBCode table - creazione di una tabella

Rispondi
Avatar utente
Micogian
Amministratore
Messaggi: 104
Iscritto il: 28/11/2014, 19:32

BBCode table - creazione di una tabella

Messaggio da Micogian »

Mediante alcuni BBCode inseriti opportunamente è possibile creare una tabella in un topic.
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>
Per creare una tabella in PHPBB è necessario creare alcuni BBCode, in particolare:
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]
Nel campo "Trasforma in HTML" inserire:

Codice: Seleziona tutto

<table style="width: {NUMBER}%; table-layout: fixed;  border-collapse: separate;  border-spacing: 3px; border: 3px solid #6A6F34; padding: 5px;">{TEXT}</table>
Nel campo "Aiuto in linea" inserire:

Codice: Seleziona tutto

[table={NUMBER}]{TEXT}[/table]
Se volete che il BBCode compaia nella lista dei tag disponibili quando create un nuovo messaggio, nelle "Impostazioni" dovete spuntare "Mostra nella pagina di scrittura".
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]
tr = Trasforma in HTML

Codice: Seleziona tutto

<tr>{TEXT}</tr>
tr = Aiuto in linea

Codice: Seleziona tutto

[tr]{TEXT}[/tr]
td = Uso del BBCode

Codice: Seleziona tutto

[td]{TEXT}[/td]
td = Trasforma in HTML

Codice: Seleziona tutto

<td style="vertical-align: top; border:1px solid #111111; padding:1px; margin:1px;">{TEXT}</td>
td = Aiuto in linea

Codice: Seleziona tutto

[td]{TEXT}[/td]
th = Uso del BBCode

Codice: Seleziona tutto

[th={NUMBER}]{TEXT}[/th]
th = Trasforma in HTML

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>
th = Aiuto in linea

Codice: Seleziona tutto

[th={NUMBER}]{TEXT}[/th]
tdc = Uso del BBCode

Codice: Seleziona tutto

[tdc={NUMBER}]{TEXT}[/tdc]
tdc = Trasforma in HTML

Codice: Seleziona tutto

<td style="width: {NUMBER}%; vertical-align: top; border:1px solid #111111; padding:1px; margin:1px;">{TEXT}</td>
tdc = Aiuto in linea

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]
Esempio di tabella con larghezza 50%, con larghezza campi 20%, 50%, 30% e senza intestazione, quindi con "tdc" al posto del "th":
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
Rispondi