«
»

table ელემენტის სასარგებლო დეტალები

Mar 17 2007

table ელემენტი ბევრად უფრო სასარგებლო და მოქნილი აღმოჩნდა ვიდრე პირადად მე მეგონა. ერთერთ პოსტში ვისაუბრე thead, tfoot და tbody ტეგებზე, თუმცა ამჯერად table ელემენტის სხვა დეტალებზე შევაჩერებ ყურადღებას, კერძოდ: caption, colgroup, col და tbody ელემენტის გამოყენებაზე.

სადავო არ არის ის საკითხი რომ მონაცემების ასახვისათვის table საუკეთესო საშუალებაა… თუმცა ამ ელემენტის სრულფასოვანი გამოყენების მაგალითები არცთუ ხშირად მინახავს. მაგალითისათვის მინდა განვიხილო ქვემოთ ნაჩვენები ცხრილი რომლის აგებაც ბევრად მარტივი აღმოჩნდა საჭირო დეტალების გამოყენებით ვიდრე ეს სხვა დროს გამომდიოდა.

რისგან შედგება ეს ცხრილი? მასზე ვიზუალური დაკვირვებით თვალში საცემია შემდეგი დეტალები: ცხრილის დასათაურება რომელსაც აქვს ნაცრისფერი ფონი, სვეტების დასახელებები თეთრი ფონით, სხვადასხვა ფერის სტრიქონები(ცისფერი, ვარდისფერი და მწვანე) ხოლო ბოლოში სტაფილოსფერი სტრიქონი მინაწერით მარჯვენა კუთხეში.

Table: This is table caption
Col one Col two Col three Col four
Some useful information
Col one data Col two data Col tdree data Col four data
Col one data Col two data Col tdree data Col four data
Col one data Col two data Col tdree data Col four data
Col one data Col two data Col tdree data Col four data

ქვემოთ მოყვანილია ამ ცხრილის ასაგებად გამოყენებული HTML კოდი:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<table id="data-table">
  <caption>Table: This is table caption</caption>
  <thead>
    <tr>
      <th>Col one</th>
      <th>Col two</th>
      <th>Col three</th>
      <th>Col four</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="4"><em>Some useful information</em></td>
    </tr>
  </tfoot>
  <colgroup>
    <col span="2" width="15%" />
    <col width="45%" />
    <col width="25%" />
  </colgroup>
  <tbody id="tbody-one">
    <tr>
      <td>Col one data</td>
      <td>Col two data</td>
      <td>Col tdree data</td>
      <td>Col four data</td>
    </tr>
  </tbody>
  <tbody id="tbody-two">
    <tr>
      <td>Col one data</td>
      <td>Col two data</td>
      <td>Col tdree data</td>
      <td>Col four data</td>
    </tr>
    <tr>
      <td>Col one data</td>
      <td>Col two data</td>
      <td>Col tdree data</td>
      <td>Col four data</td>
    </tr>
  </tbody>
  <tbody id="tbody-three">
    <tr>
      <td>Col one data</td>
      <td>Col two data</td>
      <td>Col tdree data</td>
      <td>Col four data</td>
    </tr>
  </tbody>
</table>

დეტალურად განვიხილოთ მოცემული HTML კოდი.


CAPTION ელემენტი:
პირველი რაც ამ კოდის წაკითხვისას თვალში გვხდება ეს არის <caption> ელემენტი, ეს ელემენტი გამოიყენება ცხრილის დასათაურებისათვის. როგორც სპეციფიკაციაშია განსაზღვრული იგი უნდა იყოს პირველი ელემენტი table ელემენტის შემდეგ და ცხრილში მისი რაოდენობა არ უნდა აღემატებოდეს ერთს.

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

THEAD, TFOOT და TBODY ელემენტები:
ეს ელემენტები გამოიყენება სტრიქონების დასაჯგუფებლად(Row groups). სპეციფიკაციის თანახმად საჭიროების შემთხვევაში ცხრილის სტრიქონები შეიძლება დავაჯგუფოთ ამ ელემენტებში და ცხრილი შეიძლება შედგებოდეს თითო თითო thead და tfoot და ერთი ან რამდენიმე tbody ელემენტებისაგან. შესაბამისად thead და tfoot ელემენტები უნდა შეიცავდნენ ინფორმაციას სვეტების შესახებ, ხოლო tbody ელემენტში უნდა დავაჯგუფოთ სტრიქონები რომლებიც უშუალოდ შეიცავენ ტაბულარულ მონაცემებს.

