Inhoudsopgave
In het verleden werden HTML-tabellen gebruikt om de lay-out van de sites te controleren, om de verhoudingen van de inhoud te behouden, secties te maken, de informatie te verdelen, enz. Momenteel is dit een slechte gewoonte, in feite met de nieuwe specificaties van het item tafel In HTML5 is er alles aan gedaan om dit te gebruiken voor het echte doel, namelijk het weergeven van gegevens in 2-dimensionale arrays.Tafelelement
Het element tafel is de grote container en kan zich in elk element bevinden dat stroming is, zoals de div. Binnenelement tafel we zullen de elementen hebben: bijschrift, colgroup, hoofd, tbody, tfoot, tr, th Y td, die nodig zijn om de grondwet aan onze tafel te geven, bovendien heeft de nieuwe standaard de volgende attributen achterhaald binnen tafel en moeten uitsluitend door CSS worden gebruikt: samenvatting, uitlijnen, breedte, bgcolor, cellpadding, cellpacing, frame, regels. De CSS-conventie voor dit element is deze:
tafel {display: tafel; border-collapse: apart; randafstand: 2px; randkleur: grijs; } Tr-element
Zoals we weten, zijn tabellen samengesteld uit twee basiselementen, rijen en kolommen, waarbij de rijen elk informatierecord vertegenwoordigen en de kolommen de structuur en het type van de informatie, laten we eens kijken naar het element dat wordt gebruikt om de rijen te maken, dit element is de tr. Dit kan een kind zijn van de volgende elementen: tafel, hoofd, tfoot, tbodyZoals we kunnen zien, kan het een direct kind van een tabel zijn of een kind van de elementen die kinderen van de tafel zijn en die de structuur ervan bepalen. Moet 1 of meer items bevatten td of e indien van toepassing, zijn enkele van de verouderde attributen ook in de nieuwe HTML5-standaard geplaatst, dit zijn: uitlijnen, char, charoff, valign, bgcolor. Die uitsluitend door CSS moeten worden gewerkt, heeft deze CSS als conventie de volgende structuur:
tr {display: tabelrij; verticaal uitlijnen: overnemen; randkleur: erven;} Td-element
Dit element definieert de kolommen binnen onze rijen in de tabel, waardoor we de informatie binnen een record kunnen scheiden en het dus kunnen classificeren volgens onze behoeften, het is een kind van het element tr, de geldige attributen die het kan hebben zijn: colspan, rowspan, koppen en de verouderde attributen die nu in de CSS moeten worden verwerkt, zijn: abbr, as, uitlijnen, breedte, char, charoff, valign, bgcolor, hoogte, nowrap, scope. De CSS-conventie voor dit element is als volgt:
td {display: tabelcel; verticaal uitlijnen: overnemen; }Onze eerste tafel
Laten we in de praktijk brengen wat we tot nu toe hebben gezien, we weten al dat we voor onze tabel rijen en kolommen nodig hebben in onze container of bovenliggend element, laten we eens kijken hoe we het naar HTML-code brengen:
Voorbeeld
| Appels | Groente | Medium |
| Sinaasappels | Oranje | Groot |
Deze code geeft ons de structuur van een tabel met 2 rijen met 3 kolommen, aangezien we zien dat het eenvoudige tekst is, waardoor we dit resultaat zien:
