Tabellen (tables)
Zie hoofdstuk 16, blz. 227 tm 252 in het boek HTML, XHTML en CSS van Elizabeth
Castro.
Zie hoofdstuk 7 (convertable tables), blz. 172 tm 199 in het boek Bulletproof
Webdesign
Zie hoofdstuk 6, blz. 112 tm 118 in het boek CSS Mastery
Tables ofwel tabellen verden vroeger veel gebruikt voor vormgeving en vlakverdeling
binnen een pagina. Dat is echter nooit de bedoeling geweest van tabellen. Naast
het feit dat je het risco loopt om een rommelige, onverzichtelijk HTML structuur
te produceren, levert het een hoop extra ballast op: elke keer dat een een pagina
laadt, download je opnieuw de vormgeving. En zoals je weet: voor vormgeving
hebben ze CSS ontwikkeld.
Tabellen zijn wel ergens goed voor namelijk: tabellen! Hierbij moet
je denken aan overzichten, zoals bijvoorbeeld een ledenlijst van een club, waarbij
je een kopregel hebt met velden zoals bijvoorbeeld naam, adres en woonplaats,
en daaronder de gegevens van de leden. Zo groepeer je de gegevens overzichtelijk
onder en naast elkaar.
Structuur van een tabel
Tabellen hebben altijd een vaste structuur. Opgebouwd uit rijen (table row )
en cellen (table data ). Verder heb je de mogelijkheid om de tabel te verdelen
in kolomgroepen waarbij je gebruik maakt van colgroup en caption
tags.
Of juist in horizontale secties waarbij je gebruik maakt van thead,
tbody of tfoot tags. Meer hierover vind je in hoofdstuk 16,
blz. 246, 247 en 248 HTML, XHTML en CSS.
Je kunt bij het ontwerpen van een tabel het attribuut border="1" gebruiken waardoor de structuur van de tabel ook zichtbaar wordt in de browser. Deze kun je dan later weghalen met border="0".
Onderstaand voorbeeld laat een tabel met één rij en twee cellen zien:
<table border="1"> <tr> <td>rij1 cel1</td> <td>rij1 cel2</td>
</tr> </table>
Wanneer je twee rijen wil van dezelfde grootte, dan verdubbel je de inhoud van de tabel zoals hieronder:
<table border="1"> <tr> <td>rij1 cel1</td> <td>rij1 cel2</td>
</tr> <tr> <td>rij2 cel1</td> <td>rij2 cel2</td>
</tr> </table>
Het inspringen per tag helpt om duidelijk te maken wat de (DOM) structuur ofwel de hierarchie is van de diverse elementen; zo blijft het ook overzichtelijk wanneer het geheel complexer wordt.
rowspan en colspan
Je kan ook cellen samenvoegen. Hiervoor zijn de attributen rowspan
en colspan .
Met een row- of colspan kun je zo een aantal cellen of rijen letterlijk overspannen
(samenvoegen). Van de eerste cel geef je aan dat deze een aantal cellen overspant.
Vervolgens kun je alle cellen verwijderen die verdwijnen bij het samenvoegen.
Samenvoegen mbv. een colspan:
<table border="1"> <tr> <td colspan="2">rij1 cel1</td> <!-- hier verdwijnt nu de 2e <td>; deze valt samen met rij1 cel1. --> </tr> <tr> <td>rij2 cel1</td> <td>rij2 cel2</td> </tr> </table>
Ssamenvoegen mbv. een rowspan:
<table border="1"> <tr> <td width="150">rij1 cel1</td> <!-- de volgende cel overspant 5 rijen --> <td rowspan="5">rij1,2,3,4 en 5 cel2</td>
</tr> <tr> <td>rij2 cel1</td> </tr> <tr> <td>rij3 cel1</td> </tr> <tr> <td>rij4 cel1</td> </tr> <tr> <td>rij5 cel1</td> </tr> </table>
Lijsten
Zie hoofdstuk 15, blz. 215 tm 225 in het boek HTML, XHTML en CSS van Elizabeth
Castro.
Zie hoofdstuk 2(scalable navigation), blz. 27 tm 45 in het boek Bulletproof
Webdesign waar een tabmenu wordt uitgelegd.
Zie hoofdstuk 5 (styling lists and creating nav bars), blz. 86 tm 109 in het
boek CSS Mastery
Lijsten (lists) zijn opsommingen, al dan niet met een nummer aanduiding. Over het algemeen kunnen ze gebruikt worden waar ze voor bedoeld zijn, namelijk als lijsten in tekst. Vaak worden lijsten of lists echter ook gebruikt voor het maken van menustructuren. Deze listitems kunnen dan via CSS worden 'omgebouwd' naar knoppen, zodat met een combinatie van links, lijsten en CSS een eenvoudige oplossing kan worden gebouwd.
Opbouw
De opbouw van lijsten heeft wat weg van tabellen. Allereerst moet er aangegeven
worden om wat voor soort lijst het gaat. Er zijn twee soorten lijsten:
1. georderende (ol); deze is standaard genummerd
2. ongeordende (ul); deze is standaard voorzien van bullets.
Beide tags worden gesloten gebruikt. Binnen de lijst staan de lijstelementen aangegeven met de li tag, welke de inhoud omsluit.
Voorbeeld ongeordende (ul) lijst:
<ul> <li>lijst element 1</li> <li>lijst element 2</li> <li>lijst element 3</li> </ul>
geeft als resultaat
Als de ul-tag vervangen wordt door de ol-tag zullen de bullets vervangen worden door cijfers.
Voorbeeld geordende (ol) lijst:
<ol> <li>lijst element 1</li> <li>lijst element 2</li> <li>lijst element 3</li> </ol>
geeft als resultaat
Nesten van lijsten
Je kunt lijsten ook prima nesten. Dus binnen een li (list item) kun je weer
een ul of een ol openen:
Voorbeeld geneste geordende (ol) lijst:
<ol>
<li>lijst element 1</li>
<li>lijst element 2
<!-- dit listitem bevat ook een nieuwe list en is dus 'genest' -->
<ol>
<li>genest lijst element 2.1</li>
<li>genest lijst element 2.2</li>
</ol>
</li>
<li>lijst element 3</li>
</ol>
geeft als resultaat
Validatie
(X)HTML wordt gecodeerd volgens bepaalde afspraken. Deze worden opgesteld en bewaakt door W3C, het World Wide Web Consortium. Zie ook http://www.w3c.org
Wat is valide code?
Kort gezegd: code die voldoet aan de W3C standaard.
Dus: wordt de betreffende code wel op de juiste plaats gebruikt? En wordt de
betreffende tag wel afgesloten?
Je kunt jouw code door W3C laten valideren, laten controleren op juistheid.
Zie hiervoor http://validator.w3.org/
Voorwaarde is wel dat je aangeeft in je html document waarop gecontroleerd moet
worden. Dit doe je in de eerste regel van je document. Onderstaand voorbeeld
is geschikt voor XHTML validatie:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Een andere manier om je pagina te valideren is via de Firefox browser extention 'web developer'. Deze add-on kun je downloaden en instelleren via installeren via https://addons.mozilla.org/nl/firefox/addon/60
<html xmlns="http://www.w3.org/1999/xhtml">