ცხრილი არის უჯრედების ბადე, რომლებიც ქმნიან სტრიქონებსა და სვეტებს. ცხრილების მაგალითები მოიცავს სხვადასხვა ფინანსურ ანგარიშგებას, სპორტის შედეგებს, კალენდრებს, გრაფიკებს და ა. ინდივიდუალური ქსელის ბლოკს ეწოდება მაგიდის უჯრედი. მაგიდის უჯრედები შეიძლება შეიცავდეს მრავალფეროვან ინფორმაციას, რიცხვების, ტექსტის და ვიდეო და აუდიო ობიექტების ჩათვლით. HTML ენის გამოყენებით ცხრილები იწერება სტრიქონით.
ელემენტი
ემსახურება როგორც კონტეინერს იმ ელემენტებისთვის, რომლებიც განსაზღვრავენ ცხრილის შინაარსს. ცხრილის რიგის შესაქმნელად, თქვენ უნდა დაამატოთ ელემენტის შიგნით
დაწყვილებული ბლოკის ტეგი
(შემოკლებულია ინგლისურიდან. "taye row" - მაგიდის რიგი). რამდენი ტეგია
თქვენ დაამატებთ, იმდენი სტრიქონი ცხრილში და იქნება. ტეგის გახსნა
აღნიშნავს ცხრილში ახალი რიგის დაწყებას. ელემენტები მოთავსებულია მის შემდეგ |
(შემოკლებულია ინგლისურიდან "taye data" - ცხრილის მონაცემები), რომელთაგან თითოეული აღნიშნავს ცალკეულ უჯრედს ამ რიგში. შიგნით ელემენტი |
თქვენ ათავსებთ თქვენს შინაარსს (ტექსტი, რიცხვები, სურათები და ა.შ.) ამ უჯრედში. ხაზის ბოლო მითითებულია დასასრულის ტეგით |
.
ელემენტი
(შემოკლებულია ინგლისურიდან "taYe heading" - ცხრილის სათაური) - მაგიდის არჩევითი ელემენტი, რომელიც გამოიყენება ისევე, როგორც ელემენტი |
თუმცა, მისი მიზანია შექმნას სათაური მწკრივის ან სვეტისთვის. როგორც წესი, ელემენტი |
მოთავსებულია ცხრილის პირველ რიგში. ბრაუზერები აჩვენებენ ტექსტს ელემენტში |
თამამად და ცენტრში იგი უჯრედთან შედარებით. კოდში ელემენტის გამოყენება |
ეხმარება ადამიანებს, რომლებიც იყენებენ ეკრანის წამკითხველებს და ასევე აუმჯობესებს საძიებო სისტემების ინდექსირების ცხრილების მუშაობას.
განვიხილოთ მარტივი ცხრილი, რომელსაც აქვს სამი სტრიქონი და სამი სვეტი, პირველი რიგის უჯრედები შესაბამისი სვეტების სათაურებია. სტანდარტულად, ცხრილები ჩვეულებრივ ნაჩვენებია საზღვრის გარეშე:
მაგალითი: მარტივი HTML ცხრილი
| სათაური 1 | სათაური 2 | სათაური 3 |
|---|
| უჯრედი 2x1 | უჯრედი 2x2 | უჯრედი 2x3 |
| უჯრედი 3x1 | უჯრედი 3x2 | უჯრედი 3x3 |
მაგიდის საზღვარი
ჩვენ უკვე ვიცით, რომ მაგიდები ნაგულისხმევად ნაჩვენებია საზღვრის გარეშე. მაგიდის გარშემო საზღვრის დასამატებლად, თქვენ უნდა მიუთითოთ რამდენიმე მარტივი სტილის ფურცლის წესი თქვენს დოკუმენტში. ქონება საზღვარიაკონტროლებს ცხრილის ქსელის ხაზების ჩვენებას და ასევე ადგენს ცხრილის გარშემო საზღვრის სიგანეს პიქსელებში. მაგიდის გარშემო და უჯრედებს შორის ჩნდება საზღვარი. დაამატეთ ერთი პიქსელიანი ფართო ჩარჩო უკვე შექმნილ ცხრილს, თვისების დაყენებით საზღვარიმაგიდის ყველა ელემენტისთვის, მაგალითად, ასე:
მაგალითი: საკუთრების გამოყენება საზღვარი
ჩარჩო მაგიდის გარშემო
| სათაური 1 | სათაური 2 | სათაური 3 |
|---|
| უჯრედი 2x1 | უჯრედი 2x2 | უჯრედი 2x3 |
| უჯრედი 3x1 | უჯრედი 3x2 | უჯრედი 3x3 |
ერთი მაგიდის ჩარჩო
სტანდარტულად, მაგიდის მიმდებარე უჯრედებს ექნებათ საკუთარი საზღვარი. ეს იწვევს ერთგვარ "ორმაგ საზღვარს", როგორც ეს მოცემულია ზემოთ მოყვანილ მაგალითში. "ორმაგი საზღვრის" მოსაშორებლად დაამატეთ CSS თვისება საზღვრის ჩამონგრევათქვენი სტილის ფურცელზე:
მაგალითი: საკუთრების გამოყენება საზღვრის ჩამონგრევა
ჩარჩო მაგიდის გარშემო
| სათაური 1 | სათაური 2 | სათაური 3 |
|---|
| უჯრედი 2x1 | უჯრედი 2x2 | უჯრედი 2x3 |
| უჯრედი 3x1 | უჯრედი 3x2 | უჯრედი 3x3 |
მაგიდის ველები და ინტერვალი
სტანდარტულად, ცხრილის უჯრედები ზომისაა, რათა შეესაბამებოდეს მათ შინაარსს, მაგრამ ხანდახან აუცილებელია ცხრილის მონაცემების ირგვლივ დატოვება. ვინაიდან ინტერვალი და მინდვრები დაკავშირებულია მონაცემთა პრეზენტაციის ელემენტებთან, ეს სივრცე მორგებულია CSS სტილის ცხრილების გამოყენებით. უჯრედის ველი ( ბალიში) არის მანძილი უჯრედის შინაარსსა და მის საზღვარს შორის. მის დასამატებლად გამოიყენეთ ქონება ბალიშიელემენტად |
ან |
... უჯრედების დაშორება ( საზღვრების დაშორებაარის მანძილი მათ შორის ( |
ან |
). პირველ რიგში მიანიჭეთ მნიშვნელობა ცალკექონება საზღვრის ჩამონგრევაელემენტი
და შემდეგ დააყენეთ ინტერვალი უჯრედებს შორის პარამეტრის მნიშვნელობის შეცვლით საზღვრების დაშორება... ადრე, ატრიბუტები იყო პასუხისმგებელი ველზე და უჯრედების დაშორებაზე. ფიცარიდა უჯრედების განლაგებაელემენტი
მაგრამ ისინი მოძველებული იყო HTML5 სპეციფიკაციაში.
გამოყენების მაგალითი ბალიშიდა საზღვრების დაშორება:
მაგალითი: თვისებების გამოყენება ბალიშიდა საზღვრების დაშორება
შევსება და საზღვრის დაშორება
| უჯრედი 1 | უჯრედი 2 |
| უჯრედი 3 | უჯრედი 4 |
მაგიდის სიგანე
ბრაუზერის ფანჯარაში ცხრილის მიერ დაკავებული სიგანე შეიძლება დადგინდეს თვისების გამოყენებით სიგანე CSS, პიქსელებში ან პროცენტებში. პიქსელებში ცხრილის სიგანის განსაზღვრა საშუალებას გაძლევთ განსაზღვროთ მისი ზუსტი სიგანე. პროცენტი საშუალებას გაძლევთ გააკეთოთ მაგიდა მოქნილი, ე.ი. ის "გაიწელება" ან "შემცირდება" იმისდა მიხედვით, თუ რა სხვა ელემენტებია გვერდზე და რამდენად დიდია ბრაუზერის ფანჯარა.
აქ მოცემულია ქონების გამოყენების მაგალითი სიგანე: მაგიდა (სიგანე: 100%;) მაგალითი: საკუთრების გამოყენება სიგანე
| უჯრედი 1 | უჯრედი 2 |
| უჯრედი 3 | უჯრედი 4 |
სიგანე: 100%
| უჯრედი 1 | უჯრედი 2 |
| უჯრედი 3 | უჯრედი 4 |
უჯრედების გაერთიანება (კოლპანი და რიგები)
ცხრილის სტრუქტურის ერთ -ერთი მთავარი მახასიათებელია უჯრედის შეხამება, რაც გულისხმობს უჯრედის გაჭიმვას რამდენიმე რიგის ან სვეტის გასწვრივ. ეს იძლევა რთული მაგიდის სტრუქტურებს: სათაურები
ან უჯრედები |
გაერთიანებულია ატრიბუტების დამატებით კოლპსპანიან რიგები... ატრიბუტი კოლპსპანიგანსაზღვრავს უჯრედების რაოდენობას, რომელსაც ჰორიზონტალურად ვრცელდება მოცემული უჯრედი და რიგები- ვერტიკალურად.
სვეტების გაერთიანება
სვეტის შეთავსება მიიღწევა ატრიბუტის გამოყენებით კოლპსპანიელემენტებში |
ან |
- უჯრედი გადაჭიმულია მარჯვნივ შემდგომი სვეტების დასაფარავად. შემდეგ მაგალითში, ატრიბუტის მნიშვნელობა კოლპსპანიუდრის 2 -ს, რაც იმას ნიშნავს, რომ უჯრედი უნდა მოიცავდეს ორ სვეტს.
მაგალითი: ატრიბუტის გამოყენება კოლპსპანი
კოლსპანის ატრიბუტი
| კოლპსპანი= "2"> უჯრედი ორი სვეტით |
|---|
| უჯრედი 1 | უჯრედი 2 |
| უჯრედი 3 | უჯრედი 4 |
სიმებიანი სიმები
სტრიქონები გაერთიანებულია ატრიბუტის გამოყენებით რიგები, იქცევიან ზუსტად ისე, როგორც გაერთიანებული სვეტები, ერთადერთი განსხვავებით, რომ უჯრედების დიაპაზონი არის ზემოდან ქვემოდან და მოიცავს მრავალ რიგს.
ეს მაგალითი ცხრილის პირველ უჯრედს ორი სტრიქონით ქვემოთ აწვდის:
მაგალითი: ატრიბუტის გამოყენება რიგები
| უჯრედი ორ ხაზზე |
უჯრედი 1 | უჯრედი 2 |
|---|
| უჯრედი 3 | უჯრედი 4 |
Rowspan ატრიბუტი
| რიგები= "2"> უჯრედი ორ სტრიქონზე |
უჯრედი 1 | უჯრედი 2 |
|---|
| უჯრედი 3 | უჯრედი 4 |
ცხრილის სათაური
წყვილი ტეგი გამოიყენება ცხრილის სათაურის ან წარწერის შესაქმნელად
(ინგლისური წარწერიდან - ხელმოწერა). ელემენტი
არის ცხრილის სათაურის ორგანიზებისთვის. მდებარეობს ეტიკეტის შემდეგ
მაგრამ მწკრივის ან უჯრედის აღწერის გარეთ.
მაგალითი: ტეგის გამოყენება
წარწერის ელემენტი
ეს არის ცხრილის სათაური
| უჯრედი ორ ხაზზე |
უჯრედი 1 | უჯრედი 2 |
|---|
| უჯრედი 3 | უჯრედი 4 |
ტეგების დაჯგუფება მაგიდის ნივთებისთვის
ცხრილის ელემენტების დაჯგუფებისთვის გამოიყენეთ ტეგები
,
და
... ისევე, როგორც ვებ გვერდი შეიძლება შეიცავდეს სათაურს, სხეულს და ქვედა კოლონტიტულს, მაგიდას შეუძლია შეიცავდეს თავი, სხეული და ქვედა კოლონტიტული. სტრიქონების ლოგიკურად დაჯგუფების მიზნით ცხრილის ზედა ნაწილში (ანუ ცხრილის ზედა თავის შესაქმნელად) გამოიყენეთ ტეგი
... ცხრილის სათაურები უნდა განთავსდეს ელემენტში
, მაგალითად:
| სათაური 1 | სათაური 2< /th> |
|---|
ცხრილის ძირითადი შინაარსი (სხეული) უნდა იყოს ელემენტის შიგნით
(შეიძლება რამდენიმე ასეთი ბლოკი იყოს ცხრილში). სტრიქონების ლოგიკურად დაჯგუფების მიზნით ცხრილის ბოლოში (ანუ ცხრილის "ქვედა კოლონტიტულის" შესაქმნელად) გამოიყენეთ ტეგი
(ერთ ცხრილში დასაშვებია ერთზე მეტი ტეგი
). წყაროს კოდში, ტეგი
მოთავსებულია ეტიკეტის წინ
... ლოგიკური დაჯგუფების გარდა, ელემენტების გამოყენების ერთ -ერთი მიზეზი
და
ეს არის ის, რომ თუ თქვენი მაგიდა ძალიან გრძელია ერთდროულად ეკრანზე გამოსაჩენად (ან დასაბეჭდად), მაშინ ბრაუზერი აჩვენებს სათაურს (
) და ბოლო ხაზი (
) როდესაც მომხმარებელი გადადის თქვენს ცხრილში.
მაგალითი: ტეგები
,
და
Thead, tbody და tfoot ტეგები
| ეს არის ცხრილის სათაური |
|---|
| ეს არის მაგიდის ქვედა კოლონტიტული |
| უჯრედი 1 | უჯრედი 2 | უჯრედი 3 | უჯრედი 4 |
იმისდა მიუხედავად, რომ ჩვენ წინ ვართ
დაემატა
, ის მაინც ცხრილის ბოლოს ჩანს. ეს გამომდინარეობს იქიდან, რომ
შეიძლება შეიცავდეს ბევრ სტრიქონს. მაგრამ ბრაუზერმა უნდა გამოიტანოს ცხრილის ბოლო, სანამ არ მიიღებს მონაცემთა ყველა (პოტენციურად მრავალრიცხოვან) რიგებს. Ამიტომაც
კოდი იწერება ელემენტის წინ
.
Დავალებები
ამოიღეთ მაგიდის ორმაგი საზღვარი
სტანდარტულად, ცხრილის საზღვარს აქვს ორმაგი საზღვრის ეფექტი, შეცვალეთ კოდი ისე, რომ ამ საზღვრის ყველა ხაზი ერთიანი გახდეს.
ცხრილები არის ერთ -ერთი ყველაზე მნიშვნელოვანი, მაგრამ რთული ელემენტი, რომელიც უნდა იყოს წარმოდგენილი ვებ გვერდებზე. მათი დახმარებით მოსახერხებელია მნიშვნელოვანი და სასარგებლო ინფორმაციის წარმოდგენა საკმაოდ ლაკონურ ფორმაში. რასაკვირველია, სხვადასხვა ძრავზე მომუშავე შაბლონების რედაქტორთა უმეტესობა საშუალებას გაძლევთ ავტომატურად ჩასვათ ცხრილი საიტის გვერდზე ან ცალკე პუბლიკაციაში, მაგრამ რა მოხდება, თუ ვებ რესურსის დიზაინი, მისი გვერდები იქმნება ნულიდან? შემდეგ ახალბედა ოსტატს შეიძლება შეექმნას პრობლემა: როგორ გავაკეთოთ ეს. მოდით გაერკვნენ, თუ როგორ სწორად და სწრაფად შევქმნათ ეს ელემენტი. რედაქტორის არჩევაუპირველეს ყოვლისა, ცხრილის შექმნის დაწყებიდან თქვენ უნდა გადაწყვიტოთ ის რედაქტორი, რომელშიც იმუშავებთ. რასაკვირველია, უმარტივესი გზაა აირჩიოთ პროგრამა, რომელშიც შექმნით საიტის მთავარ კოდს. მაგრამ უმჯობესია გამოიყენოთ კარგი ძველი რვეული ამ მიზნებისათვის. თქვენ შეიძლება გკითხოთ, რატომ გაართულებთ თქვენს ცხოვრებას, რადგან თუ ყველაფერს აკეთებთ ერთდროულად რედაქტორში, მაშინ შედეგიც დაუყოვნებლივ ჩანს და ასევე შეგიძლიათ გამოიყენოთ პროგრამის მინიშნებები. დიახ, ეს მართალია, მაგრამ ნულიდან ცხრილის შექმნით თქვენ არა მხოლოდ შეძლებთ საფუძვლიანად შეისწავლოთ მისი შექმნის პრინციპი, არამედ თავიდან აიცილოთ შემაშფოთებელი შეცდომები და შეცდომები მთავარ კოდში. ხანდახან ხდება ისე, რომ კურსორი შემთხვევით ქვევით მოძრაობს და შეცდომის წერის პროცესში კოდს გადაეყრება, რომლის მოძებნა ზოგჯერ ძნელია. მას შემდეგ რაც შექმნით ცხრილს ბლოკნოტში, შეგიძლიათ დააკოპიროთ მისი შიფრი და ჩასვათ იქ სადაც გსურთ. ალგორითმი ცხრილის შესაქმნელადპირველი, მოდით შევადგინოთ მოკლე ალგორითმი, თუ როგორ უნდა გავაკეთოთ ცხრილი HTML- ში. ეს კეთდება ისე, რომ თქვენ გესმოდეთ თითოეული ნაბიჯის თანმიმდევრობა. შემდეგ ჩვენ გავაანალიზებთ ზუსტად როგორ შევასრულოთ თითოეული პუნქტი. 
დავიწყოთ მოსამზადებელი ნაბიჯებით. 1. დახაზეთ ცხრილის სქემატური სურათი ფურცელზე. 2. ჩვენ ვითვლით ხაზებისა და უჯრედების რაოდენობას. თუ ამ უკანასკნელის რიცხვი განსხვავებულია, თითოეული რიგისთვის ცალკე ვითვლით. 3. განსაზღვრეთ სათაურის უჯრედების რაოდენობა მწკრივში (მაგალითად, უჯრედები "არა", "სახელი" და ა.შ.). 4. ჩამოწერეთ ცხრილის ძირითადი პარამეტრები - ფერი, სიმაღლე და სიგანე, ტექსტის გასწორება - ზოგადად, რასაც თქვენ თვლით საჭიროდ. 1. ჩადეთ ცხრილის ტეგები. 2. ჩასვით ხაზის ტეგები თქვენთვის საჭირო ნომრის მიხედვით. 3. სტრიქონებში ჩასვით უჯრედების ტეგები (რეგულარული და კაპიტალური), ასევე იმ რიცხვის საფუძველზე, რომელიც თქვენ დაწერეთ ქაღალდზე. 4. დააყენეთ პარამეტრები ცხრილისთვის მთლიანად. 5. საჭიროების შემთხვევაში, ინდივიდუალური უჯრედების ინდიკატორების დაყენება. 6. ჩვენ ვავსებთ ჩვენს უჯრედებს ტექსტით. 
შექმენით მაგიდაასე რომ თქვენ შეარჩიეთ რედაქტორი, ახლა მოდით გავარკვიოთ როგორ შევქმნათ ცხრილი HTML- ში. ტეგი, რომლითაც ცხრილი არის ჩასმული გვერდის კოდში ( ), არის დაწყვილებული, ანუ ჩვენი მშენებლობა იწყება ამ ნიშნით და მთავრდება .ცხრილის ტეგების ჩასმის შემდეგ, ჩვენ ვაგრძელებთ რიგების და უჯრედების შექმნას. დაუყოვნებლივ, ჩვენ აღვნიშნავთ, რომ ეს ელემენტები ასევე დაწყვილებულია. წარწერა განსაზღვრავს სტრიქონებს და | - უჯრედები. სათაურის უჯრედებისთვის გამოიყენეთ დაწყვილებული ელემენტი | . როგორც უკვე აღვნიშნეთ, პირველი ნაბიჯი არის ხაზების შედგენა, შემდეგ მათში უჯრედების ჩაწერა. იმისათვის, რომ არ დაბნეულიყავით, ჩვენ გირჩევთ, ან ჩაწეროთ თითოეულ ბლოკს შორის ერთ ან ორ სტრიქონში, ან ჩაწეროთ ელემენტების ახალი ბლოკი "ტაბ" ღილაკის გამოყენებით. როგორ შეიძლება გამოიყურებოდეს? Მასე: ;;| P / p No. | ;| გვარი | ; ;;| 1 | ;| ივანოვი | ; | ; .
როგორც ხედავთ, ამაში რთული არაფერია. მთავარი ის არის, რომ არ იყოს დაბნეული ხაზების და უჯრედების რაოდენობაში. წინააღმდეგ შემთხვევაში, მაგიდა შეიძლება დაიშალოს. ჩვენ განვიხილეთ HTML– ში ცხრილის შექმნა, ახლა ჩვენ შეგვიძლია გავაგრძელოთ როგორც მატრიცის პარამეტრები, ასევე მისი რიგები და უჯრედები. 
ცხრილის პარამეტრებიროდესაც კოდი იწერება, ყურადღება უნდა მიაქციოთ შემდეგ პუნქტებს: საზღვრების გასწორება, ფონი, ტექსტი და ა. ცხრილის პარამეტრები მითითებულია ტეგში ... Ესენი მოიცავს:1. საზღვარი - საზღვრების სიგანე. იგი დადგენილია როგორც მთელი რიცხვი. სტანდარტულად, ნებისმიერი ცხრილის საზღვრები ნულია. 2. Bordercolor - საზღვრის ფერი. ის შეიძლება დაყენდეს როგორც თექვსმეტობითი ფერის კოდი (# 00008B) და მისი სახელი ინგლისურად (DarkBlue). ის ყოველთვის ნაცრისფერია ნაგულისხმევად. 3. Bgcolor - ასევე მითითებულია კოდის ან სახელის მიხედვით. 4. გასწორება - ტექსტის გასწორება მაგიდის უკან. ნაგულისხმევი მარცხნივ გასწორებულია. ამ პარამეტრის შემდეგი პარამეტრები არსებობს: - მარცხნივ - გადაახვიეთ მარჯვნივ;
- მარჯვნივ -მარცხნივ გადახვევა;
- ცენტრი - აჩვენებს მაგიდას ცენტრში შეფუთვის გარეშე.
5. სიგანე და სიმაღლე - მაგიდის სიგანე და სიმაღლე. მისი დაყენება შესაძლებელია როგორც პიქსელებში, ასევე პროცენტულად (ბრაუზერის ფანჯრის ზომასთან შედარებით). ამა თუ იმ ინდიკატორის დანიშვნისას განსაკუთრებული ყურადღება უნდა მიაქციოთ დიზაინს. პარამეტრს უნდა მოჰყვეს "თანაბარი" ნიშანი, რასაც მოჰყვება მითითებული მნიშვნელობა ბრჭყალებში. რაც შეეხება ტექსტის ფერს, ის სტილირებულია ისევე, როგორც ჩვეულებრივი ტექსტი HTML ფორმატში. მაგიდის დიზაინის მაგალითი: ;;| P / p No. | ;| გვარი | ; ;;| 1 | ;| ივანოვი | ; | ; .
სიმებიანი პარამეტრებიამრიგად, ჩვენ უკვე გავარკვიეთ, თუ როგორ უნდა გააკეთოთ ცხრილი HTML- ში და დაარეგისტრიროთ მისი ძირითადი პარამეტრები. მაგრამ რა მოხდება, თუ რიგის ხაზგასმა დაგვჭირდება? უნდა იყოს განსხვავებული განსხვავებული ცხრილის ძირითადი ტექსტისგან? სიმებიანი პარამეტრები ჩაწერილია ტეგში ზუსტად იგივე, რაც ცხრილის მონაცემები. შემდეგი ცვლადები შეიძლება შეიქმნას სტრიქონისთვის:1. საზღვარი, ბორდიკოლორი და bgcolor თქვენთვის უკვე ცნობილი. 2. გასწორება - ტექსტის გასწორება სტრიქონში. მას შეუძლია მიიღოს მნიშვნელობები მარცხნივ, ცენტრში და მარჯვნივ. 3. Valign - ეს ტეგი ტექსტს ვერტიკალურად ათავსებს. იგი იღებს შემდეგ მნიშვნელობებს: - ზედა - ტექსტი გასწორებულია ზედა ზღვარზე;
- შუა - ცენტრში;
- ქვედა - ქვედა საზღვრის გასწვრივ.
ხაზის ფორმატირების მაგალითი: უჯრედის პარამეტრებიდა ბოლო, რასაც ყურადღება უნდა მიექცეს მათთვის, ვისაც სურს იცოდეს როგორ გააკეთოს ცხრილი HTML– ში არის ინდივიდუალური უჯრედების პარამეტრები, როგორც რეგულარული, ისე კაპიტალიზებული. სინამდვილეში, ყველაფერი კეთდება ისე, როგორც მაგიდის ან რიგისთვის. ერთადერთი ის არის, რომ დამატებულია კიდევ ორი მნიშვნელოვანი ელემენტი: 1. Colspan - ეს პარამეტრი განსაზღვრავს სვეტების რაოდენობას, რომლის გადაფარვაც უჯრედს შეუძლია. 2. Rowspan - უკვე მიუთითებს იმ რიგების რაოდენობას, რომელსაც ეს უჯრედი იკავებს. ვინაიდან დიზაინი არ განსხვავდება ხაზის წერისგან, ჩვენ არ მივცემთ კოდის მაგალითს. 
დასკვნებიმაგიდის გაკეთება არც ისე რთულია, როგორც ერთი შეხედვით ჩანს. მისი კოდის წერისას მთავარია მოთმინება და ყურადღება. რაც შეეხება იმას, თუ როგორ უნდა ჩასვათ ცხრილი HTML- ში, მაშინ მისი შიფრაცია საკმარისია იმისათვის, რომ დააკოპიროთ და ჩასვათ ზუსტად თქვენი გვერდის იმ ადგილას, სადაც, თქვენი აზრით, ის უნდა განთავსდეს. მოგერიდებათ ექსპერიმენტი და თქვენ მალე დაეუფლებით ცხრილების სრულყოფის შექმნის ტექნიკას. Წარმატებები!
HTML ცხრილები იმდენად ფუნქციონალურია, რომ თქვენ შეგიძლიათ გამოიყენოთ ისინი მთელი საიტების დასაბეჭდად (წაიკითხეთ). ახლა ჩვენ ვისაუბრებთ ვებ – გვერდზე მარტივი HTML ცხრილების ჩასმაზე, მხოლოდ მარკირების ანალიზზე, მაგრამ დიზაინზე შეხებაზე, რადგან უმჯობესია ცხრილების გაფორმება CSS სტილით.
ცხრილის ტეგები და ატრიბუტები
აქ არის ძირითადი ელემენტები, რომლებიც გჭირდებათ ცხრილების შესაქმნელად:
- კონტეინერი, რომლის შიგნით მდებარეობს მაგიდა (იგივე მარკირებული ან
დანომრილი სიებისთვის).
- საზღვარი- ატრიბუტი, რომელიც განსაზღვრავს ჩარჩოების სისქეს. ამის ნაცვლად უმჯობესია გამოიყენოთ სასაზღვრო CSS თვისება.
-
განსაზღვრავს ცხრილის ხელმოწერას. თქვენ არ გჭირდებათ კონტეინერის გამოყენება, მაგრამ თუ მაინც გადაწყვეტთ ცხრილის დასახელებას, მაშინ განათავსეთ იგი ტეგის შემდეგ
უჯრედების და ხაზების გარეთ.
- დაწყვილებული ტეგი, რომელიც შეიცავს ცხრილის რიგს (უჯრედები განლაგებულია იმავე დონეზე ჰორიზონტალურად).
|
- ტეგი, რომელიც ქმნის ცხრილის სათაურის უჯრედს. გარეგნულად, მისი შინაარსი განსხვავდება სხვა უჯრედების შინაარსისაგან - როგორც წესი, ტექსტი შიგნით |
ბრაუზერი არის გაბედული და ცენტრირებული.
- კონტეინერი, რომლითაც იქმნება მარტივი უჯრედი. რამდენ ასეთ ტეგს შეიცავს სტრიქონი (ტეგი
, მასში იქნება იმდენი უჯრედი: ერთი ტეგი - ერთი უჯრედი.
-
საშუალებას გაძლევთ დააჯგუფოთ სვეტები, სწრაფად და კოდის გადატვირთვის გარეშე, რომ დაადგინოთ მათთვის საერთო მახასიათებლები. კონტეინერის გამოყენებით, თქვენ შეგიძლიათ გამოყოთ ცხრილის ლოგიკური ნაწილები ერთმანეთისგან. მდებარეობს ტეგის შემდეგ
, თუ არა, შემდეგ
.
-
გამოიყენება იმავე მიზნით, როგორც
.
შეიძლება შეიცავდეს
მაგრამ არა პირიქით.
- სპანი- ატრიბუტი, რომელიც განსაზღვრავს სვეტების რაოდენობას, რომლებზეც გამოიყენება კონტეინერის თვისებები
.
-
,
და
- კონტეინერები, რომლებიც საშუალებას გაძლევთ გაყოთ მაგიდა, შესაბამისად, ზედა (სათაურებში), მთავარ (სხეულზე) და ქვედა (საბოლოო) ნაწილებად. HTML ცხრილში, ამ ტეგების თანმიმდევრობა იგივეა, რაც კონტეინერების თანმიმდევრობა
,
და HTML დოკუმენტში.
- კოლპსპანისაჭიროა უჯრედების ზედიზედ გაერთიანება. ატრიბუტის მნიშვნელობა შეიცავს რიცხვს, რომელიც განსაზღვრავს გაერთიანების უჯრედების რაოდენობას.
- რიგებიაერთიანებს უჯრედებს სვეტებად.
ცხრილის შექმნის მაგალითი
შექმენით HTML დოკუმენტი და დააკოპირეთ მასში შემდეგი კოდი:
მაგალითი ცხრილი
ვებსაიტის შექმნის ინსტრუმენტები
| დანიშვნა | ინსტრუმენტი |
| მარკირება | Html | XHTML |
| რეგისტრაცია | CSS |
| Განვითარება | PHP | პითონი |
ბრაუზერში დოკუმენტი ასე გამოიყურება: მოდით გავაანალიზოთ კოდის რომელი სტრიქონები რაზეა პასუხისმგებელი.
- გახსნა მაგიდა ჩარჩოების სისქის დაყენებით.
-
ვებსაიტის შექმნის ინსტრუმენტები
- დაასახელა იგი.
- გახსნა ხაზი.
|
დანიშვნა |
- შექმნა უჯრედი სათაურის დიზაინით.|
ინსტრუმენტი |
- შეიქმნა რიგის მეორე სათაურის უჯრედი. Colspan პარამეტრი მიუთითებდა, რომ ეს უჯრედი უნდა დაიკავოს ორი ჰორიზონტალურად.
- დახურა ხაზი. დანარჩენი ხაზები შეიქმნა იმავე გზით. |
მარკირება |
Html |
XHTML |
- დაამატა ცხრილის მეორე რიგი ჩვეულებრივი, არა სათაურით, უჯრედებით. შემდგომი რიგები და უჯრედები ანალოგიურად იყო ჩასმული.
- დაიხურა მაგიდა.
არის მაგიდის სხეული. სხეული შედგება სვეტებისა და რიგებისგან. ცხრილი ივსება სტრიქონით.
თითოეული ტეგი ქმნის ახალ ხაზს. შემდგომ ბუდეში იქმნება სვეტები. შესაძლებელია მრავალი სვეტის შექმნა. ამ შემთხვევაში, თქვენ უნდა თვალყური ადევნოთ სვეტების რაოდენობას თითოეულ რიგში. მაგალითად, თუ პირველ სტრიქონს ჰქონდა 5 სვეტი, მაშინ შემდეგ სტრიქონებს ასევე უნდა ჰქონდეთ 5 სვეტი. წინააღმდეგ შემთხვევაში, მაგიდა დაცურავს. შესაძლებელია უჯრედების გაერთიანება.
როგორ გავაკეთოთ ცხრილი html– ში
მოვიყვანოთ მაგალითი, html კოდი:
| მაგალითი ცხრილი |
| სვეტი 1 |
სვეტი 2 |
მიაქციეთ ყურადღება უჯრედს | ... ჩვენ ვიყენებთ სპეციალურ colspan ატრიბუტს უჯრედების ჰორიზონტალურად გასაერთიანებლად. მისი რიცხვითი მნიშვნელობა მიუთითებს გაერთიანების სვეტების რაოდენობაზე. ასევე არსებობს ამ ატრიბუტის ანალოგი: ტეგი | (ცხრილის სათაური), სადაც ასევე უნდა დაწეროთ colspan. შედეგი იგივე იქნება. მაგრამ ჩვეულებრივი td ხშირად გამოიყენება.
ახლა მოდით უფრო ახლოს განვიხილოთ ტეგის ყველა ატრიბუტი.
.
მონიშნეთ ატრიბუტები და თვისებები
გახსნის ტეგამდე შეგიძლიათ დაწეროთ სხვადასხვა ატრიბუტი.
1. თვისების გასწორება = "პარამეტრი" - ადგენს ცხრილის გასწორებას. მას შეუძლია მიიღოს შემდეგი მნიშვნელობები:
ზემოთ მოყვანილ მაგალითში ჩვენ ცხრილს ვათავსებთ ცენტრში align = "center".
ეს ატრიბუტი შეიძლება გამოყენებულ იქნას არა მხოლოდ მაგიდაზე, არამედ ცხრილის ცალკეულ უჯრედებზე. ან სიმები | ... ამრიგად, განლაგება განსხვავებული იქნება სხვადასხვა უჯრედებში.
Მაგალითად
| ... |
| ... |
...
2. ქონების ფონი = "URL" - ადგენს ფონის სურათს. URL- ის ნაცვლად, ფონის სურათის მისამართი უნდა იყოს ჩაწერილი.
მაგალითი
| მაგალითი ცხრილი |
| სვეტი 1 |
სვეტი 2 |
გადაკეთებულია გვერდზე შემდეგში:
ზემოთ მოყვანილ მაგალითში, ჩვენი ფონის სურათი მდებარეობს img საქაღალდეში (რომელიც მდებარეობს იმავე დირექტორიაში, როგორც html გვერდი) და სურათს ეწოდება fon.gif. გაითვალისწინეთ, რომ ტეგში ჩვენ დავამატეთ style = "ფერი: თეთრი;" ... ვინაიდან ფონი თითქმის შავია, ისე რომ ტექსტი არ შერწყმდეს ფონს, ჩვენ ტექსტი გავხადეთ თეთრი.
3. თვისება bgcolor = "ფერი" - ადგენს ცხრილის ფონის ფერს. როგორც ფერი, თქვენ შეგიძლიათ აირჩიოთ ნებისმიერი მთელი პალიტრა (იხილეთ html ფერების კოდები და სახელები)
4. საკუთრების საზღვარი = "ნომერი" - ადგენს ცხრილის საზღვრის სისქეს. წინა მაგალითებში ჩვენ განვსაზღვრეთ საზღვარი = "1", რაც ნიშნავს რომ საზღვრის სიგანე არის 1 პიქსელი.
5. თვისება bordercolor = "ფერი" - ადგენს საზღვრის ფერს. თუ საზღვარი = "0", მაშინ არ იქნება საზღვარი და საზღვრის ფერი აზრი არ ექნება.
6. თვისება cellpadding = "ნომერი" - ჩარჩოდან უჯრედის შინაარსი პიქსელებში.
7. თვისება cellpacing = "ნომერი" - მანძილი უჯრედებს შორის პიქსელებში.
8. ქონების სვეტები = "ნომერი" - სვეტების რაოდენობა. თუ არ დააკონკრეტებთ, ბრაუზერი თავად განსაზღვრავს სვეტების რაოდენობას. ერთადერთი განსხვავება ისაა, რომ ამ პარამეტრის დაზუსტება სავარაუდოდ დააჩქარებს ცხრილის ჩატვირთვას.
9. თვისების ჩარჩო = "პარამეტრი" - როგორ გამოჩნდება საზღვრები ცხრილის გარშემო. მას შეუძლია მიიღოს შემდეგი მნიშვნელობები:
- სიცარიელე - არ დახაზოთ საზღვრები
- საზღვარი - საზღვარი მაგიდის გარშემო
- ზემოთ - საზღვარი მაგიდის ზედა ნაწილში
- ქვემოთ - საზღვარი ცხრილის ბოლოში
- hsides - დაამატეთ მხოლოდ ჰორიზონტალური საზღვრები (ცხრილის ზედა და ქვედა)
- vsides - დახაზეთ მხოლოდ ვერტიკალური საზღვრები (ცხრილის მარცხნივ და მარჯვნივ)
- rhs - ზღვარი მხოლოდ მაგიდის მარჯვენა მხარეს
- lhs - ზღვარი მხოლოდ მაგიდის მარცხენა მხარეს
10. ქონების სიმაღლე = "რიცხვი" - ადგენს ცხრილის სიმაღლეს: პიქსელებში ან პროცენტებში.
11. საკუთრების წესები = "პარამეტრი" - სად არის უჯრედებს შორის საზღვრების ჩვენება. მას შეუძლია მიიღოს შემდეგი მნიშვნელობები:
- ყველა - თითოეული ცხრილის უჯრედის ირგვლივ არის შედგენილი ხაზი
- ჯგუფები - ხაზი ნაჩვენებია ჯგუფებს შორის, რომლებიც იქმნება ტეგებით , , ,
ან
- cols - ხაზი ნაჩვენებია სვეტებს შორის
- არცერთი - ყველა საზღვარი დამალულია
- რიგები - საზღვარი შედგენილია ტეგის მეშვეობით შექმნილ ცხრილის რიგებს შორის
12. ქონების სიგანე = "რიცხვი" - ადგენს ცხრილის სიგანეს: პიქსელებში ან პროცენტებში.
13. ქონების კლასი = "class_name" - შეგიძლიათ მიუთითოთ იმ კლასის სახელი, რომელსაც ცხრილი ეკუთვნის.
14. ქონების სტილი = "სტილები" - სტილების დაყენება შესაძლებელია თითოეული ცხრილისთვის ინდივიდუალურად.
ახლა დროა ჩავუღრმავდეთ ცხრილს და შევხედოთ ცხრილის უჯრედების ატრიბუტებს. ეს ატრიბუტები უნდა იყოს ჩაწერილი გახსნის ტეგში.
.
ატრიბუტები და თვისებები და |
1. თვისების გასწორება = "პარამეტრი" - ადგენს ცხრილში ცალკეული უჯრედის გასწორებას. მას შეუძლია მიიღოს შემდეგი მნიშვნელობები:
- მარცხენა - მარცხენა გასწორება
- ცენტრი - ცენტრის გასწორება
- მარჯვენა - სწორი გასწორება
2. ქონების ფონი = "URL" - ადგენს უჯრედის ფონის სურათს. URL- ის ნაცვლად, ფონის სურათის მისამართი უნდა იყოს ჩაწერილი.
3. თვისება bgcolor = "ფერი" - ადგენს უჯრედის ფონის ფერს.
4. თვისება bordercolor = "ფერი" - ადგენს უჯრედის საზღვრის ფერს.
5. ქონება char = "წერილი" - ადგენს ასოს, საიდანაც უნდა მოხდეს გასწორება. ატრიბუტის გასწორების მნიშვნელობა მითითებული უნდა იყოს char.
6. თვისება colspan = "ნომერი" - ადგენს ჰორიზონტალური უჯრედების რაოდენობას გაერთიანებისათვის.
7. ქონების სიმაღლე = "რიცხვი" - ადგენს ცხრილის სიმაღლეს: პიქსელებში ან პროცენტულ%-ში.
8. ქონების სიგანე = "რიცხვი" - ადგენს ცხრილის სიგანეს: პიქსელებში ან პროცენტულ%-ში.
9. ქონების რიგები = "ნომერი" - ადგენს გაერთიანებული ვერტიკალური უჯრედების რაოდენობას.
10. თვისება valign = "პარამეტრი" - უჯრედის შინაარსის ვერტიკალური გასწორება.
- ზედა - ათავსებს უჯრედის შინაარსს ხაზის ზედა ნაწილში
- შუა - შუა გასწორება
- ქვედა - გასწორება ბოლოში
- საწყისი - საბაზისო გასწორება
შენიშვნა 1 ტეგისთვის | იგივე ვარიანტებია შესაძლებელი, როგორც | ... პარამეტრები ერთი თეგისთვის | იერარქიულად გამოიყენებს ყველას მის შიგნით
როგორ ავიცილოთ თავიდან მაგიდის უჯრედების გაერთიანება
საზღვრის (უჯრედების საზღვარი) და უჯრედებს შორის ნულოვანი შევსების შემთხვევაში, ისინი მაინც ერთმანეთზეა მიბმული და თქვენ მიიღებთ ორმაგ საზღვარს. ამის თავიდან ასაცილებლად, თქვენ უნდა დარეგისტრირდეთ საზღვრის ჩამონგრევის: ჩამონგრევის ცხრილი სტილის ცხრილში:
...
ძვირფასო მკითხველო, ახლა თქვენ შეიტყვეთ ბევრად მეტი html ცხრილის ტეგის შესახებ. ახლა მე გირჩევთ გადავიდეთ შემდეგ გაკვეთილზე.
მარტივი HTML ცხრილის წყაროს კოდი
უჯრედი 1 |
უჯრედი 2 |
უჯრედი 3 |
უჯრედი 4 |
უჯრედი 5 |
უჯრედი 6 |
უჯრედი 7 |
უჯრედი 8 |
უჯრედი 9 |
HTML ცხრილის სათაურები
HTML ცხრილებში არის 2 ტიპის უჯრედი. ტეგი განსაზღვრავს ჩვეულებრივი ტიპის უჯრედს. თუ უჯრედი მოქმედებს როგორც სათაური, ის იდენტიფიცირდება ტეგით.
მაგალითი HTML ცხრილი სათაურით
| Volkswagen AG |
Daimler AG |
BMW ჯგუფი |
|---|
| აუდი |
მერსედეს-ბენცი |
Ბე ემ ვე |
| შკოდა |
Mercedes-AMG |
მინი |
| ლამბორჯინი |
ჭკვიანი |
Როლს როისი |
HTML ცხრილის წყაროს კოდი სათაურებით
Volkswagen AG |
Daimler AG |
BMW ჯგუფი |
|---|
აუდი |
მერსედეს-ბენცი |
Ბე ემ ვე |
შკოდა |
Mercedes-AMG |
მინი |
ლამბორჯინი |
ჭკვიანი |
Როლს როისი |
უჯრედების გაერთიანება HTML ცხრილში
HTML ცხრილებს აქვთ უჯრედების გაერთიანების შესაძლებლობა ჰორიზონტალურად და ვერტიკალურად.
დან შეურიეთ უჯრედები ჰორიზონტალურადგამოიყენეთ ატრიბუტი colspan = " NSსაკანში ან სად x
დან შეურიეთ უჯრედები ვერტიკალურადგამოიყენეთ rowspan ატრიბუტი = " NSსაკანში ან სად x- უჯრედების რაოდენობა, რომლებიც უნდა გაერთიანდეს.
უჯრედები შეიძლება გაერთიანდეს ჰორიზონტალურად და ვერტიკალურად ერთდროულად. ამისათვის გამოიყენეთ ორივე colspan და rowspan ატრიბუტები სასურველი უჯრედისთვის:
უჯრედის ტექსტი |
გაითვალისწინეთ, რომ მწკრივის ელემენტების რაოდენობა იცვლება უჯრედების შერწყმისას. მაგალითად, თუ ცხრილს აქვს 3 სვეტი უჯრედებით, და ჩვენ ვაერთიანებთ პირველ და მეორე უჯრედებს, მაშინ ამ სტრიქონის განმსაზღვრელი ტეგის შიგნით იქნება 2 ელემენტი, პირველი მათგანი შეიცავს colspan = "2" ატრიბუტს.
მაგალითი HTML ცხრილი უჯრედის შეთავსებით
HTML ცხრილის წყარო გაერთიანებული უჯრედებით
ნისანი |
|---|
მოდელი |
აღჭურვილობა |
ხელმისაწვდომობა |
|---|
Nissan Qashqai |
VISIA |
+ |
ტეკნა |
+ |
Nissan x-trail |
ACENTA |
+ |
CONNECTA |
- |
სათაურები და ქვედა კოლონტიტული და ხელმოწერა HTML ცხრილებში
HTML ცხრილები შეიძლება დაიყოს 3 ნაწილად: სათაური, სხეული, ქვედა კოლონტიტული.
ეს ხდება ცხრილის არჩეული ნაწილის რიგების ტეგით შეფუთვით. განსაზღვრავს სათაურის არეს, - ქვედა კვადრატულ ნაწილს, - მაგიდის სხეულს.
სტანდარტულად, სათაურები და ქვედა კოლონტიტული არ არის სტილიზებული (ეს შეიძლება გაკეთდეს საჭიროების შემთხვევაში CSS– ით), მაგრამ მათი გამოყენება შესაძლებელია ბრაუზერებში. მაგალითად, მრავალ გვერდიანი ცხრილის დაბეჭდვისას, სათაურები და ქვედა კოლონტიტულები შეიძლება დუბლირებული იყოს თითოეულ დაბეჭდილ გვერდზე.
ცხრილის HTML კოდში ფართობის ტეგების განთავსების სწორი თანმიმდევრობა ასეთია: ჯერ სათაური, შემდეგ ქვედა კოლონტიტული, შემდეგ ძირითადი ნაწილი. ამ შემთხვევაში, გვერდის ძირითადი ნაწილი გამოჩნდება სათაურებსა და ქვედა კოლონტიტულებს შორის.
საჭიროების შემთხვევაში შეგიძლიათ დაამატოთ ხელმოწერა მაგიდაზე. ამისათვის გამოიყენეთ ტეგი.
მაგალითი HTML ცხრილი სათაურებითა და ქვედა კოლონტიტულით და ხელმოწერით
წყაროს კოდი ცხრილისთვის სათაურებითა და ქვედა კოლონტიტულით და ხელმოწერით
სრული ნაკრები Renault Sandero Stepway
დამახასიათებელი |
SUTA 09H 6R |
SUTA 09HR6R |
SUTA 15H 5R |
|---|
ხელმისაწვდომობა |
+ |
+ |
+ |
|---|
Ძრავის ძალა |
0.9 (90 ცხენის ძალა) |
0.9 (90 ცხენის ძალა) |
1.5 (90 ცხენის ძალა) |
|---|
Საწვავი |
ბენზინი |
ბენზინი |
დიზელი |
|---|
ტოქსიკურობის მაჩვენებელი |
ევრო 6 |
ევრო 6 |
ევრო 5 |
|---|
სვეტები და სვეტების ჯგუფები
HTML ცხრილი შეიძლება დაიყოს სვეტებად და სვეტების ჯგუფებად და ტეგების გამოყენებით.
ეს გამოყოფა საშუალებას გაძლევთ დააყენოთ სტილი ცხრილისთვის CSS თვისებების მინიმალური რაოდენობის გამოყენებით, რითაც შეამციროთ ცხრილის კოდის ოდენობა (სვეტში თითოეული უჯრედისთვის სტილის განსაზღვრის ნაცვლად, შეგიძლიათ სტილის ერთ ან რამდენიმე სვეტზე ერთდროულად დაყენება).
ტეგები და მოთავსებულია ტეგის შიგნით ტეგების წინ, AKP6 (EDC) Გადაცემა |
HTML ცხრილი c წყარო და
ZEN 2E2C AL A |
ZEN 2E2C J5 A |
ინტენსიური 2E3C AL A |
დამახასიათებელი |
|---|
1.5 (90 ცხენის ძალა) |
1.2 (115 ცხენის ძალა) |
1.5 (90 ცხენის ძალა) |
Ძრავის ძალა |
|---|
დიზელი |
ბენზინი |
დიზელი |
Საწვავი |
|---|
AKP6 (EDC) |
AKP6 (EDC) |
AKP6 (EDC) |
Გადაცემა |
|---|
ცხრილები საიტის გვერდის განლაგებაში
თანამედროვე საიტებზე მნიშვნელოვანია გვერდების სწორად ჩვენება როგორც კომპიუტერებზე, ასევე მობილურ მოწყობილობებზე. არასასურველია ცხრილების გამოყენება HTML გვერდის ჩონჩხის შესაქმნელად, რადგან დაკარგულია შინაარსის ადაპტირების შესაძლებლობა სხვადასხვა ზომის ეკრანებზე (კომპიუტერები, სმარტფონები, ტაბლეტები).
ცხრილის ჯგუფის ტეგები საუკეთესოდ გამოიყენება გვერდის შიგნით ცხრილის ფორმატირებული შინაარსის საჩვენებლად.
| |
|
| | |
| | |
