HTML -tabelle
HTML-tabelle laat webontwikkelaars toe om data in rye en kolomme te rangskik.
Voorbeeld
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Definieer 'n HTML-tabel
'n Tabel in HTML bestaan uit tabelselle binne rye en kolomme
Voorbeeld
'n Eenvoudige HTML-tabel:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Tafelselle
Elke tabelsel word gedefinieer deur 'n
<td>en 'n </td>merker.
td
staan vir tabeldata.
Alles tussen <td>en </td>is die inhoud van die tabelsel.
Voorbeeld
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Let wel: tabeldata-elemente is die datahouers van die tabel.
Hulle kan allerhande HTML-elemente bevat; teks, beelde, lyste, ander tabelle, ens.
Tafelrye
Elke tabelry begin met 'n
<tr>en eindig met 'n </tr>merker.
tr
staan vir tafelry.
Voorbeeld
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Jy kan soveel rye as wat jy wil in 'n tabel hê, maak net seker dat die aantal selle dieselfde is in elke ry.
Let wel: Daar is tye waar 'n ry minder of meer selle as 'n ander kan hê. Jy sal in 'n latere hoofstuk daaroor leer.
Tabelopskrifte
Soms wil jy hê dat jou selle opskrifte moet wees, gebruik in daardie gevalle die
<th>merker in plaas van die
<td>merker:
Voorbeeld
Laat die eerste ry tabelopskrifte wees:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
By verstek is die teks in <th>elemente vet en gesentreer, maar jy kan dit met CSS verander.
HTML-oefeninge
HTML-tabeletikette
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .