HTML apmācība. Šūnu apvienošana

Lai apvienotu divas vai vairākas šūnas vienā, tiek izmantoti taga kolonnas un rindas diapazona atribūti. ... Atribūts colspan nosaka šūnu skaitu, kas jāapvieno horizontāli. Rindas platuma atribūts darbojas līdzīgi, ar vienīgo atšķirību, ka tas aptver šūnas vertikāli. Pirms atribūtu pievienošanas pārbaudiet šūnu skaitu katrā rindā, lai pārliecinātos, ka netiek izmesta kļūda. Tātad, aizstāj trīs šūnas, tāpēc nākamajā rindā jābūt trim tagiem vai tāda konstrukcija ...... ... Ja šūnu skaits katrā rindā nesakrīt, parādīsies tukšas fantoma šūnas. Piemērs 12.3 parāda, kaut arī derīgu, bet nepareizu kodu, kurā parādās līdzīga kļūda.

12.3. Piemērs. Nederīga šūnu savienošana

Nepareiza kolpona izmantošana

Šūna 1		Šūna 2
Šūna 3	Šūna 4

Šī piemēra rezultāts ir parādīts attēlā. 12.5.

Rīsi. 12.5. Papildu šūnas izskats tabulā

Piemēra pirmajā rindā ir trīs šūnas, divas no tām ir savienotas, izmantojot atribūtu colspan, bet otrā rindiņa pievieno tikai divas šūnas. Tādējādi tiek izveidota papildu šūna, kas tiek parādīta pārlūkprogrammā. To var skaidri redzēt attēlā. 12.5.

12-4. Piemērs parāda pareizu kolonnas un rindas platuma atribūtu izmantošanu.

12.4. Piemērs. Apvienojiet šūnas vertikāli un horizontāli

Šūnu apvienošana

Pārlūkprogramma	6.0	7.0	7.0	8.0	9.0	1.0	2.0
Pārlūkprogramma	Internet Explorer		Opera			Firefox
Atbalstīts	Nē	Jā	Nē	Jā	Jā	Jā	Jā

Šī piemēra rezultāts ir parādīts attēlā. 12.6.

Rīsi. 12.6. Tabula ar sapludinātām šūnām

Šajā tabulā ir astoņas kolonnas un trīs rindas. Dažas šūnas ar vārdiem "Internet Explorer", "Opera" un "Firefox" ir apvienotas, kur divas un kur trīs šūnas. Šūnā ar nosaukumu "Pārlūkprogramma" tiek izmantota vertikāla sapludināšana.

Es jums detalizēti un detalizēti pastāstīšu, kā tabulās apvienot šūnas vertikāli un horizontāli.

Šajā rakstā mēs nepaskaidrosim html tabulu veidošanas principus; lai iegūtu šīs zināšanas, apmeklējiet mūsu HTML kursu.

Lai tabulā apvienotu šūnas, tagam ir divi atribūti tie ir kols (horizontāls savienojums) un rindas (vertikāls savienojums).

Dažiem cilvēkiem ir grūtības izmantot šos atribūtus, problēmas ar šūnu apvienošanu.

Atribūtiem colspan un rowspan kā parametriem tiek ņemtas veselu skaitļu vērtības no 0 līdz 1000. Šeit ir neliels piemērs tam, kā tabulā var apvienot šūnas.

No pirmā acu uzmetiena tiek īstenota ne pārāk sarežģīta struktūra, bet, aplūkojot pārpilnību un koda elementus ir grūti saprast, pēc kāda principa jūs varat apvienot vēl pāris šūnas.

Mēs piedāvājam jums daudzpusīgu un ļoti ērtu veidu, kā apvienot šūnas.

Vispirms sagatavojiet nākamās tabulas sagatavi, uzrādot to ar atdalītām šūnām. Tas varētu būt galds 3x3, 6x10 utt. Katrai šūnai piešķirsim savu numuru, sākot skaitīt no kreisās uz labo un no augšas uz leju.

Analizēsim iepriekš redzamās tabulas izveidi, izmantojot šo metodi.

Šādi izskatīsies mūsu veidnes kods un pati veidne:

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

1	2	3	4
5	6	7	8
9	10	11	12
13	14	15	16

Jums ir jāapvieno šūnas ar skaitļiem 1,2,3 horizontāli. Lai to izdarītu, kodā, šūnas numurā 1, pievienojiet atribūtu colspan ar vērtību 3. Un noņemiet elementi ar skaitļiem 2 un 3. Iegūtajā šūnā mēs ierakstām sapludināto šūnu numurus.

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

