Formato tabella HTML: Template per le cornici, colonne senza cornici

Formattazione delle tabelle HTML – Oggi una piccola base dalla pratica. Molti clienti volevano creare i loro testi con i loro dipendenti in WordPress. Per garantire che il testo sia ottimizzato per i motori di ricerca, vengono aggiunte varie piccole caratteristiche. Queste possono essere foto dalla libreria multimediale, per esempio, ma anche embedding di video di Youtube. Inserire semplicemente delle tabelle con il copia & incolla implica un sacco di snippet HTML che non volete nel vostro sistema di gestione dei contenuti. Oggi, diamo un’occhiata a un esempio di una semplice tabella HTML che chiunque può generare e modificare da solo.

Problema: copiare semplicemente le tabelle HTML non è pulito

È importante che il personale delle aziende non copi le tabelle, altrimenti avremo un sacco di “spazzatura” nel nostro codice HTML, come descritto. Il codice HTML non è visibile nell’area “visiva” dell’editor. Per modificarlo devi cliccare su “Testo” nell’editor di WordPress. Quando il codice viene semplicemente copiato, si porta dietro dei piccoli frammenti che non vogliamo. Ecco un esempio diretto dalla pratica:

Esempio – Cattivo HTML di una tabella

Ci sono ancora molte cose copiate qui che non si vedono:

<th class=”headerSort” tabindex=”0″ title=”Sort ascending” role=”columnheader button”>No.</th>
<th class=”headerSort” tabindex=”0″ title=”Sort ascending” role=”columnheader button”>Distretto</th>.
<th class=”headerSort” tabindex=”0″ title=”Sort Ascending” role=”columnheader button”>Area</th>

Così vediamo che alcune cose vengono tolte dal copia & incolla.

Esempio – Buon HTML di una tabella

Questo è il modo in cui sembrerebbe pulito:

<th>No.</th>
<th>Distretto</th>
<th>Area</th>

Soluzione: HTML Table Template

Devi usare un po’ di HTML o imparare a conoscerlo. È meglio salvarlo brevemente e poi copiarlo o modificarlo:

  • Suggerimento1 : <table> e <tbody> sono solo all’inizio </table> </tbody> solo alla fine
  • Suggerimento 2: usate <th> solo nella prima riga e chiudetela di nuovo (th significa “titolo della tabella”).
  • Suggerimento 3: <tr> apre una riga e </tr> la chiude (tr si chiama “Table Row”)
  • Suggerimento 4: <td> apre un valore o una casella e </td> la chiude (td significa “Dati della tabella”)

Ecco una tabella con 3 colonne e 3 righe:

<table>
<tbody>
<tr>
<th>Testa 1</th>
<th>Capo 2</th>
<th>Capo 3</th>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
</tr>
</tbody>
</tabella>

Questo è l’aspetto del tavolo finito:

Rubrica 1 Rubrica 2 Rubrica 3
Testo 1 Testo 2 Testo 3
Testo 1 Testo 2 Testo 3

Un altro esempio con 2 colonne e 2 righe:

<table>
<tbody>
<tr>
<th>Testa 1</th>
<th>Capo 2</th>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
</tr>
</tbody>
</tabella>

Un altro esempio con 4 colonne e 5 righe

<table>
<tbody>
<tr>
<th>Testa 1</th>
<th>Capo 2</th>
<th>Capo 3</th>
<th>Capo 4</th>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
<td>Testo 4</td>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
<td>Testo 4</td>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
<td>Testo 4</td>
</tr>
<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
<td>Testo 4</td>
</tr></tbody>
</tabella>

Aggiungere più colonne e righe

Puoi ottenere più righe iniziando o chiudendo una nuova “riga di tabella” all’interno della tua “tabella” <table>…</table>. Questo assomiglia a questo:

<tr>

</td>

A seconda del numero di colonne, bisogna poi inserire i “Dati della tabella”.

<tr>
<td>Testo 1</td>
<td>Testo 2</td>
<td>Testo 3</td>
<td>Testo 4</td>
</tr>