HTML/Basiscursus/Tabellen: verschil tussen versies

'''Tabellen''' kunnen in HTML worden gebruikt om data overzichtelijk weer te geven in rijen en kolommen. Vroeger werd deze techniek ook gebruikt om de lay-out van een HTML -pagina te bepalen, deze techniek is echter sterk af te raden, beter is het om gebruik te maken van CSS.

*[[HTML/td-tag|td-tag]]: "Table Data"; Een nieuwe data celdatacel,

We hebben één tabel (<table>) gemaakt met daarin drie rijen (<tr>). In de eerste rij bevindbevindt zich een lege cel (<td>) en twee titelcellen voor de kolommen (<th>). In de tweede en derde rij bevindbevindt zich een titelcel gevolgd door twee datacellen.

Soms is het nodig om cellen samen te voegen zodat deze meerdere rijen of kolommen beslaan, dit is mogelijk met hetde colspan- en rowspan attribuut-attributen.

Let in de voorbeelden goed op hoeveel keer hetde <th>- en <td>-elementen element wordtworden gebruikt.

| Titel=Gebruik colspan- en rowspan -attribuut

Met de [[HTML/col-tag|col-tag]] kunt u in één keer attributen toepassen op alle tabelcellen in deze kolom, zo kunt u met behulp van het class -element een (beperkt aantal) CSS -regels op alle cellen toepassen, bijvoorbeeld:

| Titel=Gebruik col -element

Deze tabel wordt samen met de CSS -regel .naam {color: honeydew;} als volgt getoond in een browser:

Het col element kan los voorkomen of in een colgroup -element. U kunt deze twee niet door elkaar gebruiken; als er een colgroup -element wordt gebruikt moeten alle col -elementen genest worden in colgroup -elementen.

Om uw tabel een titletitel te geven kunt u het [[HTML/caption-tag|caption -element]] gebruiken direct na het openen van de tabel, bijvoorbeeld:

| Titel=Gebruik <caption> -element

Er zijn 3 verschillende rijgroepen; thead, tbody en tfoot. thead bevat rijen met titelcellen die informatie geven over deze kolommen. Hetzelfde geldgeldt voor tfoot (totaalaantallen bijvoorbeeld), tbody bevat de data. Door met rijgroepen te werken is het bijvoorbeeld mogelijk een scrollbar in de tbody te tonen terwijl de titelcellen blijven staan.

U kunt kolommen groeperen met behulp van het colgroup -element. Als u een colgroup -element gebruikt kunt u geen losse col -elementen meer gebruiken.

| Titel=Gebruik summary -attribuut

Een screenreader leest voor elke datacel de bijbehorende headercel op, bijvoorbeeld: Naam van het dier: kangoroekangoeroe, Klasse: Zoogdieren.

Bij lange tabellen is het vervelend om constant "Naam van het dier" te horen, met het abbr -attribuut kan een kortere naam worden gegeven.

| Titel=Gebruik abbr -attribuut

Als er titelcellen (<th>) worden gebruikt in zowel de eerste rij als in de eerste kolom kan die problemen opleveren voor screenreaders, dit is op te lossen met het scope -attribuut. Met het scope -attribuut kunt u duidelijk maken of een titelcel informatie geeft over de rij of over de kolom.

| Titel=Gebruik scope -attribuut

| Titel=Gebruik scope -attribuut (2)