Indholdsfortegnelse
Tidligere blev HTML -tabeller brugt til at styre layoutet på webstederne for at opretholde indholdets proportioner, oprette sektioner, opdele oplysningerne osv. I øjeblikket er dette en dårlig praksis, faktisk med de nye specifikationer for varen bord I HTML5 er der gjort alt for at dette bruges til sit sande formål, nemlig at vise data i 2-dimensionelle arrays.Bordelement
Elementet bord er den store beholder og kan være inde i ethvert element, der er flow, såsom div. Indvendigt element bord vi vil have elementerne: billedtekst, kollegruppe, thead, tbody, tfoot, tr, th Y td, som er nødvendige for at give forfatningen til vores bord, har den nye standard desuden gjort følgende attributter forældede inden for bord og skal udelukkende bruges af CSS: opsummering, justering, bredde, bgcolor, cellepadding, celleafstand, ramme, regler. CSS -konventionen for dette element vil være dette:
tabel {display: tabel; grænsekollaps: adskilt; grænseafstand: 2px; kantfarve: grå; } Tr element
Som vi godt ved, er tabeller sammensat af to grundlæggende elementer, rækker og kolonner, hvor rækkerne repræsenterer hver informationspost og kolonnerne strukturen og typen af informationen, lad os se det element, der blev brugt til at oprette rækkerne, dette element er tr. Dette kan være et barn af følgende elementer: bord, hoved, tfoot, tbodySom vi kan se, kan det være et direkte barn af et bord eller et barn af elementerne, der er bordets børn, og som definerer dets struktur. Skal indeholde 1 eller flere varer td eller th efter behov er nogle af dets forældede attributter også blevet placeret i den nye HTML5 -standard, disse er: align, char, charoff, valign, bgcolor. Som udelukkende skal arbejdes af CSS, sagde CSS følgende struktur som en konvention:
tr {display: tabel-række; lodret justering: arve; border-color: arve;} Td element
Dette element definerer kolonnerne inden for vores rækker i tabellen, hvilket giver os mulighed for at adskille oplysningerne i en post og dermed være i stand til at klassificere dem efter vores behov, det er et element af elementet tr, de gyldige attributter, den kan have, er: colspan, rowspan, headers og de forældede attributter, der nu skal håndteres i CSS, er: abbr, akse, justere, bredde, forkulning, udrulning, valign, bgcolor, højde, nurap, omfang. CSS -konventionen for dette element er som følger:
td {display: tabel-celle; lodret justering: arve; }Vores første bord
Lad os praktisere det, vi har set hidtil, vi ved allerede, at vi til vores tabel har brug for rækker og kolonner i vores container eller overordnede element, lad os se, hvordan vi tager det til HTML -kode:
Eksempel
| Æbler | Grøn | Medium |
| Appelsiner | orange | Stor |
Denne kode giver os strukturen i en tabel med 2 rækker med 3 kolonner, da vi ser det er simpel tekst, som får os til at se dette resultat:
