Tabel HTML | Met deze uitleg helemaal niet moeilijk :)!

Via een van mijn cursisten kreeg ik de opmerking dat ze tabellen lastig vond en dat ze door de bomen het bos niet meer zag. Ik weet nog dat ik er ook wel een tijdje over gedaan heb om alles door te krijgen maar dat het uiteindelijk echt heel simpel is 🙂

Ik heb daarom een kleine extra uitleg gemaakt hoe de tabel html basis code er uit moet zien.

Uitleg tabel html code

De code hieronder is geschreven met tags + stukjes uitleg tussendoor. Wanneer je de code uitprobeert moet je natuurlijk wel even de stukken uitleg weghalen anders zal het er heel gek uitzien 🙂

<table> 

Met de < table > tag geef je aan – hey er komt een tabel aan!! – Onderaan sluit je hem uiteraard weer af, net als de meeste tags.</span>


<tr> 

De TR is afkorting voor: Table Row – Tabel rij – Dit is een rij van links naar rechts. Uiteraard weer afsluiten!


<td> 

Hier is waar het allemaal gebeurd! TD betekent: Table Data. Alle code in de eerste cel moet hier komen te staan

Cel 1 – rij 1 

</td> 

De cel sluit je af met < /td > 


</tr> 

Dan sluit je de tabel rij < /tr >



<tr> 

En hier start je een nieuwe tabel rij


<td> 

Nieuwe cel

Cel 1 – rij 2

</td> 

Afsluiten cel 

Wil je meerdere cellen in 1 rij? Dan doe je meerdere < td > </td> 


<td> 

Cel 2 – rij 2

</td>


<td>

Cel 3 – rij 2

</td>


</tr>

</table>

Met een beetje style erbij zou de bovenstaande tabel er dan zo uit zien:

Tabel HTML

Dus de volgorde is altijd:

<table><tr><td></td></tr></table>

De < tr > en de < td > zijn afhankelijk van hoeveel rijen en cellen er zullen zijn.

Snel een tabel stijlen

Met de style=”” kun je snel de tabel stijlen als je dat niet in de externe stylesheet wilt doen:

<table style="text-align:center;width:500px; margin-left:auto; margin-right:auto; border: 2px solid #000;">

<tr>

<td style="font-weight: bold; border: 1px solid #000; color:#ff0080;">
Dit is dikgedrukte tekst
</td>

</tr>

</table> 

Dit zal er dan op deze manier uit komen te zien:

Tabel html voorbeeld met style erin.

Niet gelukt?

Wil het toch niet lukken of heb je nog andere vragen? Laat dan hieronder een reactie achter en dan probeer ik je zo snel mogelijk verder te helpen. Ook als je zelf nog tips hebt zie ik die natuurlijk graag tegemoet komen 🙂

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *