«
»

<thead>, <tbody> & <tfoot> რა საჭიროა ეს სამი ტეგი?

Feb 24 2007

რა საჭიროა ეს სამი ტეგი? შეიძლება თუ არა გამოვიყენოთ რამეში? ეს და სხვა მსგავსი შეკითხვები მაწუხებდა მუდმივად სადაც კი ამ ტეგებს მოვკრავდი თვალს… თუმცა დიდ მნიშვნელობას არასოდეს არ ვანიჭებდი მათ არსებობას… ერთადერთი როდესაც ინტენსიურად დავიწყე JavaScript DOM API-ს გამოყენება აღმოჩნდა რომ თუ სკრიპტი სრულდებოდა IE-ში, ხოლო მისი მეშვეობით არსებულ ცხრილში გვინდოდა ახალი სტრიქონის (tr) დამატება დინამიურად, <tbody> ტეგის გარეშე ეს სკრიპტი არ მუშაობდა… მაგ მომენტიდან მივეჩვიე ამ ტეგის გამოყენებას ცხრილებში, თუმცა thead და tfoot არასოდეს არ გამომიყენებია…

საერთოდ რატომ უნდა გამოვიყენოთ ცხრილი? ბევრი web 2.0 ენთუზიასტი ბევრს კამათობს ამაზე და არც მე ვარ გამონაკლისი… თუმცა არის შემთხვევები როდესაც ცხრილების გამოყენება გარდაუვალია, და ასეთი შემთხვევა არც თუ იშვიათია. რაც შეეხება იმას რომ ცხრილი არ გამოვიყენოთ საერთოდ მე პირადად უზარმაზარ სისულელედ მიმაჩნია და არგუმენტად ისიც კმარა ჩემთვის რომ Google და Yahoo საჭიროების მიხედვით თამამად და წარმატებულად იყენებენ ცხრილებს. თუმცა ეს სხვა თემაა და ჯობია დავუბრუნდე მთავარ საკითხს…

გარკვეული პერიოდის წინ, კონკრეტულ ამოცანაზე მუშაობისას საჭირო აღმოჩნდა ისეთი ცხრილის გაკეთება რომელსაც ექნებოდა head, თავისთავად body და footer. ცხრილის სამივე ნაწილს ტავის დანიშნულება აქვს რაც მათი დასახელებებიდან ჩანს რაც 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
<table id="grid">
    <tbody id="gridbody">
       
        <!-- table header -->
        <tr class="table_header">
            <th>Column One</th>
            <th>Column Two</th>
        </tr>
        <!-- end table header -->
       
        <!-- table content -->
        <tr class="table_row">
            <td>Cell Data One</td>
            <td>Cell Data Two</td>
        </tr>
        <!-- end table content -->
       
        <!-- table footer -->
        <tr class="table_footer">
            <td colspan="2"><input type="button" onclick="addDynamicRow()" name="add_row" value="Add dynamic row" /></td>
        </tr>
        <!-- end table footer -->
       
    </tbody>
</table>

როგორც ცხრილის კომენტარებიდან ჩანს, ყველაფერი თავმოყრილი იყო tbody ტეგს შიგნით და ცხრილის header, მონაცემების სტრიქონებსა და ცხრილის footer – ს შორის განსხვავება გამოიხატებოდა მხოლოდ მათ კომენტარებსა და class ატრიბუტის მნიშვნელობებით. ცხრილის ბოლო სტრიქონში განთავსებული ღილაკის მეშვეობით ცხრილს უნდა დამატებოდა ახალი სტრიქონი.

