ორი ან მეტი უჯრედის ერთში გაერთიანების მიზნით, გამოიყენება ტეგის კოლპანი და რიგები.
მაგალითი 12.3. არასწორი უჯრედის შეხამება
| უჯრედი 1 | უჯრედი 2 | |
| უჯრედი 3 | უჯრედი 4 | |
ამ მაგალითის შედეგი ნაჩვენებია ნახ. 12.5.
ბრინჯი 12.5. ცხრილში დამატებითი უჯრედის გამოჩენა
მაგალითის პირველ სტრიქონს აქვს სამი უჯრედი, ორი მათგანი გაერთიანებულია colspan ატრიბუტის გამოყენებით, ხოლო მეორე სტრიქონი მხოლოდ ორ უჯრედს ამატებს. ეს ქმნის დამატებით უჯრედს, რომელიც ნაჩვენებია ბრაუზერში. ეს ნათლად ჩანს ნახ. 12.5.
მაგალითი 12-4 გვიჩვენებს colspan და rowspan ატრიბუტების სწორ გამოყენებას.
მაგალითი 12.4. უჯრედების შერწყმა ვერტიკალურად და ჰორიზონტალურად
| ბრაუზერი | Internet Explorer | ოპერა | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| მხარდაჭერილი | არა | დიახ | არა | დიახ | დიახ | დიახ | დიახ |
ამ მაგალითის შედეგი ნაჩვენებია ნახ. 12.6.
ბრინჯი 12.6. მაგიდა გაერთიანებული უჯრედებით
ამ ცხრილს აქვს რვა სვეტი და სამი სტრიქონი. ზოგიერთი უჯრედი სიტყვებით "Internet Explorer", "Opera" და "Firefox" გაერთიანებულია სად ორი და სად სამი უჯრედი. ვერტიკალური შერწყმა გამოიყენება უჯრედში, სახელწოდებით "ბრაუზერი".
მე გეტყვით დეტალურად და დეტალურად, თუ როგორ უნდა დააკავშიროთ უჯრედები ვერტიკალურად და ჰორიზონტალურად ცხრილებში.
ამ სტატიაში ჩვენ არ განვმარტავთ html ცხრილების შექმნის პრინციპებს; ამ ცოდნის მისაღებად გაიარეთ ჩვენი HTML კურსი.
უჯრედების ცხრილში გაერთიანების მიზნით, ტეგს მიენიჭება ორი ატრიბუტი
ზოგიერთ ადამიანს უჭირს ამ ატრიბუტების გამოყენება, უჯრედების შერწყმის პრობლემები.
Colspan და rowspan ატრიბუტები იღებენ მთელ მნიშვნელობებს 0 -დან 1000 -მდე, როგორც პარამეტრებს. აქ არის პატარა მაგალითი იმისა, თუ როგორ შეგიძლიათ უჯრედების გაერთიანება ცხრილში.
ერთი შეხედვით, არა ძალიან რთული სტრუქტურაა დანერგილი, მაგრამ უყურებს სიუხვეს
ჩვენ გთავაზობთ უჯრედების გაერთიანების მრავალმხრივ და ძალიან მოსახერხებელ გზას.
დასაწყისისთვის, მოამზადეთ თქვენი მომავალი ცხრილის ცარიელი ნაწილი, სადაც წარმოდგენილია ყველა უჯრედი გამოყოფილი. ეს შეიძლება იყოს მაგიდა 3x3, 6x10და ა.შ. ჩვენ თითოეულ უჯრედს მივცემთ საკუთარ რიცხვს, ვიწყებთ დათვლას მარცხნიდან მარჯვნივ და ზემოდან ქვემოდან.
მოდით გავაანალიზოთ ამ მეთოდის გამოყენებით ზემოთ ნაჩვენები ცხრილის შექმნა.
ასე გამოიყურება ჩვენი შაბლონის კოდი და თავად თარგი:
| 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 |
თქვენ უნდა შეურიოთ უჯრედები რიცხვებით 1,2,3 ჰორიზონტალურად. ამისათვის, კოდი, უჯრედის ნომერი 1, დაამატეთ colspan ატრიბუტი მნიშვნელობით 3. და ამოიღე
| 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 |
ახლა ჩვენ უნდა გავაერთიანოთ უჯრედები 9 და 13 ვერტიკალურად. ჩვენ ვასრულებთ მსგავს პროცედურას - დავაყენოთ რიგის დიაპაზონის ატრიბუტი უჯრედის ნომერზე 9 მნიშვნელობით 2, წაშალოთ უჯრედი რიცხვი 13 -დან, დავწეროთ იმ უჯრედების რიცხვები, რომელთაგან შედგება გაერთიანებული უჯრედი.
ეს შეცვლის ჩვენს კოდს და ცხრილის გარეგნობას:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
რჩება 11,12,15,16 უჯრედის ერთში გაერთიანება. ამისათვის No11 უჯრედში ჩაწერეთ ატრიბუტები colspan = "2" rowspan = "2". ჩვენ ამოვიღებთ უჯრედებს კოდიდან 12,15,16. ჩვენ ვწერთ რიცხვებს 11,12,13,14 კომბინირებულ უჯრედში.
ეს შეცვლის ჩვენს კოდს და ცხრილის გარეგნობას:
| 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 | |||
ეს ყველაფერი, ჩვენ მივიღეთ ორიგინალური ცხრილი, ახლა უჯრედები შეიძლება შევსებული იყოს თქვენთვის მოსახერხებელი ინფორმაციით.
ჩვენ ვიმედოვნებთ, რომ თქვენ გესმით პრინციპი შექმნის რთული ცხრილების ერთად concatenated საკნები.
HTML ცხრილებს აქვთ ორი ფუნქცია. პირველი არის თავად ცხრილები, ანუ ინფორმაციის გამოტანა ცხრილის სახით. და მეორე არის გვერდის განლაგება. შინაარსის ცალკეული ნაწილები მოთავსებულია ცხრილის სხვადასხვა უჯრედებში და ამგვარად გამოჩნდება გვერდზე სწორ ადგილას.
მაგიდის შექმნა
მოდით შევხედოთ როგორ შევქმნათ ცხრილი HTML- ში. ეს კეთდება ტეგის გამოყენებით
| დასძენს უჯრედს ზედიზედ. დაიმახსოვრეთ ტეგების დახურვა. მაგალითად, მოდით შევქმნათ ასეთი ცხრილი:
იმისათვის, რომ ცხრილის ჩარჩოები ხილული იყოს, წარწერა
|
