გამარჯობა, ძვირფასო ბლოგი მკითხველს! მთლიანად ვებ გვერდზე, ტექსტისა და სურათების გარდა, მაგიდების სახით სხვადასხვა მონაცემების გამომავალი საჭიროა. დიახ, გასაგებია, მაგიდა არის მოსახერხებელი გზა, რომ წარმოადგინოს დიდი რაოდენობით ინფორმაცია. ამიტომ, კითხვა ჩნდება "როგორ ჩადეთ მაგიდები HTML- ში?". ამ სტატიაში, მე ამ კითხვაზე პასუხი მოგცემთ და მოგცემთ სხვადასხვა HTML ცხრილების ბევრ მაგალითს.
როგორ შევქმნათ მაგიდა HTML- ის გამოყენებით
HTML მაგიდები იქმნება ოთხი ნაბიჯით.
1. პირველი ნაბიჯი HTML კოდით წყვილი ტაგ
ჩვენ მიუთითეთ ბრაუზერი, რომ მაგიდა ჩასმული ვებ-გვერდზე: . მაგიდის ელემენტს ვებ-გვერდის ბლოკის ელემენტია. აქედან გამომდინარე, მაგიდა ყოველთვის გამოჩნდება ახალი რიგიდან მიმდებარე ელემენტების ვერტიკალური ქედით, ამიტომ არ არის საჭირო პარაგრაფში.
2. მეორე ნაბიჯით ჩვენ ვქმნით სიმჩრები მაგიდები, განთავსებული დაწყვილებული tags
შიგ . თითოეული ელემენტი ქმნის ცალკე სტრინგს:
3. შემდგომი, მესამე ნაბიჯი ჩვენ ვქმნით უჯრედები მაგიდები წყვილი tags
და |
რომლებიც მოთავსებულია ელემენტში |
. ტაგ | ქმნის ჩვეულებრივი საკანში, ა | საკანი გადასექტი ქალი. შესაბამისი სვეტის ქუდი:
4. კარგად, ბოლო ნაბიჯში ჩვენ შიგნით ელემენტები | და |
შინაარსის უჯრედები. HTML კოდი ჩასმა მაგიდაზე ვებგვერდზე გამოიყურება:
სვეტი 1. | სვეტი 2. | სვეტი 3. |
|---|
საკანში 1-1. | საკანში 1-2. | საკანში 1-3. |
საკანში 2-1. | საკანში 2-2. | საკანში 2-3. |
უფრო ადვილად კონფიგურაცია საზღვრების ჩვენება ხელს შეუწყობს. თქვენ შეგიძლიათ შეცვალოთ ფარგლებში სისქე და ფერი, ასევე შეცვალოს საზღვრების ტიპი.
ტექსტი, რომელიც გსურთ შიგნით საკნებში, არის სურვილისამებრ, მაგრამ თუ ტექსტი დიდია, ეს შეიძლება იყოფა პარაგრაფებში,
თუ თქვენ გჭირდებათ რაიმე ფაილის ჩასმა ტექსტი, შეგიძლიათ გამოიყენოთ.
გარდა ტექსტის, ჩვენ შეგვიძლია დააყენა სურათები საკნებში გამოყენებით tag ![]()
:
 |
