Skip to main content

Sukurkite 2x2 lentelę - ir žinokite, naudojant HTML lentelę, yra gerai

Anonim

HTML lenteles lengva sukurti, kai suprasite eilučių ir stulpelių pagrindus, taip pat, kai suprasite, kada yra gerai, jei naudojate lentelę ir kada juos reikėtų vengti.

Trumpa lentelių istorija ir Web dizainas

Prieš daugelį metų, prieš priimant CSS ir interneto standartus, interneto dizaineriai naudojo HTML

elementas, skirtas svetainių puslapių išdėstymui sukurti. Tinklalapio dizainas būtų "supjaustytas" į smulkius gabalėlius kaip galvosūkis, o vėliau kartu su HTML lenteliu, kuris bus pateiktas naršyklėje, kaip numatyta. Tai buvo labai sudėtingas procesas, sukūręs daug papildomo HTML žymėjimo ir kuris niekada nebūtų naudojamas šiandien daugiaekraniniame pasaulyje, kuriame gyvena mūsų svetainės. Kadangi CSS tapo priimtu tinklalapių vizualizavimo ir išdėstymo metodu, lentelių naudojimas tam tapo išjudinti ir daugelis interneto dizainerių klaidingai manė, kad "lentelės buvo blogos". Tai buvo ir yra netiesa. Išdėstymo lentelės yra blogos, tačiau jie vis dar turi vietą žiniatinklyje ir HTML, t. Y. Rodyti lentelių duomenis, pvz., Kalendorių ar traukinių tvarkaraštį. Dėl šio turinio naudojant lentelę vis dar yra priimtinas ir geras požiūris.

Taigi, kaip jūs išdėstėte stalą? Pradėkime nuo tiesioginio 2x2 lentelės sukūrimo. Tai turės 2 stulpelius (tai yra vertikalūs blokai) ir 2 eilutės (horizontalieji blokai). Sukūrę 2x2 lentelę, galite sukurti bet kokio dydžio lentelę, kurią norėtumėte paprasčiausiai pridėti papildomų eilučių ar stulpelių.

Štai kaip

  1. Pirmiausia atidarykite stalą

  • Atidarykite pirmąją eilutę naudodami tr žymę

  • Atidarykite pirmąjį stulpelį su Td žyma

  • Parašykite ląstelės turinį

  • Uždarykite pirmąją langelį ir atidarykite antrą

  • Parašykite antrosios ląstelės turinį

  • Uždarykite antrąją langelį ir uždarykite eilutę

  • Antrąją eilutę įrašykite tiksliai kaip pirmąją

  • Tada uždarykite stalą

  • Viskas!

  • Galite taip pat pasirinkti lentelės antraštes prie lentelės naudodami

    elementas Šios lentelių antraštės pakeistų "lentelės duomenų" elementus pirmoje lentelės eilutėje, pvz .:

    vardasVaidmuo
    JeremyDizaineris
    JenniferProgramuotojas

    Kai šis puslapis bus rodomas naršyklėje, ta pirmoji eilutė su lentelių antraštėmis pagal nutylėjimą bus rodoma paryškintu tekstu, o jie bus sutelkti į lentelės langelį, kuriame jie rodomi.

    Taigi, ar gerai naudoti lenteles HTML?

    Taip, kol nenaudojate jų išdėstymo tikslais, gerai naudokite lenteles. Jei jums reikia pateikti lentelės informaciją, tai yra būdas tai padaryti lentelėje. Iš tiesų, vengiant stalo dėl netinkamo grynumo, norint išvengti šio teisėto HTML elemento yra taip pat atgal, kaip ir jų panaudojimas išdėstymo priežastis šiuo metu ir amžiuje.

    Parašė Jennifer Kyrin. Redagavo Jeremy Girard.