Turinys
Anksčiau HTML lentelės buvo naudojamos svetainių išdėstymui valdyti, siekiant išlaikyti turinio proporcijas, kurti skyrius, padalyti informaciją ir pan. Šiuo metu tai yra bloga praktika, iš tikrųjų su naujomis prekės specifikacijomis lentelę HTML5 buvo dedamos visos pastangos, kad tai būtų naudojama tikrajam tikslui, ty duomenų rodymui 2 matmenų masyvuose.Lentelės elementas
Elementas lentelę yra puikus konteineris ir gali būti bet kurio srauto elemento, pvz div. Viduje elementas lentelę turėsime šiuos elementus: antraštė, grupė, tead, tbody, tfoot, tr, th Y td, kurie yra būtini norint pateikti konstituciją mūsų lentelėje, be to, pagal naująjį standartą šie atributai pasenę lentelę ir turi būti naudojami tik CSS: santrauka, lygiuoti, plotis, bgcolor, cellpadding, cellpacing, frame, taisyklės. Šio elemento CSS sutartis bus tokia:
table {display: table; border-collapse: atskiras; atstumas tarp sienų: 2 taškai; apvado spalva: pilka; } Tr elementas
Kaip gerai žinome, lenteles sudaro du pagrindiniai elementai, eilutės ir stulpeliai, kur eilutės vaizduoja kiekvieną informacijos įrašą, o stulpeliai - informacijos struktūrą ir tipą, pažiūrėkime elementą, naudojamą eilutėms kurti, šis elementas yra tr. Tai gali būti šių elementų vaikas: stalas, Thead, tfoot, tbodyKaip matome, tai gali būti tiesioginis stalo vaikas arba elementų, kurie yra lentelės vaikai ir kurie apibrėžia jos struktūrą, vaikas. Turi būti 1 ar daugiau elementų td arba tūkst kai kurie pasenę atributai taip pat buvo įtraukti į naująjį HTML5 standartą, tai yra: suderinti, char, charoff, valign, bgcolor. Kuris turi būti naudojamas tik CSS, sakė, kad CSS struktūra yra tokia:
tr {ekranas: table-row; vertical-align: paveldėti; border-color: paveldėti;} Td elementas
Šis elementas apibrėžia stulpelius mūsų lentelės eilutėse, o tai leidžia mums atskirti informaciją įraše ir taip ją klasifikuoti pagal mūsų poreikius, tai yra elemento vaikas tr, galimi šie atributai: colspan, rowspan, headers ir pasenę atributai, kuriuos dabar reikia tvarkyti CSS, yra šie: abbr, ašis, lygiuoti, plotis, char, charoff, valign, bgcolor, aukštis, nowrap, apimtis. Šio elemento CSS sutartis yra tokia:
td {ekranas: table-cell; vertical-align: paveldėti; }Mūsų pirmasis stalas
Praktiškai pritaikykime tai, ką matėme iki šiol, mes jau žinome, kad mūsų lentelėje reikia eilučių ir stulpelių sudėtiniame rodinyje arba pirminiame elemente, pažiūrėkime, kaip jį pritaikysime HTML kodui:
Pavyzdys
| Obuoliai | Žalias | Vidutinis |
| Apelsinai | Oranžinė | Didelis |
Šis kodas suteikia mums lentelės su 2 eilutėmis su 3 stulpeliais struktūrą, nes matome, kad tai yra paprastas tekstas, dėl kurio matome šį rezultatą:
