Formater HTML-tabellen: Skabelon til rammer, kolonner uden rammer

Formatering af HTML-tabeller – I dag en lille grundlæggende fra praksis. Mange kunder ønskede at oprette deres egne tekster med deres medarbejdere i WordPress. For at sikre, at teksten er optimeret til søgemaskinerne, er der tilføjet forskellige små funktioner. Det kan f.eks. være billeder fra mediebiblioteket, men også Youtube-videoindlejringer. Simpelthen at indsætte tabeller med copy & paste indebærer en masse HTML-snippets, som du ikke ønsker i dit eget indholdsstyringssystem. Lad os i dag se på et eksempel på en simpel HTML-tabel, som alle kan generere og ændre selv.

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:

Udgiftsområde 1	Udgiftsområde 2	Udgiftsområde 3
Tekst 1	Tekst 2	Tekst 3
Tekst 1	Tekst 2	Tekst 3

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>