ერთი შეხედვით ყველაფერი “იდეალურად” და “ლოგიკურად” მეჩვენა მაგრამ ამოცანაში ნათქვამი იყო რომ გარკვეული შემთხვევების მიხედვით ცხრილს ახალი სტრიქონი დაემატებოდა ან დასაწყისში(prepend) ან ბოლოში(append) თუმცა ამას დიდი მნიშვნელობა არ მივანიჭე თავიდან. დაიწერა შესაბამისი JavaScript კოდი რომელიც ამ ამოცანას ასრულდებდა… მაგრამ არა ისე როგორც ეს მე მსურდა. აღმოჩნდა რომ თუ სტირქონს დავამატებდი თავში იგი აღმოჩნდებოდა ცხრილის დასაწყისში მაგრამ თვითონ სვეტების დასახელებამდე… ბოლოში დამატების შემთხვევაში კი “footer”-მდე რაც რა თქმა უნდა არასწორი იყო.

პირველად ვიფიქრე რომ სკრიპტისთვის დამემატებინა დამატებითი ლოგიკა რომელიც დინამიურ სტრიქონს დაამატებდა ერთ შემთხვევაში პირველი სტრიქონის შემდეგ, ხოლო მეორე შემთხვევაში ბოლო სტრიქონის წინ… ეს აზრი თავიდანვე არ მომეწონა და არაბუნებრივად მეჩვენა, რატომ უნდა ეთვალა სკრიპტს რომელი იყო პირველი და რომელი იყო ბოლო სტრიქონი.. თუ რთული შემთხვევა იქნებოდა და footer არა ერთი არამედ რამდენიმე სტრიქონისგან იქნებოდა შედგენილი? ან პირიქით header იქნებოდა ასეთი? ფიქრის და წვალების მერე როგორც იქნა მივხვდი რომ თუ ვიყენებდი tbody ტეგს რატომ არ უნდა გამომეყენებინა thead ტეგი? ვცადე და append-ის შემთხვევაში შედეგი მიღწეული აღმოჩნდა, თუმცა footer – ის პრობლემა ისევ მოუგვარებელი რჩებოდა სწორედ ამ დროს გამახსენდა tfoot ტეგის არსებობის შესახებ გამოვიყენე ეს ტეგიც და ამ შემთხვევაშიც გამიმართლდა მოლოდინი. მაგრამ რამაც ყველაზე მეტად გამახარა ასეთი კოდი აბსოლუტურად XHTML valid აღმოჩნდა. ცხრილმა კი მიიღო ასეთი სახე:

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
<table id="grid">
   
    <!-- table header -->
    <thead>
        <tr class="table_header">
            <th>Column One</th>
            <th>Column Two</th>
        </tr>
    </thead>
    <!-- end table header -->
   
    <!-- table footer -->
    <tfoot>
        <tr class="table_footer">
            <td colspan="2"><input type="button" onclick="addDynamicRow()" name="add_row" value="Add dynamic row" /></td>
        </tr>        
    </tfoot>
    <!-- end table footer -->

    <!-- table content -->
    <tbody id="gridbody">        
        <tr class="table_row">
            <td>Cell Data One</td>
            <td>Cell Data Two</td>
        </tr>
    </tbody>
    <!-- end table content -->
</table>

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

ტეგები:

