HTML-tabel opmaken: Sjabloon voor kaders, kolommen zonder kaders

Opmaak van HTML tabellen – Vandaag een kleine basis uit de praktijk. Veel klanten wilden hun eigen teksten maken met hun werknemers in WordPress. Om ervoor te zorgen dat de tekst geoptimaliseerd is voor zoekmachines, worden verschillende kleine kenmerken toegevoegd. Dit kunnen bijvoorbeeld foto’s uit de mediabibliotheek zijn, maar ook Youtube video embeddings. Het simpelweg invoegen van tabellen met copy & paste brengt een hoop HTML snippets met zich mee die je niet in je eigen content management systeem wilt hebben. Laten we vandaag eens kijken naar een voorbeeld van een eenvoudige HTML-tabel die iedereen zelf kan genereren en wijzigen.

Probleem: gewoon HTML-tabellen kopiëren is onzuiver

Het is belangrijk dat het personeel in bedrijven geen tabellen kopieert, anders hebben we een hoop “afval” in onze HTML-code, zoals beschreven. De HTML-code is niet zichtbaar in het “visuele” gedeelte van de editor. Om het te bewerken moet je in de WordPress Editor op “Tekst” klikken. Wanneer code gewoon wordt gekopieerd, neemt het kleine stukjes mee die we niet willen. Hier is een direct voorbeeld uit de praktijk:

Voorbeeld – Slechte HTML van een tabel

Er zijn hier nog veel dingen gekopieerd die je niet kunt zien:

<th class=”headerSort” tabindex=”0″ title=”Sorteer opklimmend” role=”columnheader button”>Nee.</th>
<th class=”headerSort” tabindex=”0″ title=”Sorteer oplopend” role=”columnheader button”>District</th>.
<th class=”headerSort” tabindex=”0″ title=”Sort Ascending” role=”columnheader button”>Area</th>

We zien dus dat sommige dingen worden weggehaald door kopiëren en plakken.

Voorbeeld – Goede HTML van een tabel

Zo zou het er schoon uitzien:

<th>Nee.</th>
<th>District</th>
<th>Area</th>

Oplossing: HTML-tabel sjabloon

Je moet een beetje HTML gebruiken of het leren kennen. Het is het beste om het even op te slaan en het dan te kopiëren of te bewerken:

• Tip1 : <table> en <tbody> staan alleen aan het begin </table> </tbody> alleen aan het eind
• Tip 2: Gebruik <th> alleen in de eerste regel en sluit die weer af (th betekent “tabelkop”).
• Tip 3: <tr> opent een rij en </tr> sluit hem (tr heet “tabelrij”)
• Tip 4: <td> opent een waarde of een vak en </td> sluit het (td betekent “Tabelgegevens”)

Hier is een tabel met 3 kolommen en 3 rijen:

<table>
<tbody>
<tr>
<th>Kop 1</th>
<th>Kop 2</th>
<th>Kop 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>

Zo ziet de afgewerkte tafel eruit:

Rubriek 1	Rubriek 2	Rubriek 3
Tekst 1	Tekst 2	Tekst 3
Tekst 1	Tekst 2	Tekst 3

Nog een voorbeeld met 2 kolommen en 2 rijen:

<table>
<tbody>
<tr>
<th>Kop 1</th>
<th>Kop 2</th>
</tr>
<tr>
<td>Tekst 1</td>
<td>Tekst 2</td>
</tr>
</tbody>
</tabel>

Een ander voorbeeld met 4 kolommen en 5 rijen

<table>
<tbody>
<tr>
<th>Kop 1</th>
<th>Kop 2</th>
<th>Kop 3</th>
<th>Kop 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>

Meer kolommen en rijen toevoegen

U kunt meer rijen krijgen door een nieuwe “Tabel Rij” te starten of te sluiten binnen uw “Tabel” <table>…</table>. Dit ziet er zo uit:

<tr>
…
</td>

Afhankelijk van het aantal kolommen moeten dan de “Tabelgegevens” worden ingevoegd.

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