კიდევ ერთი მაგიდა შეიძლება იმოქმედოს როგორც საკანში შინაარსი. ამ შემთხვევაში, ჩადგმული მაგიდის შექმნა რეგულარული მაგიდის შექმნისგან განსხვავდება. მხოლოდ tags შორის
და | Tags არის ჩასმული და ხაზები და უჯრედები მასშია ჩასმული.
მაგიდების შექმნისას, გარკვეული წესები უნდა გაითვალისწინოს:
- მხოლოდ ტეგი გამოიყენება მაგიდის შესაქმნელად.
;
- ტაგ
შეიძლება მხოლოდ შიგნით tag ;
- განცხადებები
| და | შეიძლება მხოლოდ შიგნით | ნებისმიერი სხვა შინაარსის ნიშანი
იგნორირებულია ბრაუზერის მიერ;
- მაგიდის შინაარსი (ტექსტი ან სურათები) შეიძლება იყოს მხოლოდ tags
| და | ;
- უჯრედების ცხრილებს უნდა ჰქონდეთ მინიმუმ რამდენიმე შინაარსი, წინააღმდეგ შემთხვევაში, ბრაუზერი არ არის ნაჩვენები ყველა, მაგრამ თუ ზოგიერთი საკანში უნდა იყოს ცარიელი, ჩვეულებრივ განთავსდება არასამთავრობო dissipating სივრცეში (HTML ლიტერატურული);
- მაგიდა ეხება ვებ-გვერდის ელემენტებს;
- მაგიდისა და მისი უჯრედების ზომები დამოკიდებულია შინაარსზე, ანუ. მაგიდა გაჭიმულია სიგანეზე და სიმაღლეზე ისე, რომ ყველაფერი შეესაბამება;
- ინდივიდუალური უჯრედების საზღვრებსა და თითოეულ საკანში და მის შინაარსს შორის არის პატარა ინტენსიური;
- სათაურის უჯრედების ტექსტი (ელემენტს) გამოჩნდება თამამად და დონეზე ცენტრში;
- მაგიდისა და მისი უჯრედების ირგვლივ საზღვრები არ შედგენილია.
ცხრილის სათაური
დავიწყოთ წყვილი tag ,
რომელიც განსაზღვრავს სათაურ მაგიდას. სათაურის ტექსტი მოთავსებულია ამ tag შიგნით, და ერთი უნდა იყოს შიგნით tag . უფრო მეტიც, განსხვავების გარეშე, სადაც მაგიდის HTML კოდექსის ადგილი უნდა მოათავსოთ ტეგით ბრაუზერი ჯერ კიდევ აჩვენებს მაგიდასთან და ხაზებს თავის ცენტრში. მაგრამ ჩვეულებრივ tag გახსნის შემდეგ დაუყოვნებლივ :
ეს არის მაგიდა
საკანში 1.1. | საკანში 1.2. |
საკანში 2.1. | საკანში 2.2. |
ჩვენება:
სექციის მაგიდა
HTML მაგიდა შეიძლება იყოს ლოგიკურად გაყოფილი ნაწილებად - სექციები. სულ სამი ნაწილის სექციები არსებობს:
- ჰედერის სექციარომელშიც სათაურების უჯრედები განთავსდება, რომლებიც ქმნიან მაგიდასთან;
- სხეულის სექციარომელშიც საკნები განთავსდება ძირითადი მონაცემებით;
- დასრულება სექციარომელშიც საკნები მოთავსებულია საბოლოო მონაცემებით.
მაგიდის სათაურის სექცია ჩამოყალიბებულია წყვილის გამოყენებით . და დასაშვებია არა უმეტეს ერთი ელემენტის გამოყენება იმავე მაგიდაზე, და ეს უნდა წავიდეს HTML კოდი დაუყოვნებლივ შემდეგ tag .
სხეულის სექცია შექმნა წყვილი tag . ერთი HTML ცხრილი შეიძლება შეიცავდეს რამდენიმე სხეულის სექციას, რომელიც საშუალებას გაძლევთ შექმნათ სტრუქტურული ბლოკები, რომელთა გამოყენებაც შეიძლება გამოყენებულ იქნას ერთიანი დიზაინის სტილის გამოყენება.
დასრულების განყოფილება ჩამოყალიბებულია წყვილი tag და ერთი კონტეინერის ფარგლებში შეიძლება მხოლოდ ერთი იყოს.
ყველა ამ გაერთიანებული tags უნდა შეიცავდეს tags რომელიც ქმნის შესაბამის სექციებთან დაკავშირებულ სტრიქონებს:
სვეტი 1. | სვეტი 2. | სვეტი 3. |
საკანში 1.1. | საკანში 1.2. | საკანში 1.3. |
საკანში 2.1. | საკანში 2.2. | საკანში 2.3. |
შედეგი 1. | შედეგი 2. | შედეგი 3. |
მაგიდის უჯრედების კომბინირება
ეს რჩება მაგიდის ყველაზე მნიშვნელოვან თვისებებზე - აერთიანებს უჯრედებს.მრავალ უჯრედების გაერთიანება ერთ ატრიბუტში გამოიყენება კოლესპანი და rowspan. ქსოვი და | . Colspan ატრიბუტი ადგენს კომბინირებული ჰორიზონტალური უჯრედების რაოდენობას და Rowspan - ვერტიკალურად:
1.1 | 1.2-1.3 |
2.1 | 2.2 | 2.3 |
3.1-4.1 | 3.2 | 3.3 |
4.2 | 4.3 |
მაგალითი:
| 1.1
|
1.2-1.3
|
| 2.1
|
2.2
|
2.3
|
| 3.1-4.1
|
3.2
|
3.3
|
| 4.2
|
4.3
|
უჯრედების კომბინირებისას, მნიშვნელოვანია, რომ თითოეულ რიგში უჯრედების რაოდენობა შეამოწმოთ, რომ არ არსებობს შეცდომები. ასე რომ, დიზაინი | ცვლის ორ უჯრედს, ასე რომ მომდევნო ხაზში უნდა იყოს ორი ტეგები | ან იგივე დიზაინი! თუ ყველა რიგის რაოდენობა არ შეესაბამება, ცარიელი დამატებითი უჯრედები გამოჩნდება.
უჯრედების კომბინირებისას არასწორი HTML კოდის მაგალითი:
საკანში 1.1. | საკანში 1.2. |
საკანში 2.1. | საკანში 2.2. |
და აჩვენე შედეგი ბრაუზერში:
ისინი. თუ თქვენ გააანალიზებთ HTML კოდს, მაშინ შეამჩნევთ, რომ პირველ რიგში სამი უჯრედი არის მითითებული, რომელთაგან ორი კომბინირებულია Colspan ატრიბუტის გამოყენებით და მეორე ხაზში მხოლოდ ორი უჯრედი დაემატება. მეორე ხაზში მესამე ცარიელი საკანშია.
საკვანძო ატრიბუტები
ამ პოსტის, ჩვენ უკვე გვხვდება ერთი tag ატრიბუტი . საზღვრის ატრიბუტით, რომელიც პიქსელებში ჩარჩოს სისქეს ადგენს. ჩვეულებრივ, 0-ის ტოლია და შესაბამისად, ნაგულისხმები უჯრედები გამოჩნდება ჩარჩოების გარეშე.
სასაზღვრო ატრიბუტის გარდა, არსებობს კიდევ რამდენიმე მნიშვნელოვანი ატრიბუტი, რომელიც მხარს უჭერს ტეგით. . მოდით შევხედოთ მათ.
ატრიბუტი გასწორება.- განსაზღვრავს გაერთიანებამაგიდები გვერდზე. მას შეუძლია მიიღოს მარცხენა, ცენტრის ღირებულებები, უფლება, რომელიც მარცხენა ზღვარზე, ცენტრში და მარჯვენა ზღვარზე. ნაგულისხმევი დარჩა.
ატრიბუტი ფონზე., რომელი განსაზღვრავს ფონურ ნიმუშსმაგიდაზე. როგორც ღირებულება, იღებს სურათის ფაილის მისამართს.
bgcolor - კომპლექტი ფონის ფერი მაგიდები. თქვენ შეგიძლიათ გამოიყენოთ ფონური ატრიბუტი.
ატრიბუტი საზღვრის მიმღებიგანსაზღვრავს ჩარჩო ფერი მაგიდები.
CellPadding. - განსაზღვრავს მანძილი საზღვრის საზღვრებსა და მის შინაარსს შორის. საშუალებას გაძლევთ გააუმჯობესოთ მაგიდის წაკითხვის გაუმჯობესება. როგორც ღირებულება, ნებისმიერი დადებითი რიცხვი შეიძლება იყოს.
CellSpacing. - განსაზღვრავს უჯრედების გარე საზღვრებს შორის მანძილი.
ამ შესახებ როგორ ჩადეთ მაგიდა HTML გვერდზე მე დავასრულებ, მხოლოდ მოდით ქვემოთ:
- tags გამოიყენება ჩასასმელი მაგიდა
- მაგიდის აღნიშვნა, - დაამატეთ სიმებიანი და - კრივი უჯრედები;
- მაგიდა არის ვებ გვერდის ბლოკის ელემენტი;
- უჯრედების შინაარსი, შეიძლება იყოს არა მხოლოდ ტექსტი, არამედ სურათები და სხვა ცხრილები;
- ცხრილი შეიძლება შეიცავდეს სამი სახის სექციებს: სათაურის სექცია - , დასრულება სექცია და სხეულის სექცია - ;
- უჯრედების კომბინირება, გამოიყენეთ tag ატრიბუტები
| Colspan და Rowpan.
ეს ყველაფერი, მომდევნო პოსტში მე ვისაუბრებთ ნავიგაციის საშუალებით HTML საიტზე. არ გამოტოვოთ ეს პოსტი გამოწერა ჩემს ბლოგზე განახლებისთვის! ყველა, ახალი შეხვედრები!
მაგიდები HTML არის ყველაზე ძლიერი და ხშირად გამოყენებული საშუალებები. ძირითადად, ვებმასტერებს იყენებენ მაგიდები არა მხოლოდ მონაცემთა ჩვენების დაჯგუფების მეთოდით, არამედ ვებ-გვერდებზე.
მოდით შევხედოთ ორივე გზა გამოიყენოს HTML მაგიდები. მაგრამ პირველი, ჩვენ ვისწავლოთ თუ როგორ უნდა დაამატოთ მაგიდები HTML დოკუმენტი, ასევე განიხილოს შესაძლებლობები, რომ HTML უზრუნველყოფს მუშაობა მაგიდები.
შექმნა მარტივი HTML მაგიდა
თითოეული მაგიდა HTML შედგება სხვადასხვა უჯრედებისგან, რომლებიც ხაზებით მდებარეობს. და ყველა ეს ხაზი და ჩამოყალიბდეს მთელი მაგიდა. მაგიდის აღნიშვნისთვის ვრცელდება წყვილი tag .
როგორც უკვე იცით, რომ მაგიდები შედგება რიგები და უჯრედები. და იმისათვის, რომ შეიქმნას მარტივი მაგიდა, ჩვენ გვჭირდება კიდევ ორი \u200b\u200btags: ეს არის დაწყვილებული tags | და რომლებიც გამოიყენება რიგების შესაქმნელად და ორთქლის ტეგებს, და | პასუხისმგებელი უჯრედების შესაქმნელად. ( უფრო მეტიც, დახურვის რიგები და უჯრედები შეიძლება არ იყოს)
ასე რომ, იმის გათვალისწინებით, რომ ჩვენ უკვე ვიცით, როგორ შევქმნათ მარტივი HTML მაგიდა, მოდით მივმართოთ ზემოთ მოცემულ ინფორმაციას და შექმნას მარტივი მაგიდა, როგორც ნაჩვენებია (Ფიგურა 1).
მარტივი მაგიდა Fig.1
მარტივი მაგიდის კოდექსირომელიც ნაჩვენებია ფიგურაში 1 (ზემოთ)
1-უჯრედის მაგიდა |
2-საკანში მაგიდა |
3-უჯრედის მაგიდა |
4-უჯრედის მაგიდა |
5-უჯრედის მაგიდა |
6-უჯრედის მაგიდა |
7-უჯრედის მაგიდა |
8-უჯრედის მაგიდა |
9-უჯრედის მაგიდა |
10-უჯრედის მაგიდა |
11-უჯრედის მაგიდა |
12-საკანში მაგიდა |
კომპლექსური მაგიდის კოდი, მაგალითად სურათი 2
აერთიანებს სვეტების ატრიბუტს " კოლესპანი" |
ატრიბუტის სიმებიანი აერთიანებს " rowspan." |
ატრიბუტი " valign."" დაბრუნება "
|
ატრიბუტი " valign." "ძირი" |
მიღებული მაგიდა Ფიგურა 1.
. ეს გამოიყურება მახინჯი. ეს ყველაფერი იმიტომ, რომ tags, რომ ჩვენ შევქმენით მარტივი მაგიდა ( , , | ) შეიძლება ჰქონდეს განსხვავებული ატრიბუტები, რომლებიც უნდა იყოს მითითებული: ეს შეიძლება იყოს ფონური, საზღვრები, ზომები და ასე შემდეგ.
მოდით ახლა განვიხილოთ ატრიბუტები, რომლებიც გამოიყენება tag . იმისათვის, რომ ნახოთ, თუ როგორ მაგიდასთან tag მიმართა tag ატრიბუტები, ცხრილის კოდექსის ასლი და ტექსტის დოკუმენტში, გაფართოებისას. HTML და გახსენით ბრაუზერი მაგიდის კოდით ატრიბუტებით და გვერდის განახლებისთვის, ნახავთ, თუ როგორ გამოიყურება ბრაუზერი.
საკვანძო ატრიბუტები:
1) "საზღვარი" ატრიბუტი, პიქსელებში მთელი მაგიდის სიგანე ადგენს, დაწერილია შემდეგნაირად: .
2) ატრიბუტები "სიგანე" და "სიმაღლე" - ეს ატრიბუტი ადგენს რეკომენდებული სიგანე და თქვენი მაგიდის სიმაღლე, დაწერილია შემდეგნაირად:
3) "Bordercolor" ატრიბუტი - ადგენს მთელ მაგიდას, წერს: .
4) ატრიბუტი "გასწორება" - მაგიდის განლაგება, გასწორება \u003d მარცხნივ - მაგიდა იქნება შეესაბამება მარცხენა ზღვარზე, გასწორება \u003d მარჯვნივ - მარჯვნივ, დაწერილია, როგორც:
5) "BGCOLOR" ატრიბუტი - ადგენს ცხრილის ფერის ფონზე, წერს შემდეგნაირად:
მე ვფიქრობ, რომ ატრიბუტები საკმარისია თქვენთვის!
ახლა განიხილეთ ტეგის ატრიბუტები: და |
საკვანძო ატრიბუტები |
1) tag ატრიბუტი "სიმაღლე". გთხოვთ გაითვალისწინოთ, რომ tag არ ატრიბუტი "სიგანე" (სიგანე), როგორც ტეგი პასუხისმგებელი სიმებიანი, და, შესაბამისად, სიმაღლე. და სვეტები უკვე პასუხისმგებელია სიგანეზე. მიუხედავად იმისა, რომ არსებობს tag ატრიბუტი "სიმაღლე", მაგრამ პრაქტიკულად არ გამოიყენება ყველგან.
საკვანძო ატრიბუტები
2) Tag ატრიბუტი | "სიგანე", ატრიბუტი "სიმაღლე" (სიმაღლე) ტეგზე | არა, რადგან tag | პასუხისმგებელი საკანში მაგიდა და მისი სიგანე, და სიმებიანი შეესაბამება სიმაღლე (tag | ).
3) tag ატრიბუტი "Colspan". ამ ატრიბუტის ღირებულება ნიშნავს ამ საკანში სვეტების რაოდენობას. სხვა სიტყვებით რომ ვთქვათ, ეს ატრიბუტი საშუალებას გაძლევთ დააკავშიროთ რამდენიმე მიმდებარე საკანი ვერტიკალურად ერთში.
4) tag ატრიბუტი | "Rowspan". ამ ატრიბუტის ღირებულება ნიშნავს იმას, რომ ეს საკანში ხდება. შესაბამისად, ეს ატრიბუტი საშუალებას გაძლევთ გაერთიანდეს რამდენიმე საკანი ერთი ჰორიზონტალურად.
5) tag ატრიბუტი | "გასწორება". ეს ატრიბუტი საშუალებას გაძლევთ გასწორება ელემენტების საკანში ჰორიზონტალურად. მას აქვს სამი მნიშვნელობა: "მარცხნივ" (უჯრედის მარცხენა ზღვარზე), "ცენტრი" (ორიენტირებული), "უფლება" (საკანში მარჯვენა ზღვარზე). თუ არაფერი არ არის მითითებული, განლაგება იქნება მარცხენა ზღვარზე.
6) tag ატრიბუტი | "Valign". ეს ატრიბუტი საშუალებას გაძლევთ გასწორება ელემენტების შიგნით ვერტიკალური საკანში. ისევე როგორც "გასწორება" მხოლოდ სამი მნიშვნელობა აქვს: "Top" (ზედა), "შუა" (შუა), "ქვედა" (ბოლოში). ნაგულისხმევი არის "შუა" შუა.
მოდით მივიღოთ ის, რაც ახლა გავიგეთ.
ფიგურა 2 გვიჩვენებს ჩვენს კომპლექსურ მაგიდას.
დახვეწილი მაგიდა FIG.2
აქ პრინციპში, და ეს არის ის, რაც თქვენ უნდა იცოდეთ HTML ცხრილების შესახებ და წარმატებით გამოიყენოთ.
შექმნა HTML მაგიდა Joomla რედაქტორი.
Joomla- ში მაგიდის შესაქმნელად შეგიძლიათ გამოიყენოთ TinyMCE რედაქტორი, რომელიც მდებარეობს Default Joomla- ში.
ახლა გამოყენებით ვიზუალური Joomla რედაქტორი - თქვენ შეგიძლიათ შექმნათ მარტივი, ან რთული მაგიდები, მაგრამ ფრთხილად და არ დაივიწყოს სიგანე შინაარსის ფართობი თქვენს საიტზე, ისე, რომ როდესაც მაგიდაზე, მისი სიგანე არ გამოიყენება ამ ღირებულებას .
ჩამოტვირთეთ ფაილები:
HTML ვიდეო კურსი ევგენი პოპოვასგან
უფასო ვიდეო კურსი შეიცავს 33 HTML გაკვეთილს.
ვიდეო კურსი, ცხადყოფს HTML- ის საბაზისო ცოდნას და სასარგებლო იქნება არა მხოლოდ ახალბედა საიტის მშენებლებთან, რომლებიც ჯერ არ იცნობენ HTML- ს, არამედ უფრო გამოცდილი ვებმასტერებისთვის.
მაგიდა ჩარჩოებით
| სახელი |
გვარი |
| ლარი |
ისევაა |
| დიმიტრი |
კოლესნიკოვი |
შედეგი:
მაგიდა გარეშე ფარგლებში
მაგიდა ჩარჩოებით
ატრიბუტები tagov | და | შერწყმის უჯრედებისათვის
მაგალითი
|
ფერცები |
| წონა |
ზომა |
| მამაკაცი |
1.2 - 2.5 კგ |
მდე 70cm |
| ქალის ქალი |
0.7 - 1.0 კგ |
მდე 40 სმ |
შედეგი:
|
|
ფერცები |
| წონა |
ზომა |
| მამაკაცი |
1.2 - 2.5 კგ |
მდე 70cm |
| ქალის ქალი |
0.7 - 1.0 კგ |
მდე 40 სმ |
HTML5 სტანდარტის მიხედვით, ყველა ადრე გამოყენებული მაგიდა ატრიბუტები, როგორიცაა სასაზღვრო., cellSpacing., cellPadding. et al. აღარ არის მხარდაჭერილი და მათი მყიდველის გამოყენება კოდექსში შეცდომებს მიიჩნევს. მაგიდები, თქვენ უნდა გამოიყენოთ CSS-Styles, რომელთანაც შეგიძლიათ შეცვალოთ ყველა მოძველებული მაგიდა ატრიბუტები. მაგალითად, ატრიბუტის ნაცვლად cellSpacing. მაგიდის უჯრედებს შორის მანძილის შესაცვლელად, ქონება გამოიყენება. სასაზღვრო სივრცე.და მაგიდის უჯრედებში შინაარსი - თვისებები ტექსტის გასწორება. და ვერტიკალური- aling.. CSS-Styles მაგიდები
Tags დაჯგუფება strings html მაგიდა
უფრო რთული მაგიდის შესაქმნელად შეგიძლიათ გამოიყენოთ Tags:
მაგალითი
ლუდის მოხმარება
| ᲡᲠᲣᲚᲘ ᲡᲐᲮᲔᲚᲘ. |
ლითტროვი |
| მთელი |
250 |
| ივანოვი ივან ივანოვიჩი |
133 |
| პეტროვ პეტრევიჩი |
117 |
შედეგი:
Tags დაჯგუფება სვეტების HTML მაგიდები
საკვანძო ატრიბუტი და
უმარტივეს გზას იმის გაგება, თუ როგორ შეგიძლიათ გამოიყენოთ რიგები და სვეტების დაჯგუფება Sudoku მაგიდის მაგალითზე.
COL tag ადგენს პარამეტრებს ცალკე თითოეულ სვეტში. არ აქვს მნიშვნელობა, თუ როგორ უნდა დაწეროთ კოდის კოდი:
ან
მაგალითი
შედეგი:
ნუ ეცდებით სტილის შექმნას ტექსტის გასწორება. იყიდება თაღვიდი და . ტექსტი განთავსებული tags ... | , არ დაიმკვიდრებს ამ სტილს, რადგან ტეგი არც შთამომავალი არ არის და არც tag .
ჰორიზონტალური ტექსტის გასწვრივ კონკრეტული მაგიდის სვეტში შეიძლება შეიცვალოს სტილი ტექსტის გასწორება. ფსევდოკლასისთვის tD: მე -5 ბავშვი (n) სადაც n არის სვეტის ნომერი. თუმცა, ეს მეთოდი არ იმუშავებს, თუ ატრიბუტი აწმყო მაგიდაზე მაგიდაზე კოლესპანი.
მაგალითი
| სახელი |
ფასი, რუბლს.) |
| სოლარიუმის თითო წუთიანი გადახდა (4 წუთი) | 15 |
| სოლარიუმის 50 წუთი (14 რუბლი / წთ, 1 თვე) | 700 |
| 100 წუთი სოლარიუმი (13 რუბლი / წთ, 2 თვე) | 1300 |
| 200 წუთი სოლარიუმი (12 რუბლი / წთ, 3 თვე) | 2400 |
შედეგი:
თუმცა, ეს მეთოდი არ იმუშავებს, თუ ატრიბუტი აწმყო მაგიდაზე მაგიდაზე კოლესპანი.
ცხრილების მრავალფეროვნების წყალობით, მათთვის დიდი რაოდენობით პარამეტრების კონტროლი, მაგიდები დიდი ხნის განმავლობაში გახდა ვებ-გვერდებზე კონკრეტული სტანდარტი. ცხრილი უხილავი საზღვართან არის მოდულური ქსელის მსგავსად, რომელშიც მოსახერხებელია ბლოკებში ვებ-გვერდის ელემენტების მოთავსება. თუმცა, ეს არ არის სრულიად სწორი მიდგომა, რადგან თითოეული HTML ობიექტი განისაზღვრება საკუთარი მიზნებისათვის და თუ იგი არ გამოიყენება მისი მიზნისთვის და ყველგან, ეს ნიშნავს, რომ ალტერნატივა არ არის. ასე რომ, ეს იყო დიდი ხნის განმავლობაში, სანამ ფენებს არ მიუღიათ მაგიდები, როდესაც საიტებზე. ეს არ ნიშნავს იმას, რომ ფენები ახლა მთლიანად და ახლოს არიან, მაგრამ ტენდენცია უკვე ნათლად არის გამოყოფილი - მაგიდები გამოიყენება tabular მონაცემების და ფენების ჩაყრისა და დიზაინის ფენების.
შექმნა მაგიდა
მაგიდა შედგება რიგების და საკანში სვეტებისგან, რომელიც შეიძლება შეიცავდეს ტექსტს და ნახატებს. როგორც წესი, მაგიდები გამოიყენება გამარტივებაზე და მონაცემების წარდგენისთვის, თუმცა მაგიდების შესაძლებლობები არ შემოიფარგლება. ცხრილების დახმარებით, მოსახერხებელია გვერდის ფორმატის შეხება, ტექსტისა და სურათების ფრაგმენტების განთავსება.
მაგიდის დასამატებლად ვებ-გვერდის დამატება . ეს ელემენტი ემსახურება როგორც კონტეინერებს, რომლებიც განსაზღვრავს ცხრილის შინაარსს. ნებისმიერი მაგიდა შედგება რიგები და უჯრედები, რომლებიც მითითებულია შესაბამისად tags და | . მაგიდასთან უნდა შეიცავდეს მინიმუმ ერთი საკანში (მაგალითად 12.1). მას უფლება აქვს ნაცვლად tag | გამოყენება tag | . ტექსტი საკანში გაფორმებული საკანში | აჩვენებს მსესხებლის შრიფტს ცხიმოვანი პარალიზებით და უჯრედის ცენტრში შეესაბამება. წინააღმდეგ შემთხვევაში, განსხვავება საკნებში შექმნილ საკნებში | და | არა.
მაგალითი 12.1. შექმნა მაგიდა
Tag მაგიდა.
| საკანში 1. |
საკანში 2. |
| საკანში 3. |
საკანში 4. |
ბრძანება არის უჯრედების ადგილმდებარეობა და მათი სახეობები ნაჩვენებია ნახატზე. 12.1. არსებობს სხეულის მაგიდა. სხეული შედგება რიგების და სვეტებისგან. მაგიდა შევსებულია ხაზით.
თითოეული ტეგი | ქმნის ახალ სტრინგს. შემდეგი Nested სვეტები იქმნება. თქვენ შეგიძლიათ შექმნათ ბევრი სვეტი. ამ შემთხვევაში, თქვენ უნდა მონიტორინგი რაოდენობის სვეტების თითოეულ რიგში. მაგალითად, თუ პირველ რიგში 5 სვეტი იყო, მაშინ მომდევნო ხაზებში უნდა იყოს 5 სვეტი. წინააღმდეგ შემთხვევაში, მაგიდა იალქნები. უჯრედების კომბინირება შესაძლებელია.
როგორ გააკეთოთ მაგიდა HTML- ში
მოდით მაგალითად, HTML კოდი:
| ნიმუში მაგიდა |
| სვეტი 1. |
სვეტი 2. |
ყურადღება მიაქციეთ საკანში | . ჩვენ ვიყენებთ Colspan სპეციალური ატრიბუტი, რათა დააკავშიროთ ჰორიზონტალური უჯრედები. მისი რიცხვითი მნიშვნელობა მიუთითებს სვეტების რაოდენობის მიხედვით. ასევე არსებობს ამ ატრიბუტის ანალოგი: tag | (ცხრილი header), სადაც თქვენ ასევე უნდა დარეგისტრირდეთ Colspan. შედეგი იგივე იქნება. მაგრამ ხშირად იყენებენ ჩვეულებრივ TD- ს.
ახლა დეტალურად განვიხილოთ ყველა tag ატრიბუტი
.
ატრიბუტები და საკვანძო თვისებები
გახსნის tag თქვენ შეგიძლიათ განსაზღვროთ სხვადასხვა ატრიბუტები.
1. გასწორება \u003d "პარამეტრი" ქონება - ადგენს მაგიდის განლაგებას. შეუძლია მიიღოს შემდეგი ღირებულებები:
Disassembled მაგალითში, ჩვენ შეესაბამება მაგიდასთან გასწორება \u003d "ცენტრი".
ეს ატრიბუტი შეიძლება გამოყენებულ იქნას არა მხოლოდ მაგიდაზე, არამედ მაგიდის ინდივიდუალურ მაგიდებზე. ან სიმები | . ამდენად, სხვადასხვა საკნებში, განვიხილეთ განსხვავებული იქნება.
მაგალითად
| ... |
| ... |
...
2. ქონების ფონზე \u003d "URL" - ადგენს ფონურ ნახაზს. URL- ის ნაცვლად, ფონური სურათის მისამართი უნდა იყოს დაწერილი.
მაგალითი
| ნიმუში მაგიდა |
| სვეტი 1. |
სვეტი 2. |
გარდაიქმნება გვერდზე შემდეგი:
შესწავლილ მაგალითში, ჩვენი ფონის სურათი მდებარეობს IMG საქაღალდეში (რომელიც არის იგივე დირექტორიაში, როგორც HTML გვერდი), და გამოსახულება ეწოდება fon.gif. გთხოვთ გაითვალისწინოთ, რომ ჩვენ დასძინა სტილი \u003d "ფერი: თეთრი;" . მას შემდეგ, რაც ფონზე თითქმის შავი, ისე, რომ ტექსტი არ შერწყმულია ფონზე, ჩვენ ტექსტური თეთრი.
3. ქონების BGColor \u003d "ფერი" - ადგენს მაგიდის ფერის ფონზე. როგორც ფერი, თქვენ შეგიძლიათ აირჩიოთ ნებისმიერი პალიტრა (იხილეთ კოდები და სათაურები HTML ფერები)
4. სასაზღვრო \u003d "ნომერი" ქონება - ადგენს მაგიდის ჩარჩოს სისქეს. წინა მაგალითებში, ჩვენ მივუთითეთ სასაზღვრო \u003d "1", რაც იმას ნიშნავს, რომ ფარგლებში სისქე - 1 პიქსელი.
5. Bordercolor \u003d "ფერი" ქონება - ადგენს ფარგლებს. თუ საზღვრის \u003d "0", ჩარჩო არ იქნება და ფარგლების ფერი არ გაითვალისწინებს.
6. CellPadding ქონების \u003d "ნომერი" - ჩარჩო საწყისი საკანში შინაარსი pixels.
7. CellSpacing ქონება \u003d "ნომერი" - მანძილი შორის უჯრედები პიქსელებში.
8. ქონების Cols \u003d "ნომერი" არის სვეტების რაოდენობა. თუ არ დააკონკრეტებთ, ბრაუზერი თავად განსაზღვრავს სვეტების რაოდენობას. ერთადერთი განსხვავება ისაა, რომ ამ პარამეტრის დაზუსტება სავარაუდოდ მაგიდის გადმოსაწერად დააჩქარებს.
9. ქონების ჩარჩო \u003d "პარამეტრი" - როგორ აჩვენე საზღვრები მაგიდაზე. შეუძლია მიიღოს შემდეგი ღირებულებები:
- ბათილად - არ მიაპყროს საზღვრებს
- სასაზღვრო - საზღვრის გარშემო მაგიდა
- ზემოთ - საზღვარი მაგიდის ზედა ზღვარზე
- ქვემოთ - საზღვარი მაგიდის ბოლოდან
- hsides - დამატება მხოლოდ ჰორიზონტალური საზღვრები (ზედა და ქვედა მაგიდა)
- vsides - დახაზეთ მხოლოდ ვერტიკალური საზღვრები (მარცხნივ და მარჯვნივ მაგიდადან)
- rHS - საზღვარი მხოლოდ მაგიდის მარჯვენა მხარეს
- lHS - საზღვარი მხოლოდ მაგიდის მარცხენა მხარეს
10. სიმაღლე \u003d "ნომერი" ქონება - ადგენს ცხრილის სიმაღლეს: ან პიქსელებში ან პროცენტებში.
11. ქონება არის წესები \u003d "პარამეტრი" - სად უნდა გამოავლინოს საზღვრები საკნებში. შეუძლია მიიღოს შემდეგი ღირებულებები:
- ყველა - ხაზი ამახვილებს თითოეული უჯრედის მაგიდასთან
- ჯგუფები - ხაზი გამოჩნდება ჯგუფებს შორის, რომლებიც ჩამოყალიბებულია tags. , , ,
ან
- cols - ხაზი გამოჩნდება სვეტებს შორის
- არცერთი - ყველა საზღვრები დამალულია
- რიგები - საზღვარი შედგენილია მაგიდის რიგებში, რომლებიც შექმნილია ტეგით
12. სიგანე \u003d "ნომერი" ქონება - ადგენს ცხრილის სიგანეს: ან პიქსელებში ან პროცენტში.
13. კლასი ქონება \u003d "კლასის სახელი" - თქვენ შეგიძლიათ მიუთითოთ კლასის სახელი, რომელსაც მაგიდა ეკუთვნის.
14. სტილი ქონება \u003d "სტილის" - სტილის შეიძლება ინდივიდუალურად თითოეული მაგიდისთვის.
ახლა დროა, რომ საკუთარ თავს მაგიდასთან დაივიწყოს და მაგიდის უჯრედების ატრიბუტები. ეს ატრიბუტები უნდა დაწერონ აღმოჩენაში
.
ატრიბუტები და თვისებები და |
1. ქონების გასწორება \u003d "პარამეტრი" - ცალკე მაგიდის უჯრედის განლაგებას ადგენს. შეუძლია მიიღოს შემდეგი ღირებულებები:
- მარცხნივ - მარცხნივ მარცხნივ
- ცენტრი - ცენტრის განლაგება
- მარჯვენა - მარჯვენა ზღვარზე
2. ფონზე \u003d "URL" ქონება - უჯრედის ფონის სურათს ადგენს. URL- ის ნაცვლად, ფონური სურათის მისამართი უნდა იყოს დაწერილი.
3. BGColor \u003d "ფერი" ქონება - ადგენს უჯრედის ფონის ფერს.
4. Bordercolor \u003d "ფერი" ქონება - უჯრედის ჩარჩოს ფერს ადგენს.
5. char \u003d "წერილი" ქონება - ადგენს წერილს, საიდანაც თქვენ უნდა გააკეთოთ განვიხილეთ. გასწორება ატრიბუტის ღირებულება უნდა იყოს დამონტაჟებული როგორც char.
6. Colspan \u003d "ნომერი" ქონება - ადგენს კომბინირებული ჰორიზონტალური უჯრედების რაოდენობას.
7. სიმაღლე \u003d "ნომერი" ქონება - ადგენს ცხრილის სიმაღლეს: ან პიქსელებში ან პროცენტში.
8. სიგანე \u003d "ნომერი" ქონება - ადგენს ცხრილის სიგანეს: ან პიქსელებში ან პროცენტში.
9. Rowspan \u003d "ნომერი" ქონება - ადგენს ვერტიკალური უჯრედების რიცხვს.
10. ქონების VALIGN \u003d "პარამეტრი" - უჯრედის შინაარსი ვერტიკალურად.
- ყველაზე - უჯრედების შინაარსი ხაზის ზედა ზღვარზე
- შუა - განვიზიათი შუა
- ქვედა - გასწორება ქვედა ზღვარზე
- საბაზისო - საბაზისო განლაგება
შენიშვნა 1. ამისთვის | იგივე პარამეტრების ხელმისაწვდომია | . პარამეტრების ერთი ტეგი | იქნება იერარქიულად გამოყენებული ყველა მის ფარგლებში
როგორ გააკეთოს საზღვრები საკნების მაგიდაზე არ glued
საზღვრის გამოყენების შემთხვევაში (უჯრედების საზღვრები) და ნულოვანი შინაგანი საკნებში, ისინი ჯერ კიდევ წებოვანია და გამოდის ორმაგი საზღვარი. თავიდან აცილების მიზნით, თქვენ უნდა დარეგისტრირდეთ Styles Sabite Border-Collapse: Collapse:
...
ძვირფასო მკითხველი, ახლა თქვენ გაეცანით HTML მაგიდის შესახებ. ახლა მე ვურჩევ, რომ მომდევნო გაკვეთილზე წასვლა.
| |
|
| | | | | |
| |
