Eenvoudige codegenerator voor tabellen
Als je zelf code schrijft, weet je dat het opzetten van een tabel een tijdrovend klusje is. Een stukje gereedschap dat de structuur voor een tabel kan maken bewijst dan goede diensten. Op deze pagina presenteer ik een eenvoudige code generator voor tabellen. Voor de meeste toepassingen is dat ruim voldoende.
Druk op de knop hiernaast om de tabelgenerator te starten. De gegenereerde code verschijnt in een tekst-veld. Die kun je daaruit kopiëren en in je eigen code plakken
De generator maakt de volgende dingen:
- Tags voor de tabel zelf.
- Tags voor een header-rij, een footer-rij en voor een bijschrift.
- Een paar van de 'oude' attributen die in HTML 4 beschikbaar waren (maar die het in HTML5 nog steeds doen), te weten: cellspacing, cellpadding, border, frame en rules.
- CSS class- en id-naam voor de hele tabel, ten behoeve van opmaak en referentie.
- CSS class-namen voor kolommen.
De generator maakt niet:
- CSS-code voor opmaak van de tabel.
- Samengevoegde rijen en/of kolommen (rowspan, colspan).
- CSS class- id-namen voor individuele rijen en cellen.
- Data om de tabel mee te vullen
Uit praktische overwegingen zijn de tabel-afmetingen beperkt tot 5 rijen en 5 kolommen.
De tabel-structuur ziet er zo uit:
<table>
<caption>Overzicht van alles</caption>
<thead> <!-- Eerste regel van de tabel -->
<tr>
<th>titel kolom 1</th>
<th>titel kolom 2</th>
</tr>
</thead>
<tfoot> <!-- Laatste regel van de tabel -->
<tr>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody> <!-- Aantal regels met de tabel data -->
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
