უჯრების გაერთიანება

რას ისწავლი

• როგორ გააფართოვო უჯრა რამდენიმე სვეტზე colspan-ით
• როგორ გაავრცელო უჯრა რამდენიმე სტრიქონზე rowspan-ით
• როგორ დაითვალო უჯრები, რომ ცხრილი არ „დაიშალოს“

როცა ერთი უჯრა რამდენიმე ადგილს იკავებს

ზოგჯერ ერთი მნიშვნელობა რამდენიმე სვეტს ან სტრიქონს ეკუთვნის. გაკვეთილების ცხრილში დიდი შესვენება ყველა დღეს ერთ დროს არის, ამიტომ ხუთი ცალკე უჯრის ნაცვლად ერთი ფართო უჯრა ჯობს. ან ორი გაკვეთილი ზედიზედ ერთი საგანია, და უჯრა ორ სტრიქონზე უნდა გაიწელოს. ამისთვის <td>-სა და <th>-ს ორი ატრიბუტი აქვს.

colspan: რამდენიმე სვეტზე

colspan (column span, სვეტების მოცვა) ამბობს, რამდენ სვეტს იკავებს უჯრა:

<table>
  <tr>
    <th>დრო</th>
    <th>ორშაბათი</th>
    <th>სამშაბათი</th>
  </tr>
  <tr>
    <td>09:00</td>
    <td>მათემატიკა</td>
    <td>ქართული</td>
  </tr>
  <tr>
    <td>10:00</td>
    <td colspan="2">დიდი შესვენება</td>
  </tr>
</table>

მესამე სტრიქონში მხოლოდ ორი უჯრაა, მაგრამ მეორე colspan="2"-ით ორ სვეტს იკავებს. სულ: 1 + 2 = 3, ზუსტად იმდენი, რამდენიც სხვა სტრიქონებშია.

rowspan: რამდენიმე სტრიქონზე

rowspan (row span) ამბობს, რამდენ სტრიქონზე ვრცელდება უჯრა ქვემოთ:

<table>
  <tr>
    <th>დრო</th>
    <th>ორშაბათი</th>
  </tr>
  <tr>
    <td>09:00</td>
    <td rowspan="2">ხელოვნება (ორმაგი გაკვეთილი)</td>
  </tr>
  <tr>
    <td>10:00</td>
  </tr>
</table>

ყურადღება მიაქციე ბოლო სტრიქონს: მასში მხოლოდ ერთი უჯრაა, „10:00“. მეორე სვეტის ადგილი უკვე დაკავებულია ზემოდან ჩამოსული „ხელოვნებით“. თუ იქ კიდევ ერთ უჯრას ჩაწერ, ის ცხრილის გარეთ „გადავარდება“ და ზედმეტ სვეტს შექმნის.

როგორ დავითვალოთ

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

• colspan="3" ერთი უჯრაა, მაგრამ სამ სვეტად ითვლება;
• rowspan="2" უჯრა მხოლოდ თავის სტრიქონში იწერება: ქვემოთ მის ადგილს არაფერს წერ.

და შეამოწმე: ყოველ სტრიქონში სვეტების ჯამი, colspan-ების და ზემოდან ჩამოსული rowspan-ების გათვალისწინებით, ერთნაირი უნდა იყოს.

სცადე თავად

გაუშვი. მერე დიდი შესვენება სამი დღისთვის გააკეთე: დაამატე სვეტი „ოთხშაბათი“ ყველა სტრიქონში და colspan 3-მდე გაზარდე.

ხშირი შეცდომები

• ზედმეტი უჯრა rowspan-ის ქვეშ. ქვედა სტრიქონში იმ ადგილას უჯრას აღარ წერ.
• colspan-ის შემდეგ ძველი რაოდენობის უჯრები. თუ ერთი უჯრა ორ სვეტს იკავებს, სტრიქონში ერთი უჯრით ნაკლები იწერება.
• ზედმეტი გაერთიანება. ძალიან ბევრი გაერთიანებული უჯრა ცხრილს ძნელად წასაკითხს ხდის, განსაკუთრებით ეკრანის წამკითხველისთვის. გაერთიანება მხოლოდ იქ, სადაც შინაარსი ამას მოითხოვს.

<style>th, td { border: 1px solid #999; padding: 4px 10px; }</style>
<table>
  <tr>
    <th>გუნდი</th>
    <th>ქულა</th>
    <th>შენიშვნა</th>
  </tr>
  <tr>
    <td>ბიტები</td>
    <td>9</td>
    <td rowspan="2">გადიან ფინალში</td>
  </tr>
  <tr>
    <td>ბაიტები</td>
    <td>7</td>
  </tr>
  <tr>
    <td>პიქსელები</td>
    <td>4</td>
    <td>შემდეგ წელს!</td>
  </tr>
  <tr>
    <td colspan="3">ფინალი შაბათს, 12:00</td>
  </tr>
</table>

მინი-ქვიზი

შეჯამება

• colspan="n" უჯრას n სვეტზე აფართოებს, rowspan="n" n სტრიქონზე.
• colspan-იან სტრიქონში ნაკლები უჯრა იწერება, rowspan-ის ქვეშ კი ადგილი ცარიელი რჩება კოდში.
• ყოველ სტრიქონში სვეტების ჯამი ერთნაირი უნდა იყოს.
• რთული ცხრილი ჯერ ქაღალდზე დახატე.