9 Responses to “<thead>, <tbody> & <tfoot> რა საჭიროა ეს სამი ტეგი?”

  1. irakli says:
    March 5, 2007 at 3:10 am

    რამდენიმე შენიშვნა:
    1) thead-ის კიდევ ერთი პრაქტიკული მნიშვნელობა ისაა რომ წესით ბრაუზერი უნდა იყენებდეს ტჰედს პრინტერზე ამობეჭდვისას. თუ ცხრილი რამდენიმე ფურცელზე იჭიმება, ტჰედი უნდა გაიმეოროს ყოველ გვერდზე (სპეციფიკაციით ეგრეა).

    2) ვინ სად რას კამათობს არ ვიცი, მაგრამ წესით და სტანდარტების მიხედვით (web 2.0 არაფერ შუაშია), რეკომენდირებულია რომ table არ იქნეს გამოყენებული დიზაინის ელემენტების განლაგებისთვის, ამისთვის გამოყენებული იქნას div და CSS, მაგრამ ეს არ ნიშნავს რომ HTML Table, Tr, Th, Td საერთოდ არაა საჭირო. მათი გამოყენება უნდა მოხდეს დანიშნულებისამებრ, ანუ – ცხრილური ინფორმაციის რენდერირებისთვის.

  2. იოსები says:
    March 9, 2007 at 1:24 pm

    კარგია :)

  3. levancho says:
    March 29, 2007 at 9:56 am

    ჩემი პირადი აზრით(და მომიტევეთ თუ უხეშად გამომივიდა) web 2 სტანდარტები არის სრული სისულელე, არცერთი არგუმენტი არ არსებობს იმისთვის თუ რატომ ჯობია div ით აწყობa table ებს?(მიუხედავად იმის რომ მე ვფიქრობ div საკმაოდ ელეგანტური და აუცილებელი ნაქილია მარკაპის) გარდა ერთი მიზეზის : table ტაგის დანიშნულება არ არის მთლიანი საიტის მარკაპს შეიცავდეს, მესმის რომ იყოს ისეთი არგუმენტი ასეთი :
    ტაბლებით გაკეთებული საიტი უფრო ნელა იტვირთება ,
    მაშინ სრულიად დავეთანხმებოდი,იმიტომ რომ მე პირადად მიმაჩნია რომ სპეციფიკაციები ჩამოყალიბება უნდა გამოდინარეობდეს პირველრიგში საიტის მომხმარებლის თვალზაზრისიდან და არა ვიღაც დეველოპერების რომლებსაც უნდათ დაამტკიცონ თუ რამდენად მაღალი დონის პროფესიონალები არიან, ეხლლაც არ მესმის რატომ არის ეს რესტრიკცია ჩადებული, იყოს ორივე ვისაც რომელი უნდა ის გამოიყენოს, ბოლოს და ბოლოს, ამდენი წლები პრესის ქვეში გატარებული ტებელ ტაგს არცერთი დეველოპერ არ დაუტოვებია უკმაყოფილო და ეს შესანიშნავი არტიკლიც ამტკიცებს იმას რომ ტებელ ტაგის უკან გაცილებით უფრო დიდ ძალა იმალება ვიდრე ბვრმა იცის, მე ერთი რამის მჯერა, ყველანაირ სპეციფიკაცია უნდა ითვალისწინებდეს დეველოპერს “fexibility” …
    არის კიდე უფრო ტექნიკური არგუმენტაციაც თუ რატო ჯობია წოგ შემთხვევაში ტებელი დივს მაგრამ არცერთი არგუმენტი არ მსმენია (ტექნიკური თვალზასრისიდან , თუ რატო აჯობებს დივ ტებლელს რომელიმე კონკრეტულ სიტუაციაში , თუ ამას ვინმე დაასაბუთებს ძალიან გამიხარდება .)

  4. იოსები says:
    March 29, 2007 at 12:01 pm

    სიმართლე გითხრა არ მესმის შენი პათოსი… კამათს აზრი ექნებოდა რომ არა ეს ფრაზა:

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

    რა შუაში სპეციფიკაციის ჩამოყალიბება მომხმარებლის თვალსაზრისიდან? ან ვიღაც დეველოპერის პროფესიონალიზმის წარმოჩენა რა შუაშია?

    საიტი ფოტოშოპში დახატული სურათი ხომ არ არის? პირველ რიგში ის დოკუმენტია… და დოკუმენტი უნდა იყოს სწორი, არა მარტო იმ თვალსაზრისით რომ ვალიდაცია გაიაროს არამედ სემანტიკურად სწორი უნდა იყოს…

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

    რითი ჯობია ცხრილს დივი? ნუ პრინციპში ისევ სპეციფიკაციშია ნათქვამი რომ ტაბულარული მონაცემები ცხრილით უნდა ავსახოთ ხოლო ლეიაუტის ასაწყობად იგი არ უნდა გამოვიყენოთ… ასევე მარაზმში გადაიზარდა ე.წ. Tableless მარკაპი და ხალხმა უკვე სპან ტეგებით და ათასი სისულელეების გამოგონებით დაიწყეს ტაბულარული მონაცემების ასახვა მაგრამ ეგ უკვე უკიდურესობა კი არა დეგენერატიზმია…

  5. levancho says:
    March 29, 2007 at 2:13 pm

    ეგ არგუმენტი პირველი რიგში ეხება იმ ჯგუფს ვინც სათავეში უდგას ამ სპეციფიკაციების ჩამოყალიბებას, (ნამდვილად არ მინდა ყველა ერთ ქვაბი მოვხარშო) მაგრამ აბა რით გინდა ის ფაქტი ახსნა როდესაც, გამოდის წიგნი “table less design” და მერე სპეციფიკაცია მხარს უჭერს მაგას და ამბობს ლალალა ლალალა ძირს ტაბელი გამოიყენეთ დივები, ეს არის სოსო სუფტა ბიზნესი, მასე იმართება ყველას სფეროში და არის უბრალო ხელოვნურ-ევოლუციური მიდგომა ადაამიანის ფსიქოლოგიაზე ანუ ხელოვნურად ქმნიან ევოლუციურ პაგოდას ადამინისთვის, ანუ დღეს თუ ტებელების პარადია , ხვალე დივების პარადი უნდა იყოოოს(უნდა იყოოს მეთქიიი !!!) და ცეველოპერები თურმე ცხვარივით რასაც სფეციფიკაციის გუნდი იტყვის, ჰოიიი ბრძანებელო, მართალია , ნუ მართალია რას ამბობ,უნდა დაეთანხმონ?
    ეს არის სოსო დაავადებული “არქიფო სეთურისებური აზროვნება”
    მაშინ ერთი ტექნიკური მიზეზი ერთი მაინც დაწეროს ვინმემ “ტექნიკური და არა ისევ იდეოლოგიურო” სადაც div-ის გამოყენება უფრო ხელსაყრელი იქნებოდა ვიდრე ტებელის, როდესაც ბევრი მაგალითია პირიქით ანუ არის ბევრი სიტუაციები სადაც ტეიბელით რასაც გააკეთებ მაგას დივ ით უბრალოდ ვერ გააკეთებ . თუ ვისაუბრებთ იმაზე რომ თურმე ტებელი არ ყოფილა გათვლილი საიტის ასაგებად, მასე html საერთოდ არ იყო განკუთვნილი ინტერნეტისთვის და TCP/IP ამერიკის სამხედრო ინფორმაციის გადაცემისთვის იყო მოგონილი ცივი ომის პერიოდში,DNS Server ების ასევე სულ სხვა დანიშნულებებისთვის იყო მოგონილ.რატომ ვიყენებთ ან ერთს ან მეორეს ან მესამეს რომლებსაც ორიგინალურად სულ კატეგორიულად სხვა დანიშნულები და დატვირთველი ქონდათ? რატო მაგაზე არავინ არაფერს არ ამბობს, მოვიგონოთ მაშინ ახალი მარკაპი სპეციფიურად ინტერენეტისთვის, ? ახალი პროტოკოლი …

  6. იოსები says:
    March 30, 2007 at 12:16 am

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

    აბა წარმოიდგინე შენ იგივე ბროუზერების ვენდორები რომ არ იცავდნენ მეტნაკლებად სპეციფიკაციას და ამაზე აჟიოტაჟი არ იყოს ატეხილი რა იქნებოდა?

    სპეციფიკაცია არ არის იმისათვის რომ ვინმე უფრო მაგარი “როჟა” გამოჩნდეს…

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

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

    რა არის ამაში რთული?

  7. levani says:
    March 30, 2007 at 5:42 am

    სოსო, შენი ბოლო კომენტარიდან გამომდინარე არაფერი კონკრეტული არ დაგისაბუთებია, რაც შეეხება ქაოოს, არა ვარ მომხრე ქაოსის, პრიქით აზრობრივად ჩამოყალიბებული სპეციფიკაციას არაფერი არ ჯობია და სრულიად მომხრევარ, მაგრამ შეხედე, ეგდედ წოდებული
    web 2 სპეციფიკაცია თავიდან ბოლომდე გატენილია იდეოლოგიური აზროვნებით და არა აზრობრივი ტექნიკური არგუმენტაციით, მასეთი სპეციფიკაციას კიდევ ჩემის აზრით არანაირ გამართლება არ აქვს,და ვერანაირად ვერ დაიკავებს იმ როლს რასაც სინამდვილეში სპეციფიკაციის დატვირთვა მოითხოვს . სპეციფიკაციაში როგორც ყოველთვის ჩვევია მაგ ჯგუფს.არაფერი არ არის მითითებული კონკრეტული, და ზუსტად მაგ მარაზმის გამო ჯერ კიდევ ვერ გარკვეულა ხალხი იმაშჲ თუ ზისტად რა არის web 2.0 და რა არ არის, ინტერნეტში უკვე 1000 სხვადასხვა აზრი არსებობს მაგის შესახებ, უბრალო მაგალითს შემოგთავაზებ :


    GeSHi Error: GeSHi could not find the language url (using path /home/ioseb/public_html/wp-content/plugins/codecolorer/lib/geshi/) (code 2)

    ერთი ეს ამიხსენი რატო ქვია მაგ ტემპლეიტს web 2.0
    საბოლოო ჯამში მე ყოველთვის შევეწინაამღდეგები უაზრო , სრულიად არატექნოკური დატვირთვის სპეციფიკაციებს,
    რაც შეეხება იმას რო დოკუმენტი სემანტიკურად უნდა იყოს მართებული- რატო ფიქრობ ტეიბელებით აწყობილი დოკუმენტი სემანტიკურარ არამართებულია?
    მარტივი ტესტი ჩაატარე :
    აიღე ორი კომპიუტერი /ერთერთი მათ შორის wide-screen რეზოლუციით , შეადარე თუ გინდა 5 ეგრეთ წოდებული web 2.0 ზე აგებული გვერდი (სერიოზული) და 5 ტებლებით აგებული გვერდი(სერიოზული)მე ვფიქრობ web 2.0 ზე აგებული გვერდებში გაცილებით მეტ ხარვეზებს ნახავ ვიდრე ტებელებით .
    (ეს მეც მაინტერესებს სიმართლე გითხრა)

  8. იოსები says:
    March 30, 2007 at 7:08 am

    ლევან ვიღაცა რაღაცა სწორად არ აკეთებს ეგ არ არის არგუმენტი… თუ ვინმემ CSS არ იცის და ისე აწყობს ლეიაუტს რომ არასწორ დოკტაიპს უთითებს და წარმოდგენა არ აქვს რა არის Boxmodel ეგ იმის პრობლემაა… ცხრილი(table) არის for tabular data და დოკუმენტი არ არის ზოგადად tabular data… DIV (divide თუ არ ვცდები) გამოიყენება დოკუმენტის ლოგიკურ ნაწილებად დასაყოფად.

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

    web 2.0 კიდევ არ არის ტექნოლოგია რომ მასზე ააგო გვერდი… web 2.0 დამოკიდებულებაა მიდგომა და არა ტექნოლოგია ან ვალდებულება თუ არ გინდა ნუ გააკეთებ დოკუმენტებს მაგ მიდგომით და გამოიყენე ისევ ცხრილები და სპეისერ გიფები გიშლის ვინმე? :)

  9. levani says:
    March 30, 2007 at 8:18 am

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

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

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