Innehållsförteckning
Tidigare användes HTML -tabeller för att styra webbplatsernas layout, för att behålla innehållets proportioner, skapa sektioner, dela informationen etc. För närvarande är detta en dålig praxis, faktiskt med de nya specifikationerna för varan tabell I HTML5 har alla ansträngningar gjorts så att detta används för sitt sanna syfte, det vill säga att visa data i 2-dimensionella matriser.Tabellelement
Elementet tabell är den stora behållaren och kan vara inne i alla element som är flöde, till exempel div. Inuti element tabell vi kommer att ha elementen: bildtext, colgroup, thead, tbody, tfoot, tr, th Y td, som krävs för att ge konstitutionen till vårt bord, har den nya standarden dessutom gjort följande attribut föråldrade inom tabell och måste endast användas av CSS: sammanfattning, justering, bredd, bgcolor, cellpadding, cellavstånd, ram, regler. CSS -konventionen för detta element kommer att vara följande:
tabell {display: table; gräns-kollaps: separat; gränsavstånd: 2px; kantfärg: grå; } Tr -element
Som vi väl vet består tabeller av två grundläggande element, rader och kolumner, där raderna representerar varje informationspost och kolumnerna strukturen och typen av information, låt oss se elementet som används för att skapa raderna, detta element är tr. Detta kan vara ett barn av följande element: bord, thead, tfoot, tbodySom vi kan se kan det vara ett direkt barn till ett bord eller ett barn av elementen som är barn till bordet och som definierar dess struktur. Måste innehålla 1 eller fler föremål td eller th vid behov har några av dess föråldrade attribut också placerats i den nya HTML5 -standarden, dessa är: align, char, charoff, valign, bgcolor. Som endast måste bearbetas av CSS, har CSS följande struktur som en konvention:
tr {display: tabellrad; vertikaljustera: ärva; border-color: ärva;} Td -element
Detta element definierar kolumnerna inom våra rader i tabellen, vilket gör att vi kan separera informationen i en post och därmed kunna klassificera den efter våra behov, det är ett underordnat element tr, de giltiga attributen som den kan ha är: colspan, rowspan, headers och de föråldrade attributen som nu måste hanteras i CSS är: abbr, axel, inriktning, bredd, röding, avfärgning, valign, bgcolor, höjd, nurap, omfång. CSS -konventionen för detta element är följande:
td {display: table-cell; vertikaljustera: ärva; }Vårt första bord
Låt oss omsätta det vi har sett hittills, vi vet redan att för vårt bord behöver vi rader och kolumner i vår behållare eller överordnade element, låt oss se hur vi tar det till HTML -kod:
Exempel
| Äpplen | Grön | Medium |
| Apelsiner | Orange | Stor |
Denna kod ger oss strukturen i en tabell med 2 rader med 3 kolumner, som vi ser är det enkel text, vilket leder oss att se detta resultat:
