Basiese Tabelle
<table> begin 'n tabel
<tr> begin 'n tabelry
<td> begin 'n tabelsel
</td> eindig 'n tabelsel
</tr> eindig 'n tabelry
</table> eindig 'n tabel
Ek is mal oor tabelle. Tabelle soos wat jy in 'n woordverwerker of spreistaat program optrek. Maar ook die tabelle wat jy in HTML gebruik. Waar, vra jy? Nog geen tabelle op hierdie blaaie gesien nie? Wel, AL my blaaie bevat tabelle. Hulle het net nie rame om nie, daarom sien jy dit nie.
Nou wat maak mens dan met tabelle in HTML as jy dit nie kan sien nie? Jy gebruik tabelle om die uitleg van jou blaaie te beheer. Jy kan dit ook gebruik vir die doel wat dit in woordverwerkers en spreistate gebruik word.
In HTML is tabelle buigbaar. Jy kan dit laat strek om die hele blad op te neem, ongeag van hoe groot die gebruiker sy blad maak. Jy kan jou tabelle vas maak en die bladsy in 'n spesifieke vorm in dwing. Die keuse is joune, jy is in beheer.
Kom ons begin by die basiese dinge, wat kan jy met tabelle doen en wat nie.
Die eerste stap is om te verstaan watse vorms kan jy met tabelle maak, dus begin ons met 'n eenvoudige uitleg:
Dit kan gedoen word met tabelle. Kom ons verwyder nou van die lyne:
Dit is ook moontlik met tabelle, maar die volgende is nie moontlik nie:
As jy die uitleg kan teken, en dit lyk nie soos 'n L nie, kan jy dit in 'n tabel plaas. As jy van die begin af verstaan wat jy kan doen en nie kan doen nie, sal jy jouself uiteindelik baie moeite spaar.
Die basiese beginsels van tabelle
'n Tabel bestaan uit drie basiese dinge:
| Die tabel: | <table> | Moet weer gesluit word met 'n </table>-merker |
| Die tabel ry: | <tr> | Moet weer gesluit word met 'n </tr>-merker |
| Die tabel sel: | <td> | Moet weer gesluit word met 'n </td>-merker |
So terloops, hoekom is die tabelsel-merker <td>? Dit staan vir "table data". Hoekom die programmeerders wat die merkers ontwikkel het, <td> gebruik het en nie <tc> vir "table cell" nie, sal net hulle weet.
Die begrip wat jy moet onthou, is dat die <td>- en </td>-merkers ALTYD tussen die <tr>- en </tr>-merkers geplaas word, wat weer op hulle beurt ALTYD tussen die <table>- en </table>-merkers geplaas word. Die inligting wat jy in die tabel wil vertoon, word tussen die <td>- en </td>-merkers geplaas.
Genoeg gepraat, kom ons skep ons eerste tabel. As jy in jou HTML-dokument skryf:
<table border="1">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>
|
sal dit soos volg vertoon:
Die eerste tabelry bevat sel 1 en 2, die tweede ry sel 3 en 4. Tabelrye loop altyd horisontaal. Om die tabel te kan sien, het ek 'n border="1" by die <table>-merker gevoeg. Dit skakel die raam van die tabel aan. Jy kan hierdie raam so wyd maak soos jy wil deur 'n groter waarde te spesifiseer.
"Colspan" en "rowspan"
Jy kan ook 'n sel in een ry oor twee selle in 'n volgende ry laat strek. Daarvoor gaan jy 'n colspan="?" by sel 1 se <td>-merker voeg. Jou HTML-kode gaan so lyk:
<table border="1">
<tr>
<td colspan="2">Sel 1</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>
|
Dit sal soos volg vertoon:
Sien jy dat daar in die eerste ry nou net een sel is? Jy kan ook die sel vertikaal oor twee rye laat strek. Daarvoor gaan jy 'n rowspan="?" by sel 1 se <td>-merker voeg. Jou HTML-kode gaan so lyk:
<table border="1">
<tr>
<td rowspan="2">Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
</tr>
</table>
|
Dit sal soos volg vertoon:
Onthou: Rye loop horisontaal en kolomme vertikaal. As jy dus 'n sel horisontaal wil strek, gebruik jy colspan="?". As jy 'n sel vertikaal wil strek, gebruik jy rowspan="?".
OM OP TE SOM:
- <table> begin 'n tabel.
- <tr> begin 'n tabelry.
- <td> begin 'n tabelsel.
- </td> eindig 'n tabelsel.
- </tr> eindig 'n tabelry.
- </table> eindig 'n tabel.
- Tabelle word gebruik om die uitleg van jou blaaie te beheer.
- As jy die uitleg kan teken, en dit lyk nie soos 'n L nie, kan jy dit in 'n tabel plaas.
- Die begrip wat jy moet onthou, is dat die <td>- en </td>-merkers ALTYD tussen die <tr>- en </tr>-merkers geplaas word, wat weer op hulle beurt ALTYD tussen die <table>- en </table>-merkers geplaas word. Die inligting wat jy in die tabel wil vertoon, word tussen die <td>- en </td>-merkers geplaas.
- Om die tabel te kan sien, voeg jy 'n border="1" by die <table>-merker.
- Rye loop horisontaal en kolomme vertikaal.
- Om 'n sel horisontaal te strek, gebruik jy colspan="?".
- Om 'n sel vertikaal te strek, gebruik jy rowspan="?".
|
Indien jy voel jy het die basiese tabelle onder die knie, gaan gerus na die volgende les oor gevorderde tabelle.
| 
