Tabulas HTML5 - 1. daļa

Satura rādītājs
Agrāk HTML tabulas tika izmantotas, lai kontrolētu vietņu izkārtojumu, lai saglabātu satura proporcijas, izveidotu sadaļas, sadalītu informāciju utt. Patlaban tā ir slikta prakse, patiesībā ņemot vērā preces jaunās specifikācijas tabula HTML5 ir darīts viss iespējamais, lai tas tiktu izmantots tā patiesajam mērķim, proti, parādīt datus divdimensiju masīvos.
Tabulas elements
Elements tabula ir lielisks konteiners un var atrasties jebkurā plūstošā elementā, piemēram, div. Iekšējais elements tabula mums būs šādi elementi: paraksts, grupa, tead, tbody, tfoot, tr, th Y td, kas ir nepieciešami, lai sniegtu mūsu tabulai konstitūciju, turklāt jaunais standarts ir padarījis šādus atribūtus novecojušus tabula un tie jāizmanto tikai CSS: kopsavilkums, izlīdzināšana, platums, bgcolor, cellpadding, cellpacing, frame, noteikumi. Šī elementa CSS konvencija būs šāda:
 tabula {displejs: tabula; robeža-sabrukums: atsevišķi; attālums starp robežām: 2 pikseļi; apmales krāsa: pelēka; } 

Tr elements
Kā mēs labi zinām, tabulas sastāv no diviem pamatelementiem - rindām un kolonnām, kur rindas attēlo katru informācijas ierakstu, bet slejas - informācijas struktūru un veidu, apskatīsim elementu, ko izmanto rindu izveidei, šis elements ir tr. Tas var būt šādu elementu bērns: galds, tētis, pēdas, tbodyKā redzam, tas var būt tiešs galda bērns vai elementu bērns, kas ir tabulas bērni un nosaka tās struktūru. Jāiekļauj 1 vai vairāki vienumi td vai tūkst attiecīgā gadījumā daži novecojušie atribūti ir ievietoti arī jaunajā HTML5 standartā: saskaņot, char, charoff, valign, bgcolor. Kas ir jāstrādā tikai CSS, teica, ka CSS ir šāda struktūra:
 tr {displejs: tabula-rinda; vertical-align: mantot; border-color: mantot;} 

Td elements
Šis elements definē slejas mūsu tabulas rindās, kas ļauj mums atdalīt informāciju ierakstā un tādējādi to klasificēt atbilstoši mūsu vajadzībām, tas ir elementa bērns. tr, derīgie atribūti, kas tam var būt: colspan, rowspan, galvenes un novecojušie atribūti, kas tagad jāapstrādā CSS, ir šādi: abbr, ass, līdzināt, platums, char, charoff, valign, bgcolor, augstums, nowrap, tvērums. CSS konvencija šim elementam ir šāda:
td {displejs: tabulas šūna; vertical-align: mantot; }

Mūsu pirmais galds
Īstenosim praksē to, ko esam redzējuši līdz šim, mēs jau zinām, ka mūsu tabulai ir nepieciešamas rindas un kolonnas konteinera vai vecāka elementa ietvaros. Apskatīsim, kā to pārnest uz HTML kodu:
 Piemērs 
Āboli Zaļš Vidējs
Apelsīni apelsīns Liels

Šis kods dod mums tabulas struktūru ar 2 rindām ar 3 kolonnām, jo ​​mēs redzam, ka tas ir vienkāršs teksts, kas liek mums redzēt šādu rezultātu:

Kā redzam, pašlaik ir diezgan viegli izveidot tabulu HTML5 formātā, un tas ir tikai teksts, un bez formatējuma nākamajā apmācības daļā mēs redzēsim, kā izveidot nedaudz modernāku tabulu ar CSS saturu.Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu

Jums palīdzēs attīstību vietā, daloties lapu ar draugiem

wave wave wave wave wave