Teptukai atlieka svarbų vaidmenį, kai reikia pateikti duomenis organizuotu formatu. Šiame vadove sužinosi, kaip sukurti pagrindines HTML lenteles ir naudoti esminius žymas išdėstymui ir struktūrai.
Žingsnis po žingsnio vadovas
Pradėkime nuo tavo pirmos lentelės kūrimo! Pirmiausia turi žinoti, kad pagrindinė žyma lentelėms yra. Ši žyma apima visą lentelę.
Dabar pridėsime vieną eilutę. Kiekviena eilutė yra apibrėžiama su žyma, kuri reiškia „lentelės eilutė“. Šioje eilutėje dar nėra duomenų, todėl ji kol kas lieka tuščia. Gali įsivaizduoti, kad kiekviena eilutė gali turėti vietos kelioms stulpeliams.
Dabar laikas pridėti keletą duomenų į lentelę. Tam naudosime žymą ir pridėsime atitinkamas vertes. Tarkime, pirmas vardas yra „Jan“, el. paštas „support@programmierenlern.info“ ir gimimo data yra 1982-06-23. Tavo eilutė turėtų atrodyti taip:
Įsitikink, kad lentelė dabar atrodo geriau. Tu gali pridėti tiek eilučių, kiek nori, tiesiog naudodamas daugiau - ir -žymų. Pridėkime dar vieną darbuotoją. Pavadinkime jį „Joe Average“ ir jo el. paštas gali būti „joe@average.com“.
Dabar, kai atnaujinsime lentelę, pamatysime, kad ji auga ir visi įvesti duomenys tampa matomi. Struktūra yra svarbi, nes ji suteikia aiškų vaizdą apie informaciją.
Ką daryti, jei nori pridėti poraštę lentelės gale, pavyzdžiui, autorines teises? Čia įsijungia colspan. Su colspan gali nurodyti, kiek stulpelių turėtų užimti langelis. Taigi, norint pateikti autorines teises visiems trims stulpeliams, rašyk: Copyright 2015 coding-geeks.de.
Po šios poraštės pridėjimo turėtum patikrinti išdėstymą. Idėja yra ta, kad poraštė yra įdėta po stulpeliais ir aiškiai pateikia duomenis. Šiuo atveju poraštė neturi savo stulpelio ir, todėl, turėtų būti virš kitų trijų stulpelių.
Jei dabar sumažinsi colspan iki dviejų, galėtum pridėti antrą užrašą. Tarkime, nori „Coding Geeks“ pavaizduoti naujame stulpelyje. Tam vėl naudok žymą, teisingai taikydamas colspan.
Jei atlikai visus šiuos žingsnius, išmokai, kaip sukurti pagrindines HTML lenteles. Tačiau vizualinį dizainą visada turėtum atlikti su CSS, kad pagerintum išdėstymą ir vartotojų patirtį. Tai apima turinio ir išdėstymo atskyrimą, todėl vėliau turėsi daugiau lankstumo kuriant savo svetaines.
Santrauka - HTML lentelių kūrimo pagrindai
Tu išmokei HTML lentelių struktūrą ir naudojimą, pradedant nuo struktūros iki duomenų pateikimo ir poraštės. Dabar gali pateikti paprastus lentelinius duomenis savo svetainėje.
Dažnai užduodami klausimai
Kas yra pagrindinės žymos HTML lentelėms?Pagrindinės žymos yra,, antraštėms ir duomenų langeliams.
Ar galiu sukurti neribotą eilučių ir stulpelių skaičių lentelėje?Taip, teoriškai gali pridėti daugybę eilučių ir stulpelių, tačiau svarbu išlaikyti skaitomumą.
Kaip turėčiau stilizuoti lenteles?Panaudok CSS dizainui, o ne tiesiogines HTML savybes, tokias kaip border.
Kas yra colspan?Colspan atributas leidžia langeliui išsiplėsti per kelis stulpelius.
Kodėl CSS yra geriau tinkamas išdėstymui nei HTML atributai?CSS atskiria turinį nuo jo stilizavimo, todėl suteikia daugiau lankstumo ir galimybių dizainui.
