HTML-i õppetund. Rakkude ühendamine

HTML-i tabelid on väga mugav element. Saate nendega midagi teha. Loomulikult on peamine eesmärk - teabe paigutamine laua kujul. Kuid saidiarendajad läksid edasi. Ühe aja jooksul oli lehtede loomiseks väga populaarne tabelite kasutamine. Nüüd püüavad spetsialistid seda mitte teha.

Suurte atribuutide arvu tõttu kasutatakse tabeleid laialdaselt. Näiteks oli väga kasulik ridu või veerge kombineerida.

Teooria sissejuhatus

HTML-i puhul toimub rakkude liit kasutades kahte atribuuti: colspan ja rowspan. Need on määratud td sildi jaoks.

Alustuseks uurime iga tabeli struktuuri enne, kui asume teemasse. Igas lauas on rida ja seal on rakud. Pidage meeles, et esialgu peaksid kõik tabelid sisaldama sama arvu lahtreid.

Ülaltoodud joonisel on näha kaks rida ja neil on kolm lahtrit. See on tavaline tabel. Kui määrate igas reas väiksema arvu lahtrite, siis tabel läheb, kõik kuvatakse valesti.

HTML-tabel: lahtrite ühendamine vertikaalselt ja horisontaalselt

Saate määrata vähem rakke või ridu ainult siis, kui te midagi kombineerite. Kuid algse lähiümbruse kustutatud elemendi asemel peate määrama täiendava atribuudi. Kui ühendate veerge, siis kolonni, kui ridu, siis ridasid. Atribuudi väärtus näitab ühendatavate elementide arvu.

Pange tähele, et peate täpselt täpsustama lähima elemendi alguses. Näiteks ülaltoodud joonisel, kui soovite ühineda lahtrid 1 ja 2, peate rakus 1 määrama atribuudi colspan väärtusega kaks. Ja lahtri 2 või 3 kustutamine pole enam tähtis.

Lõpptulemus on see, et ütlete lahtrile, kui palju ruumi see võtab. Vaikeväärtus on 1.

Lahtrite liitmine vertikaalselt HTML-tabelis on sama. Lihtsalt hõivatud ruumi peetakse vertikaalselt. Vaata allolevat pilti.

Siin koos numbriga 43 asuv laht võtab kaks rida. Selleks määrati rowspan atribuut. Seda mäletatakse lihtsalt:

• Rida on string.
• Col veerg / veerg.
• Span - ühendus.

Keele loojad püüdsid viia see nii inimesele võimalikult lähedale, et isegi teadmata oleks võimalik vähemalt mõndagi aru saada.

HTML-i puhul saab rakkude ühendada korraga kahes suunas: vertikaalselt ja horisontaalselt. Selleks määrake mõlemad atribuudid üheaegselt.

Eespool toodud joonisel on see lihtsalt näidatud, et saate liituda: ridu, veerge ja samal ajal veerge ja ridasid.

HTML: ühenda lahtrid. Näited

Mõtle keerukamaid, samm-sammult näiteid suurtes tabelites. Vasakul asuvast joonist allpool on tavalise tabeli originaalversioon. Ja paremal on variant teise lahtri ühendamisega kahe lahtriga. HTML koodi on lihtsam võrrelda.

Võite ka keskel ühendada kolm rakku. Esimesel juhul määrati atribuut colspan rakus # 1. Siin esimene muutub ja teises lisatakse kolmas samba, mis võrdub kolmega.

Kui soovite ühendada kõik lahtrid järjest ühega, siis kustutage neli td ja esimesel määrake colspan = '5'.

Nagu näete, on see kõik lihtne. Ei ole midagi keerukat. Peamine asi on hoolikalt esimest korda, et mõista kõiki tabelitega seotud probleeme ja siis ei tohiks tekkida probleeme.

Tabelid saidi skelettina

HTML-is ei kasutata lahtrite liitu tavapäraste tabelitega (nagu Wordis või Excelis). Veebisaidi arendajad sageli, kuid neid kasutatakse veebisaidi kujundamiseks.

Näiteks võite kaaluda selle saidi paigutust. See disain on väga lihtne ja primitiivne. Kuid siin saate näidata seltsi selgesõnaliselt kasutamist.

Siin esialgu oli kolmeliinilist tabelit, millest igaüks oli kaks. Siis saidi logo paigutamiseks ühendati esimeses reas kaks rakku. Alumine rida tegid sama "kelderi" asetamiseks.

Tänu sellele saate paigutada disainielemendid oma kohtadesse ja midagi ei lähe kuhugi kaugemale oma piiridest. See on väga mugav ja lihtne. Sellepärast oli see nii populaarne. Nüüd on soovitatav luua div tag blokeerida.

Järeldus

Ja pidage meeles, et HTML-tabelis saate rakud omavahel ühendada. Kõik sõltub sellest, mida te vajate, ja kuidas soovite seda teha. Peaasi, ärge segage. Kui soovite luua suurt arvu suurte ühendustega lauda, soovitame teil kõigepealt kõigepealt joonistada paberilehele või Paint'ile. Algajatele on see lihtsam.

Kui kogete kogemusi, saate selliseid toiminguid hõlpsalt oma peaga teha.