აღსანიშნავია რომ tfoot ელემენტი უნდა განვათავსოთ tbody ელემენტებამდე(როგორც ნაჩვენებია მაგალითში) რათა ბროუზერებმა შეძლოთ ამ ელემენტის გამობეჭდვა მანამდე სანამ tbody ელემენტების შესავსებად განკუთვნილი მონაცემები სრულად ჩამოიტვირთება სერვერიდან.

აღსანიშნავია და ღირს ყურადღების მიქცევა იმ ფაქტზე რომ tbody ელემენტი შეგვიძლია გამოვიყენოთ რამდენიმეჯერ, ეს განსაკუთრებით მნიშვნელოვანია ორ თვალსაზრისით: ერთის მხრივ თვითონ tbody ელემენტი შეიძლება იყოს ე.წ. scrollable დამოუკიდებლად thead და tfoot ელემენტებისგან(იხილეთ ოფიციალური ტესტ კეისი, თუმცა მხოლოდ მოზილაში მუშაობს უახლეს IE7 – ში არ მუშაობს), ხოლო მეორეს მხრივ ტაბულარული მონაცემების დაჯგუფება ბევრად უფრო ლოგიკურად შეიძლება რამდენიმე tbody ელემენტში და სხვადასხვა თუმცა ურთიერთდაკავშირებულ მონაცმებებთან დამოუკიდებლად მუშაობის ბევრად უფრო მოქნილი და ბუნებრივი გზა ჩნდება.

COLGROUP და COL ელემენტები:
ამ ელემენტების გამოიყენებით შესაძლებელი სვეტების დაჯგუფება და დამატებითი სტრუქტურული წესების განსაზღვრა მათთვის.

მაგალითში ნაჩვენებია თუ როგორ შეიძლება განვსაზღვროთ უჯრის სიგანე დამოუკიდებლად ყველა სვეტისათვის. span ატრიბუტის მნიშვნელობა განსაზღვრავს თუ რამდენ სვეტზე უნდა გავრცელდეს განსაზღვრული წესი.

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

გარდა იმისა რომ ცხრილი აბსოლუტურად ლოგიკურად არის ფორმირებული ასევე საგულისხმოა ის ფაქტი რომ ყველა გამოყენებულ ელემენტთან დამოუკიდებლად შეგვიძლია ვიმუშავოთ CSS – ითა თუ JavaScript – ით.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#data-table, #data-table th, #data-table td {
  border: 1px solid black;
}

#data-table caption {
  text-align: left;
  background-color: silver;
}

#data-table #tbody-one tr {
  background-color: lightblue;
}

#data-table #tbody-two tr {
  background-color: pink;
}

#data-table #tbody-three tr {
  background-color: green;
}

#data-table tfoot tr td {
  text-align: right;
  background-color: orange;
}

უფრო მეტი დეტალებისათვის შეგიძლიათ იხილოთ w3c – ს ოფიციალური დოკუმენტი.

ტეგები:

4 Responses to “table ელემენტის სასარგებლო დეტალები”

  1. kalosha says:
    March 17, 2007 at 7:44 am

    იოსებ,

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

    კალოშა

  2. იოსები says:
    March 17, 2007 at 7:48 am

    კი როგორ არ შეიძლება, საერთოდ შეგიძლია რომელიმე TBODY – ის შიგნით არსებული სტრიქონები და ველების სტილები ცვალო ისე რომ THEAD, TFOOT და სხვა TOBODY – ელემენტებს შიგნით არსებული სტრიქონებისა და სვეტების სტილები უცვლელად დარჩეს…

  3. levancho says:
    March 28, 2007 at 1:04 pm

    აასევე ძალიან კარგი რამ რაც Tbody ის აქვს არის ავტომატური სკროლბარის დამატება როდესაც მონაცემები მაგაში მისივე height ატრიბუტის ცვლადზე მეტ სიმაღლეს დაიკავებენ.
    “არ გავცვლი ტებელ ტაგებსა , სულ ახალ დივებზედაოო.”

  4. იოსები says:
    March 28, 2007 at 10:35 pm

    ლევან მიწერია პოსტში TBODY – ს მაგ შესაძლებლობის შესახებ და თავისი ტესტ კეისიც აქვს მითითებული :)

დატოვე კომენტარი:

ქართული კლავიატურა, ჩართვა/გამორთვა კლავიშით "~"