Innholdsfortegnelse
Tidligere ble HTML -tabeller brukt til å kontrollere utformingen av nettstedene, for å opprettholde proporsjonene til innholdet, lage seksjoner, dele informasjonen osv. Foreløpig er dette en dårlig praksis, faktisk med de nye spesifikasjonene for varen bord I HTML5 er det gjort alt for at dette skal brukes til det sanne formålet, det vil si å vise data i 2-dimensjonale matriser.Bordelement
Elementet bord er den store beholderen og kan være inne i ethvert element som er flyt, for eksempel div. Innvendig element bord vi vil ha elementene: bildetekst, kollegruppe, thead, tbody, tfoot, tr, th Y td, som er påkrevd for å gi grunnloven til vårt bord, har den nye standarden i tillegg gjort følgende attributter foreldet innen bord og må utelukkende brukes av CSS: oppsummering, justering, bredde, bgcolor, cellematte, celleavstand, ramme, regler. CSS -konvensjonen for dette elementet vil være dette:
tabell {display: table; grense-kollaps: separat; kantlinjeavstand: 2px; kantfarge: grå; } Tr element
Som vi godt vet, består tabeller av to grunnleggende elementer, rader og kolonner, der radene representerer hver informasjonspost og kolonnene strukturen og typen informasjon, la oss se elementet som ble brukt til å lage radene, dette elementet er tr. Dette kan være et barn av følgende elementer: bord, tead, tfoot, tbodySom vi kan se, kan det være et direkte barn av et bord eller et barn av elementene som er barn av bordet og som definerer dets struktur. Må inneholde 1 eller flere elementer td eller th Etter behov har noen av de foreldede attributtene også blitt plassert i den nye HTML5 -standarden, disse er: align, char, charoff, valign, bgcolor. Som må arbeides utelukkende av CSS, sa CSS har følgende struktur som en konvensjon:
tr {display: tabell-rad; loddrett justering: arve; border-color: arve;} Td element
Dette elementet definerer kolonnene i radene våre i tabellen, som lar oss skille informasjonen i en post og dermed kunne klassifisere den i henhold til våre behov, det er et underordnet element tr, de gyldige attributtene den kan ha er: colspan, rowspan, headers og de foreldede attributtene som nå må håndteres i CSS er: abbr, akse, justere, bredde, røye, utrulling, valign, bgcolor, høyde, nårap, omfang. CSS -konvensjonen for dette elementet er som følger:
td {display: table-cell; loddrett justering: arve; }Vårt første bord
La oss praktisere det vi har sett så langt, vi vet allerede at for tabellen vår trenger vi rader og kolonner i beholderen eller overordnet element, la oss se hvordan vi tar det til HTML -kode:
Eksempel
| Epler | Grønn | Medium |
| Appelsiner | oransje | Stor |
Denne koden gir oss strukturen til en tabell med 2 rader med 3 kolonner, som vi ser er det enkel tekst, som får oss til å se dette resultatet:
