De HTML-instructies (HyperText Markup Language) die tabellen vormen die op webpagina's worden geplaatst, bieden een vrij groot aantal aanvullende parameters. Dit maakt het, in tegenstelling tot andere blokelementen, mogelijk om de grootte niet alleen in te stellen met behulp van de CSS-taal (Cascading Style Sheets of "Cascading Style Sheets"), maar ook met behulp van de HTML zelf.
instructies:
Stap 1
Gebruik het width-attribuut van de tabeltag om de breedte van de tabel in pixels op te geven. De tag (HTML-instructie) tabel bestaat uit een opening (
) delen, waartussen zich tags bevinden die de rijen en cellen van de tabel vormen. Aanvullende parameters (attributen) kunnen in de openingstag worden geplaatst, waarvan de lijst voor elke specifieke tag wordt bepaald door internationale normen. Voor de tabeltag laten deze standaarden het gebruik van het width-attribuut toe, dat de breedte van de tabel in pixels specificeert. De HTML-code van een eenvoudige tabel met zo'n tag die een breedte van 500 pixels definieert, kan er als volgt uitzien:
| 1e cel | 2e cel |
Stap 2
Voeg een %-teken toe aan de waarde van het width-attribuut als u de breedte van de tabel moet specificeren als een percentage in plaats van in pixels:
| 1e cel | 2e cel |
Houd er rekening mee dat deze percentages niet noodzakelijkerwijs gebaseerd zijn op de breedte van het browservenster. De structuur van het document is hier van belang - net zoals een geneste nestpop niet breder kan zijn dan de pop waarin deze is genest, kan 100% van de breedte van de tabel niet groter zijn dan de breedte van het bovenliggende element. Als de tabel zich bijvoorbeeld in een div-blok bevindt, wordt de breedte van dit blok als 100% genomen.
Stap 3
Gebruik de taalinstructies voor de stijlbeschrijving als u dezelfde breedte voor de tabellen op de webpagina op één plaats in de broncode wilt instellen. Om dit te doen, plaatst u eerst in het kopgedeelte van de HTML-code (tussen en) de openings- en sluitingstags die de CSS-taalinstructies beperken:
/ * CSS-instructies zullen hier zijn * /
Plaats vervolgens de volgende CSS tussen die tags: table {width: 100px;} Hier geeft tabel aan dat de beschrijving tussen de accolades moet worden toegepast op alle tabeltags die in de paginacode verschijnen. Welnu, de breedteparameter stelt de breedte in. Ook hier kun je de relatieve breedte als percentage gebruiken.
Stap 4
Geef de klassenaam op in de CSS-code en in de HTML-tabeltag als u de breedte niet voor alle tabellen wilt opgeven, maar alleen voor een of meerdere tabellen. Laten we bijvoorbeeld zeggen dat de klasse die een groep smalle tafels markeert klein is. Dan kan de beschrijving van zijn stijl er als volgt uitzien: table.tiny {width: 100px;} En de corresponderende tag van een van de tabellen in de HTML-code is als volgt:
| 1e cel | 2e cel |
