Tabellen maken in HTML
Tabellen maken in HTML is handig voor een overzicht van sites of gebruikers. Maar hoe werken ze nu eigenlijk en hoe moet je ze toepassen. In deze tutorial leg ik uit hoe je een tabel maakt in HTML.| Cel 1 | Cel 2 |
| Cel 3 | Cel 4 |
Dit is een kleine voorbeeldtabel. Cel 1 en cel 2 staan op dezelfde rij en cel 1 en cel 3 staan in dezelfde kolom.
De code voor deze table is...
<table border="1"><tbody>
<tr><td>
Cel 1
</td><td>
Cel 2
</td></tr><tr><td>
Cel 3
</td><td>
Cel 4
</td></tr>
</tbody></table>
| <table border='1'> | opent een tabel met als eigenschap: border=1. Standaard is de border 0. |
| <tbody> | opent een tbody, in een tbody kunnen we gegevens ingeven. |
| <tr> | opent een rij waarin we cellen kunnen aangeven. |
| <td> | opent een cel in een rij waarin we gegevens kunnen invoeren (in dit voorbeeld Cel 1/Cel 2/...) |
| </td> | sluit een cel. |
| </tr> | sluit een rij. |
| </tbody> | sluit een tbody. |
| </table> | sluit een table. |
Met deze kennis kun je al een tabel maken. Maar wat als je nu cellen in mekaar wilt zetten (mergen)? Dat kan natuurlijk ook...
| Cel 1 + Cel 2 | |
| Cel 3 | Cel 4 |
<table border="1"><tbody>
<tr><td colspan="2">
Cel 1 + Cel 2
</td></tr><tr><td>
Cel 3
</td><td>
Cel 4
</td></tr>
</tbody></table>
| Opent een td die samengesmolten wordt met de td rechts van hem. | |||
|
Cel 1 + Cel 3 | Cel 2 |
| Cel 4 |
<table border="1"><tbody>
<tr><td rowspan="2">
Cel 1 +<br />Cel 3
</td><td>
Cel 2
</td></tr><tr><td>
Cel 4
</td></tr>
</tbody></table>
| Opent een td die samengesmolten wordt met de td onder van hem. |
Hopelijk was deze tutorial duidelijk genoeg :)
