Tabeller i HTML5 - del 2

Vi har redan sett hur man skapar en grundläggande text-only-tabell utan stilar i del 1 av denna handledning, även om det på kodnivå är bra, på en visuell nivå visar det oss inte den organisatoriska kraft som ett bord kan ge våra data, På våra webbplatser många gånger måste vi klassificera data, element, information i allmänhet, för detta kan vi använda en välkonstruerad och representativ tabell.
Elementet
Elementet th tillåter oss att skapa rubriker till vårt bord för att visuellt identifiera våra kolumner såväl som td är son till tr. Dess attribut är: colspan, rowspan, scope, rubriker, de föråldrade attributen i denna HTML5 -specifikation är följande: abbr, axel, inriktning, bredd, röding, avfärgning, valign, bgcolor, höjd och nowrap, omfång, om vi tittar i detalj fungerar det här elementet väldigt likt td, dess CSS -konvention är följande:

 th {display: table-cell; vertikaljustera: ärva; font-weight: fet; text-align: center; } 

Låt oss nu se hur vi använder det för att bygga ett bord med lite mer formatering än vi tidigare hade gjort:

 Exempel 
 
 
Rang
Jams
 
Färg
Storlek
 

 
 
Favorit:
 
Äpplen
Grön
Medium
 

 
 
2: a favoriten:
 
Apelsiner
Orange
Stor
 

 
 
Tredje favoriten:
 
Granatäpple
Ett slags grönrött
 
Varierar från medelstort till stort
 

 

 

Som vi kunde se i detta exempel kan vi placera elementet th inom tr, dess funktion liknar td, bara att detta används för att generera rubriker, den visade koden ger oss följande tabell som ett resultat:

Vårt bord börjar se mycket bättre ut, men det är fortfarande väldigt grundläggande, och informationen är inte så tydlig som den borde vara, till exempel överensstämmer inte innehållet på ett bra sätt, och visuellt är det svårt att skilja vilket tillhör vilket, för Vi ska använda CSS och vi kommer att se hur vi i stor utsträckning kommer att lösa denna situation.
För detta kommer vi att använda följande:

Vi har två förutsättningar för th, båda börjar med att berätta att de är barn till trMen den första vi placerar att dess inriktning kommer att vara till vänster, den kommer att ha vita bokstäver och dess bakgrund kommer att vara grå, i den andra anger vi att när det bara finns en th för varje tr kommer vi att justera den till höger , kommer vi att placera en ljusare grå bakgrund och bokstäverna blir mörkare grå.
Låt oss se den resulterande koden:

 Exempel [b] [/ b] 
 
 
Rang
Jams
Färg
Storlek
 

 
 
Favorit:
Äpplen
Grön
Medium
 

 
 
2: a favoriten:
Apelsiner
Orange
Stor
 

 
 
Tredje favoriten:
Granatäpple
Ett slags grönrött
 
Varierar från medelstort till stort
 

 

 

Låt oss nu se resultatet av denna kod och vi kommer att märka hur vårt bord på detta sätt är mycket mer organiserat och vi kan skilja till vilken kolumn varje data tillhör.

Som vi kan se ger detta exempel oss en vision om vad ett bord ska vara, men det är fortfarande långt ifrån perfekt. Vad skulle hända till exempel om vi lägger till annat th, i informationsraden? Vi skulle förlora formatet, vilket skulle få oss att arbeta varje gång bordet ändrar sin struktur.
För att undvika detta finns det tre element som logiskt delar bordet, så att säga, dessa är: thead, tbody, tfoot. Med det vi har sett kan vi förstå utan mycket teoretisk förklaring, så låt oss gå vidare till ett praktiskt exempel på detta.

 Exempel 
 [b] 

 [/ b] 

 [b] [/ b] 

 [b] 

 [/ b] 
 
Rang
Jams
Färg
Storlek
 

 
 
Rang
Jams
Färg
Storlek
 
 
Favorit:
Äpplen
Grön
Medium
 

 
 
2: a favoriten:
Apelsiner
Orange
Stor
 

 
 
Tredje favoriten:
Granatäpple
 
Ett slags grönrött
Varierar från medelstort till stort
 

 

 

 

Låt oss nu se resultatet av detta:

Som vi kan se är det i huvudsak det första vi hade gjort, nu längst ner i tabellen ser vi att vi har rubriken lika, men i koden såg vi hur de är två olika strukturer, liksom innehållet.
Med detta avslutar vi vår HTML5 -tabellhandledning, vi behöver bara göra några övningar och öva på det vi har lärt oss.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng