BBCode table by Micogian

Area dedicata a tutti i BBcode per phpBB 3
Rispondi
Avatar utente
Micogian
Globalmod
Globalmod
Messaggi: 551
Iscritto il: 17/03/2016, 17:53
Link del Forum: https://www.actaplantarum.org

BBCode table by Micogian

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. Richiede un numero che corrisponde alla dimensione in percentuale 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 in percentuale. 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, come con "th" ma senza colorazione delle celle come avviene invece per il tag "th".

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; border:1px solid #111111; padding:1px; margin:1px;">{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


Avatar utente
alex75
Amministratore
Amministratore
Messaggi: 5423
Iscritto il: 23/08/2012, 23:45
Link del Forum: www.phpbb-italia.it
Località: Palermo

Re: BBCode table by Micogian

Messaggio da alex75 »

:clapi: Bel lavoro :hi:
Regolamento Forum
Le nostre guide
Se l'assistenza prestata è stata di tuo gradimento potrai contribuire aiutandoci a sostenere le spese affrontate per tenere in vita questo forum >Cliccando sul seguente Link<
Rispondi