მაგიდაუმჯობესია გადახედოთ მარტივი ცხრილის მაგალითს, რომლის HTML კოდი ნაჩვენებია 5.10 სიაში.

ეს არის ცხრილი, თითოეული ყუთი დანომრილია - ჩვენთვის უფრო ადვილი იქნება მისი გადმოცემა. ნახ. 5.2 მითითებები, როგორც ეს ჩანს ბრაუზერის ფანჯარაში.

ახლა მოდით შევხედოთ ცხრილს ნახ. 5.3.

აქ ჩვენ შეგვიძლია ვნახოთ ზოგიერთი შუაზე განხილვა. ჩანს, რომ შუა მუნჯები ერთში გაბრაზდნენ. როგორ შეგიძლიათ ფულის გამომუშავება?

განსაკუთრებით ამ ტეგისთვის მხარს უჭერს ორ ძალიან შესამჩნევ არასავალდებულო ატრიბუტს. პირველი - COLSPAN - აერთიანებს შუაგულებსჰორიზონტალურად, მეორე ROWSPAN ვერტიკალურად.

იმისათვის, რომ ჰორიზონტალურად გააერთიანოთ შუაგულები, თქვენ უნდა ამოჭრათ ასეთი ნაჭრები.

1. იპოვეთ HTML ტეგი ( ), რომელიც შეესაბამება კომბინირებული შუაებიდან პირველს (როდესაც შუას მარცხნიდან მარჯვნივ უბიძგებთ).

2. შეიყვანეთ COLSPAN ატრიბუტი ახალში და აირჩიეთ ოთახების რაოდენობა საჭმელად, პატივისცემით და რაც მთავარია მათ შორის.

3. Vidality tags ( ), შექმენით სხვა ერთეულები ამ მწკრივის შუაში.

მოდით შევხედოთ ცხრილებს 2 და 3 (განყოფა 5.10). შესწორებული კოდის ფრაგმენტი, რომელიც ქმნის ამ ცხრილის პირველ რიგს, შეგიძლიათ იხილოთ სიაში 5.11.

ასე რომ, ჩვენ შეგვიძლია შევქმნათ შუა რიცხვები 4 + 5 და 12 + 13 + 14 + 15.

შუაები შეუთავსეთ ვერტიკალურად პატარა ნაჭრებად. საქონლის ღერძი აუცილებელია ამ ვიკონატისთვის.

1. იპოვეთ მწკრივი (ტეგი) HTML კოდში, რომელიც შეიცავს პირველ რიგს საჭმელად (როდესაც სტრიქონებს ქვემოთ გადაადგილდებით).

2. იპოვეთ ტეგი ამ მწკრივის კოდში ( ), რომელიც გვთავაზობს პირველს შუადან.

3. შეიყვანეთ ROWSPAN ატრიბუტი ახალში და მიანიჭეთ მისი სიძლიერე კომბინირებული შუაგულებიმათგან პატივისცემით და პრიორიტეტით.

4. შეხედეთ მომავალ რიგებს და ამოიღეთ ტეგები მათგან ( ) რომელსაც სხვა ბიზნესები ქმნიან გაერთიანებისთვის.

ჩვენ დავკარგეთ ბიზნესის კონსოლიდაციაჩვენი ცხრილის 1 და 6. ჩამონათვალი 5.12: შეასწორეთ HTML კოდის ფრაგმენტი (შეასწორეთ პირველი და მეორე მწკრივი).

უზომოდ მადლობელი ვართ, რომ მეორე რიგიდან დავინახეთ ტეგი, რომელიც ქმნის მეექვსე შუას, ღვინის ფრაგმენტები უერთდება პირველ შუას.

ნინა ძალიან ხშირად არ ჩერდება. თუმცა, ადრე, ტაბულური ვებ დიზაინის შემუშავებისას, მნიშვნელოვანი იყო ცხრილის გარეშე შექმნა საკვები შუაგულების შესახებ. ასე რომ, ყოველ შემთხვევაში, თქვენ არ იცით მის შესახებ.

გაკვეთილი 11.

მაგიდის შუა ნაწილის შერწყმა.

ამ გაკვეთილში ჩვენ გავაგრძელებთ ცხრილების ჩართვას და განვიხილავთ ტეგის კიდევ ორ ატრიბუტს <td>, რომლებიც შუაგულების მორჩილებაზე მიუთითებს.ქვემოთ პატარების გაოცებით მიხვდებით რა მორჩილება არსებობს.

ცხრილი ნაჩვენებია მარცხენა ხელით და აქვს ნორმალური სტრუქტურა. პირველ რიგში მარჯვენა მაგიდაზე ორი შუალედი გაერთიანებულია ერთმანეთთან და ქმნის ერთ დიდ მოცულობას.

ამ ატრიბუტების კონსოლიდაცია ცოტა უფრო მნიშვნელოვანია, ვიდრე სხვების კონსოლიდაცია. მას თავად ასწავლეს ღრმა გაკვეთილი.

კოლსპანის ატრიბუტი.

ატრიბუტი კოლსპანივიკორისტი გამოიყენება ცენტრების ჰორიზონტალურად გაერთიანებისთვის. ატრიბუტის მნიშვნელობა მიუთითებს შუალედების რაოდენობაზე, რომლებიც შეიძლება გაერთიანდეს ერთში.