1,2,3			4
5	6	7	8
9	10	11	12
13	14	15	16

Tagad mums ir jāapvieno šūnas 9 un 13 vertikāli. Mēs veicam līdzīgu procedūru - iestatiet rindas platuma atribūtu uz šūnas numuru 9 ar vērtību 2, izdzēsiet šūnu no skaitļa 13, uzrakstiet to šūnu numurus, no kurām tā sastāv no apvienotās šūnas.

Tas mainīs mūsu kodu un tabulas izskatu:

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

1,2,3			4
5	6	7	8
9,13	10	11	12
9,13	14	15	16

Atliek apvienot 11,12,15,16 šūnas vienā. Lai to izdarītu, šūnā Nr. 11 ierakstiet atribūtus colspan = "2" rowspan = "2". No koda mēs noņemam šūnas 12,15,16. Mēs ierakstām skaitļus 11,12,13,14 kombinētajā šūnā.

Tas mainīs mūsu kodu un tabulas izskatu:

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

1,2,3			4
5	6	7	8
9,13	10	11,12,15,16
	14

Tas ir viss, mēs saņēmām oriģinālo tabulu, tagad šūnas var aizpildīt ar jums ērtu informāciju.

Mēs ceram, ka jūs saprotat principu, kā izveidot sarežģītas tabulas ar savienotām šūnām.

HTML tabulām ir divas funkcijas. Pirmais ir pašas tabulas, tas ir, informācijas iznākums tabulas veidā. Un otrais ir lapas izkārtojums. Atsevišķi satura gabali tiek ievietoti dažādās tabulas šūnās un tādējādi tiek parādīti lapas pareizajā vietā.

Tabulas izveidošana

Apskatīsim, kā izveidot tabulu HTML. Tas tiek darīts, izmantojot tagu

... Tabulas sastāv no rindām, kuru iekšpusē ir šūnas. Šajās šūnās ir tabulas saturs. Tag pievieno tabulai rindu un tagu

rindai pievieno šūnu. Atcerieties aizvērt tagus. Piemēram, izveidosim šādu tabulu:

Lai tabulas rāmji būtu redzami, atzīmējiet tagu

robežas atribūts ir iestatīts, bet HTML5 noveco šo atribūtu un noveco to. Turklāt ir arī citi atribūti darbam ar rāmjiem un fona maiņai, un šūnām ir arī atribūti satura saskaņošanai. Visi šie atribūti ir arī novecojuši; to vietā jāizmanto stili.

Salieciet tabulas šūnas

Ir iespējams apvienot tabulas šūnas vienā. Lai to izdarītu, atzīmējiet

ir atribūts colspan, kas savieno šūnas vienā rindā, un rindas joslas atribūts, kas savieno šūnas no dažādām rindām. Šo atribūtu vērtība ir apvienojamo šūnu skaits.

Izveidosim šādu tabulu:

Lūdzu, ņemiet vērā, ka tabulas otrajā rindā viena šūna ieņem divu šūnu vietu, tāpēc kopējais šūnu skaits šajā rindā būs mazāks nekā citās, šajā gadījumā - vienā.

Tagad izveidosim šādu tabulu:

Papildu tabulas tagi

Papildus tagiem, kurus mēs izmantojām, ir arī tagi, kas tiek izmantoti arī, veidojot tabulu.

- galvenes šūna. Parasti atrodams tabulas pirmajā rindā. Izmanto, lai izveidotu tabulas kolonnas nosaukumu. No birkas

atšķiras tikai treknrakstā un centrā.

- atrodas birkas iekšpusē , pievieno tabulai virsrakstu.

- satur pirmās dažas tabulas rindas, kas norāda konkrētu stilu. Tabulā var būt tikai viens šāds tags. Tajā esošajām rindām jāsākas no pašas pirmās rindas.

- satur vairākas tabulas rindas, lai norādītu noteiktu stilu. Tabulā var būt vairāki šādi tagi.

- satur tabulas rindas, kas tiks parādītas pašā tabulas apakšā.

- nosaka stilu vienai tabulas slejai, sākot no pirmās. Tas ir, pirmais šāds tags norādīs stilu pirmajai kolonnai, otrais tags otrajai kolonnai utt. Dažādās pārlūkprogrammās tas darbojas atšķirīgi.