Problem: Simpelthen at kopiere HTML-tabeller er urent

Det er vigtigt, at personalet i virksomhederne ikke kopierer tabeller, da vi ellers vil få en masse “affald” i vores HTML-kode, som beskrevet. HTML-koden er ikke synlig i det “visuelle” område af editoren. For at redigere den skal du klikke på “Text” i WordPress Editor. Når kode blot kopieres, tager den små stykker med sig, som vi ikke ønsker. Her er et direkte eksempel fra praksis:

Eksempel – Dårlig HTML for en tabel

Der er stadig mange ting, der er kopieret her, som du ikke kan se:

<th class=”headerSort” tabindex=”0″ title=”Sortér opadgående” role=”columnheader button”>No.</th>
<th class=”headerSort” tabindex=”0″ title=”Sortér opadgående” role=”columnheader button”>Distrikt</th>.
<th class=”headerSort” tabindex=”0″ title=”Sortér stigende” role=”columnheader button”>Area</th>

Vi kan altså se, at der er nogle ting, der fjernes ved copy & paste.

Eksempel – God HTML for en tabel

Sådan ville det se rent ud:

<th>Nej.</th>
<th>Distrikt</th>
<th>Området</th>

Løsning: HTML-tabelskabelon

Du skal bruge lidt HTML eller lære det at kende. Det er bedst at gemme den kort og derefter kopiere eller redigere den:

• Tip1 : <table> og <tbody> er kun i begyndelsen </table> </tbody> kun i slutningen
• Tip 2: Brug kun <th> i den første linje, og luk den igen (th betyder “tabeloverskrift”).
• Tip 3: <tr> åbner en række og </tr> lukker den (tr kaldes “Table Row”)
• Tip 4: <td> åbner en værdi eller en boks og </td> lukker den (td betyder “Table Data”)

Her er en tabel med 3 kolonner og 3 rækker:

<tabel>
<tbody>
<tr>
<th>Overskrift 1</th>
<th>Overskrift 2</th>
<th>Overskrift 3</th>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
<td>Tekst 3</td>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
<td>Tekst 3</td>
</tr>
</tbody>
</tabel>

Sådan ser det færdige bord ud:

Et andet eksempel med 2 kolonner og 2 rækker:

<tabel>
<tbody>
<tr>
<th>Overskrift 1</th>
<th>Overskrift 2</th>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
</tr>
</tbody>
</tabel>

Et andet eksempel med 4 kolonner og 5 rækker

<tabel>
<tbody>
<tr>
<th>Overskrift 1</th>
<th>Overskrift 2</th>
<th>Overskrift 3</th>
<th>Overskrift 4</th>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
<td>Tekst 3</td>
<td>Tekst 4</td>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
<td>Tekst 3</td>
<td>Tekst 4</td>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
<td>Tekst 3</td>
<td>Tekst 4</td>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
<td>Tekst 3</td>
<td>Tekst 4</td>
</tr></tbody>
</tabel>

Tilføj flere kolonner og rækker

Du kan få flere rækker ved at starte eller lukke en ny “tabelrække” i din “tabel” <tabel>…</tabel>. Det ser således ud:

<tr>
…
</td>

Afhængigt af antallet af kolonner skal der derefter indsættes “Tabeldata”.

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