Video: Tabellen - HTML 2024
Het maken van tabellen kan foutgevoelig en moeilijk zijn met behulp van de oudere HTML-tags. Bovendien zijn ze soms inflexibel. Het is mogelijk om tabellen te maken met een andere techniek. Het enige dat u nodig hebt, is een reeks van opeenvolgende tags om de taak uit te voeren.
Veel ontwikkelaars hebben in het verleden tabellen gebruikt voor allerlei soorten taken. Natuurlijk is er het gebruik van tabellen om gegevens weer te geven. Tabellarische arrangementen zijn echter ook handig voor het maken van formulieren om ervoor te zorgen dat de verschillende elementen op een voorspelbare manier worden uitgelijnd. Dit tweede gebruik van tabellen is problematisch omdat het sommige software zoals schermlezers verwart. Het probleem wordt het definiëren van een goed georganiseerde pagina zonder problemen te veroorzaken voor de mensen die de pagina bekijken.
Door tags te gebruiken om een tabel te maken, kunnen kijkers een tabel of een logische rangschikking van bedieningselementen met evenveel gemak zien. Deze techniek heeft ook het voordeel dat schermlezers en andere software niet verwarrend zijn.
Het definiëren van de HTML voor een tabel lijkt enigszins op het maken van een tabel met de oudere tags, behalve dat u zich geen zorgen hoeft te maken over vreemde bewerkingen van geheimzinnige tags om dit te doen. Hier is de HTML voor een tabel met een titel, kopjes en twee rijen met inhoud.
Dit is een tabel
Kop 1
Kop 2
Kop 3
Rij 1 Kolom 1
Rij 1 Kolom 2
Rij 1 Kolom 3 < Rij 2 Kolom 1
Rij 2 Kolom 2
Rij 2 Kolom 3
Merk op dat elk niveau wordt gedefinieerd met een gemakkelijk herkenbare naam, zoals Tabel, Titel, Koers, Rij en Cel. Het gebruik van deze naammethode maakt het een stuk eenvoudiger om erachter te komen wat elk niveau van de tabel zou moeten doen. U kunt online veel verschillende alternatieven voor deze aanpak vinden, maar deze basisbenadering is goed voor u.
. Tabel {weergave: tabel;}. Title {display: table-caption; text-align: center; lettertype: vet; lettertypegrootte: groter;}. Kop {display: tabelrij; lettertype: vet; text-align: center;}. Rij {weergave: tabelrij;}. Cell {display: table-cell; rand: vast; grensbreedte: dun; padding-links: 5px; padding-right: 5px;}
Let op het gebruik van de display-eigenschap. Dit is de cruciale eigenschap voor uw tabel omdat deze de browser vertelt hoe een bepaald element moet worden weergegeven. Anders is er niets vreemds aan de hand met deze stijlen. U definieert tekstkenmerken waarmee kijkers een onderscheid kunnen maken tussen verschillende tabelelementen.Cellen worden van elkaar gescheiden met behulp van een eenvoudige rand. In de volgende afbeelding ziet u hoe de tabel wordt weergegeven wanneer u deze in een browser bekijkt.