პატივისცემა! ძალიან მნიშვნელოვანია, რომ ერთი მწკრივის საერთო და ძირითადი ბოლოების რაოდენობა უდრის მეორე რიგის ბოლოების რაოდენობას. მოდით, გადავხედოთ პირველი პატარას მაგიდის მარჯვნივ მდებარე კონდახს. ზედა მწკრივი შეიცავს მხოლოდ ერთ დიდ გროვას, რომელიც შედგება ორი ძირითადი ჯიბესგან, ხოლო ქვედა რიგი შეიცავს ორ ძირითად ჯიბეს.
ქვემოთ მოცემულია სწორად დაწერილი კოდის ვერსია:

ახსნა კოდის წინ:
ზედა რიგი <tr>შეიძლება ჰქონდეს ერთი შუა <td>, რომლის რეცეპტებისთვისაც ატრიბუტი კოლსპანი zi ღირებულებები 2 . ეს ნიშნავს, რომ ეს შუა აერთიანებს 2 შუას, ამიტომ ეს შუა ცვლის 2 შუას. კიდევ ერთი რიგი <tr> 2 მაისი პირველადი შუა <td>.
გამოდის, რომ ზედა რიგში გვაქვს ორი ურთიერთდაკავშირებული შუა, ხოლო ქვედა რიგში არის ორი ძირითადი შუა. ეს ძალიან ძველია და კოდი სწორად არის დაწერილი.

ახლა კოდის კონდახს უფრო ფართო მასშტაბი აქვს:

ახსნა კოდის წინ:
საწყალი ისაა, რომ პირველი რიგი <tr>შურისძიება არა ორი შუალედი <td>და სამი, იმ საათში მეორე რიგში <tr>შურისძიება ორი შუა <td>.
კოდის დათვალიერებისას, ვიზუალურად ნათელია, რომ რიგებში შუა რიგების რაოდენობა იგივეა, მხოლოდ ტეგების რაოდენობა. <td>თუმცა. ალე ერთ-ერთი ტეგი <td>მაისის ატრიბუტი კოლსპანი zi ღირებულებები 2 ეს ნიშნავს, რომ ეს ერთი შუა იკავებს ორს.

rowspan ატრიბუტი.

ატრიბუტი მწკრივების სიგრძევიკორისტი გამოიყენება ვერტიკალური ცენტრების გასასწორებლად. მოქმედების პრინციპი იგივეა, რაც ატრიბუტში კოლსპანი.

ახსნა კოდის წინ:
ზედა რიგი <tr>არის სამი შუა <td>ერთ-ერთი მათგანისთვის ატრიბუტი მწკრივების სიგრძე zi ღირებულებები 3 . ეს ნიშნავს, რომ ეს შუა აერთიანებს 3 შუას (ერთი დავალების ატრიბუტი + 2 ქვედა ვერტიკალური შუა). როგორც უკვე ვთქვი, პირველ რიგს აქვს 3 შუა, რაც ნიშნავს, რომ ქვედა ორი მწკრივი ასევე პასუხისმგებელია სამ შუაზე. შეხედე კოდს, mi bachimo, ქვედა ორი სტრიქონი <tr>ორჯერ მეტჯერ დაიღუპოს <td>, მაგრამ არ დაგავიწყდეთ, რომ ზედა რიგის პირველმა შუამა ადგილი დაიკავა + მის ქვეშ მყოფი ორი შუას მეორე ადგილი. ეს ნიშნავს, რომ მიმდებარე მწკრივში კანში შუაგულების რაოდენობა უდრის სამს.

3.8. მაგიდის შუა ნაწილის შერწყმა

პრაქტიკაში დიდი რაოდენობითაა ცხრილები, რომლებშიც ერთი შუაში არის სიმაღლისა და სიგანის შუალედების რაოდენობა (დივ. სურ. 3.2). HTML სისტემები იყენებენ დამატებით ატრიბუტებს: colspan და rowspan. colspan ატრიბუტი მიუთითებს შუალედების რაოდენობაზე, რომლებიც აგრძელებენ ამ შუას ჰორიზონტალურად, ხოლო მწკრივის სიგრძე - ვერტიკალურად.

ნახ. ნახაზი 3.12 გვიჩვენებს ცხრილს კომბინირებული შუაგულებით. ცხრილის სათაური არის თანმიმდევრობით, რომელიც მოიცავს მწკრივის სამივე რიცხვს. მაგიდაზე მოათავსეთ კიდევ ორი ​​ცენტრი, რომელთაგან თითოეული ორ ცენტრს ვერტიკალურად უერთდება. ასეთი ცხრილის კოდი მოცემულია ჩამონათვალში 3.7.

Პატარა 3.12.მაგიდა საერთო შუაგულებით

ჩამონათვალი 3.7.ცენტრის ატრიბუტების შერჩევის მაგალითი

შუალედების ნახვა იმისათვის, რომ შეცვალოთ ფორმატირების პარამეტრები, თუ რამდენი შუაში უნდა ნახოთ, გამოიყენეთ ერთ-ერთი ეს მეთოდი. შუაშის სანახავად გადაიტანეთ მაუსის მაჩვენებელი მარცხენა კიდეზე, თუ ფორმაში არის თხელი შავი ისარი,