HTML ცხრილების უმრავლესობის მიღება ცხრილის ატრიბუტების მიხედვით
HTML მაგიდის ატრიბუტები მოგცემთ ბევრად უფრო მეტ კონტროლს HTML ცხრილებზე. მაგიდასთან ბევრი ატრიბუტი არსებობს, რათა მათ უფრო საინტერესო და შეცვალონ თქვენი გვერდი.
HTML TABLE ელემენტის ატრიბუტები
HTML5- ში ელემენტს იყენებს გლობალური ატრიბუტები და ერთი სხვა ატრიბუტი:. და შეიცვალა მხოლოდ ღირებულება 1 ან ცარიელი (ანუ საზღვარი = ""). თუ საზღვრის სიგანე შეცვლით, სასაზღვრო სიგანე უნდა გამოიყენოთ.
ქვემოთ იხილეთ გაეცნონ მოქმედი HTML5 ცხრილის ატრიბუტებს.
ასევე არსებობს რამდენიმე ატრიბუტი, რომლებიც HTML 4.01 სპეციფიკაციის ნაწილია, რომელიც HTML5- ში მოძველებულია:
- -გამოიყენეთ CSS padding ქონების მაგიდის TD და TH ელემენტები.
- გამოიყენეთ CSS- ის სასაზღვრო-ინტერვალი მაგიდაზე.
- -Use CSS სტილის სასაზღვრო ფერი: შავი; და საზღვარზე მაგიდაზე.
- -Use CSS სტილის სასაზღვრო ფერი: შავი; და სასაზღვრო სტილი მაგიდის შესაბამისი ელემენტების შესახებ.
- -ამის ნაცვლად, უნდა აღწეროთ ცხრილის სტრუქტურა CAPTION- ში ან დავამატოთ მთელი ცხრილი ფიგურაში და აღწერს მას FIGCAPTION- ში. გარდა ამისა, თქვენ შეგიძლიათ გაამარტივოთ ცხრილის სტრუქტურა ისე, რომ არანაირი ახსნა არ არის საჭირო.
- გამოიყენეთ CSS სიგანე.
და ერთი ატრიბუტი, რომელიც ეწინააღმდეგებოდა HTML 4.01 და ასევე მოძველებულია HTML5- ში.
შეიტყვეთ უფრო მეტი HTML 4.01 TABLE ატრიბუტები.
- align -Use CSS ზღვარი ქონების ნაცვლად.
ასევე არსებობს რამდენიმე ატრიბუტი, რომელიც არ შედის HTML- ის სპეციფიკაციის ნაწილი.
გამოიყენეთ ეს ატრიბუტები, თუ იცით, რომ ბრაუზერის მხარდაჭერა შეგიძლიათ გაუმკლავდეთ მათ და არ აინტერესებთ სწორი HTML.
- გამოიყენეთ CSS- ის ფონის ფერი ნაცვლად.
- bordercolor- გამოიყენეთ CSS- ის სასაზღვრო ფერის ნაცვლად.
- bordercolorlightlight- გამოიყენეთ CSS- ის სასაზღვრო ფერის ნაცვლად.
- bordercolordarkark- გამოიყენეთ CSS- ის სასაზღვრო ფერის ნაცვლად.
- cols - ამ ალტერნატივას ალტერნატივა არ აქვს.
- სიმაღლე - გამოიყენეთ CSS- ის ქონების სიმაღლის ნაცვლად.
- გამოიყენეთ CSS ქონების მარჟის ნაცვლად.
- გამოიყენეთ CSS ქონების მარჟის ნაცვლად.
- გამოიყენეთ CSS ობიექტის თეთრი სივრცე ნაცვლად.
- გამოიყენეთ CSS ობიექტის ვერტიკალური-გასწორება ნაცვლად.
შეიტყვეთ უფრო მეტი ბრაუზერის სპეციფიკური TABLE ატრიბუტების შესახებ.
HTML5 TABLE ელემენტის ატრიბუტები
როგორც ზემოთ აღვნიშნეთ, არსებობს მხოლოდ ერთი ატრიბუტი, გლობალური ატრიბუტების მიღმა, რაც მოქმედებს HTML5 TABLE ელემენტზე: საზღვარი.
სასაზღვრო ატრიბუტი გამოიყენება სასაზღვრო საზღვრის მთლიანი ცხრილისა და მისი ყველა საკნების განსაზღვრისთვის. იყო გარკვეული კითხვა იმის შესახებ თუ რამდენად შეესაბამებოდა ის HTML5 სპეციფიკაციას, მაგრამ ის დარჩა იმის გამო, რომ მასში მოცემულია ინფორმაცია მაგიდის სტრუქტურის შესახებ, უბრალოდ სტილის შედეგების მიღმა.
სასაზღვრო ატრიბუტის დასამატებლად, თქვენ დააფასებთ 1-ს, თუ საზღვარი და ცარიელია (ან დატოვეთ ატრიბუტი), თუ არ არსებობს. ბრაუზერის უმეტესობა მხარს უჭერს 0 საზღვრის გარეშე, და ნებისმიერი სხვა რიცხვითი მნიშვნელობა (2, 3, 30, 500 და ა.შ.) საზღვრის სიგანეში პიქსელებში გამოცხადება, მაგრამ ეს მოძველებულია HTML5- ში. ამის ნაცვლად, თქვენ უნდა გამოიყენოთ CSS საზღვრის სტილი თვისებები, რათა განისაზღვროს საზღვრის სიგანე და სხვა სტილი.
ცხრილის შექმნა სასაზღვრო, დაწერე:
border = "1" >
ეს არის საზღვარი სასაზღვრო
არსებობს HTML 4.01 ატრიბუტები, რომლებიც მოძველებულია HTML5- ში. თუ თქვენ გეგმავთ HTML 4.01 დოკუმენტის წერას, შეგიძლიათ ისწავლოს, წინააღმდეგ შემთხვევაში, შეგიძლიათ იგნორირება. ამ ატრიბუტების უმრავლესობას აქვს ზემოთ აღნიშნული ალტერნატივები.
ჩვენ აღწერს ელემენტის ატრიბუტებს, რომლებიც მოქმედებს HTML5 (და HTML 4.01). ეს აღწერს ცხრილის ატრიბუტებს, რომლებიც მოქმედებს HTML 4.01, მაგრამ მოძველებულია HTML5- ში. თუ თქვენ კვლავ ჩაწერეთ HTML 4.01 დოკუმენტები, შეგიძლიათ გამოიყენოთ ეს ატრიბუტები, მაგრამ მათი უმრავლესობა აქვს ალტერნატივას, რაც თქვენს გვერდებს უფრო მომავალი გახდება იმისთვის, რომ გადავიდეს HTML5- ზე.
Valid HTML 4.01 ატრიბუტები
ჩვენ ზემოთ აღწერილი ატრიბუტი.
ერთადერთი განსხვავება HTML5- დან HTML 4.01 არის ის, რომ თქვენ შეგიძლიათ მიუთითოთ მთელი მთელი რიცხვი (0, 1, 2, 15, 20, 200 და ა.შ.), რათა განსაზღვროს საზღვრის სიგანე პიქსელებში.
მაგიდის აშენება 5px სასაზღვრო, დაწერეთ:
border = "5" >
ამ ცხრილს აქვს 5px საზღვარი.
იხილეთ ორი მაგიდის საზღვრების მაგალითი.
ატრიბუტი განსაზღვრავს სივრცის ოდენობას საკანში საზღვრებს შორის და უჯრედის შინაარსს. ნაგულისხმევი ორი პიქსელია. დააყენეთ cellpadding to 0 თუ არ გსურთ სივრცე შინაარსი და საზღვრები.
იმისათვის, რომ საკანში padding 20, წერენ:
cellpadding = "20" >
ამ ცხრილს 20-მდე უჯრედები აქვს
მობილური საზღვრები გამოიყოფა 20 პიქსელით.
ცხრილის მაგალითის ჩვენება სვეტთან ერთად
ატრიბუტი განსაზღვრავს სივრცის ოდენობას ცხრილის უჯრედებსა და უჯრედულ კონტენტს შორის. მსგავსად მობილურში, ნაგულისხმევი მითითებული ორ პიქსელს, ასე რომ თქვენ უნდა დააყენოთ ის 0-ის თუ არ გსურთ საკანში სივრცე.
იმისათვის, რომ დაამატოთ საკანში ინტერვალი მაგიდაზე, დაწერე:
cellspacing = "20" >
ამ ცხრილს აქვს 20 სელის ზედაპირი.
საკნების გამოყოფა 20 პიქსელით.
იხილეთ ცხრილი ჩანართებით
ატრიბუტი განსაზღვრავს რა სასაზღვრო ტერიტორიის მიმდებარე საზღვრებს. თქვენ შეგიძლიათ დაამატოთ თქვენი ცხრილი ოთხივე მხარეს, რომელიმე მხარეს, ზედა და ქვედა, მარცხნივ და მარჯვნივ, ან არა.
აქ არის HTML მაგიდასთან ერთად მხოლოდ მარცხენა მხარეს:
frame = "lhs" >
ეს მაგიდა
ექნება
მხოლოდ
მარცხენა მხარეს კარკასული.
და კიდევ ერთი მაგალითი ქვედა ჩარჩოში:
frame = "bottom" >
ეს ცხრილი აქვს ბოლოში ჩარჩო.
შეამოწმეთ გარკვეული მაგიდები ჩარჩოებით
ატრიბუტი მსგავსია სურათის ატრიბუტისთვის, მხოლოდ ის მოქმედებს მაგიდის უჯრედების გარშემო. თქვენ შეგიძლიათ დააყენოთ წესები ყველა საკნებში, სვეტებს შორის, ჯგუფებს შორის TBODY და TFOOT ან არა.
ცხრილების აშენება რიგებიდან მხოლოდ წერტილებს შორის, დაწერეთ:
წესები = "რიგები" >
ეს 4x4 ცხრილი აქვს
რიგები არ არის სვეტების
აღწერილია
წესების ატრიბუტი.
და კიდევ ერთი სტრიქონების შორის ხაზები:
წესები = "cols" >
ეს არის
მაგიდა
სადაც
სვეტები
არის
ხაზგასმით აღინიშნა
აქ არის მაგალითი მაგიდის წესებით
ატრიბუტი აწვდის ინფორმაციას ეკრანის მკითხველისთვის და სხვა მომხმარებლის აგენტების შესახებ, რომლებსაც შესაძლოა პრობლემები ჰქონდეთ მაგიდის კითხვებზე. შემაჯამებელი ატრიბუტის გამოყენებისათვის, დაწერეთ ცხრილის მოკლე აღწერა და დაამატეთ, რომ ატრიბუტის ღირებულება. შემაჯამებელი ვებ-გვერდზე არ გამოჩნდება უმეტესი სტანდარტული ვებ ბრაუზერი.
აქ არის მარტივი მაგიდა დავწეროთ მოკლედ:
summary = "ეს არის ნიმუში მაგიდა, რომელიც შეიცავს შემავსებელ ინფორმაციას, ამ მაგიდის მიზანი არის შემაჯამებელი დასკვნა." >
სვეტი 1 სტრიქონი 1
სვეტი 2 სტრიქონში 1
სვეტი 1 სტრიქონი 2
სვეტი 2 სტრიქონს 2
ცხრილის ნახვა შემაჯამებელი
ატრიბუტი განსაზღვრავს ცხრილის სიგანე ან პიქსელებში ან კონტეინერის ელემენტის პროცენტულ მაჩვენებელს. თუ სიგანე არ არის დაყენებული, მაგიდა მხოლოდ იმდენი სივრცე იქნება, რომ მას სჭირდება შინაარსი, მაქსიმალური სიგანე, ისევე როგორც მშობლის ელემენტის სიგანე.
მაგიდის აშენება კონკრეტული სიგანე პიქსელებით, დაწერეთ:
width = "300" >
ეს არის 80% სიგანე კონტეინერის სიგანეში.
და აშენება მაგიდა სიგანე, რომელიც პროცენტული მშობელი ელემენტის, წერენ:
width = "80%" >
ეს არის 80% სიგანე კონტეინერის სიგანეში.
იხილეთ ცხრილის მაგალითი სიგანეზე
შეწყვეტილია HTML 4.01 TABLE ატრიბუტი
TABLE- ის ელემენტის ერთი ატრიბუტია, რომელიც HTML 4.01-ში შეფარდება და HTML5- ში მოძველებულია: გასწორება . ეს ატრიბუტი საშუალებას მოგცემთ დაადგინოთ, თუ რომელი მაგიდაზე უნდა იყოს განთავსებული გვერდი იმ გვერდთან შედარებით, რომელიც მის გვერდით არის. ეს ატრიბუტი უარყოფილი იქნა HTML 4.01-ში, და თავიდან უნდა იქნას გამოყენებული. ამის ნაცვლად, თქვენ უნდა გამოიყენოთ CSS ქონება ან ზღვარი მარცხნივ: ავტო; და ზღვარი მარჯვნივ: ავტო; სტილები. Float ქონება გაძლევთ შედეგს, რომელიც უფრო ახლოს არის, თუ რა აერთიანებს ატრიბუტი გათვალისწინებული, მაგრამ ეს შეიძლება გავლენა იქონიოს გზა დანარჩენი გვერდი შინაარსი არიან. ზღვარი-უფლება: ავტო; და ზღვარი მარცხნივ: ავტო; რა არის W3C რეკომენდაციას, როგორც ალტერნატივა.
აქ არის მოხსნილი მაგალითი, რომელიც აერთიანებს ატრიბუტს:
align = "right" >
ეს ცხრილი სწორდება
ტექსტი მიედინება მის გარშემო მარცხნივ
იხილეთ უგულებელყოფილი მაგალითი ატრიბუტის ატრიბუტის გამოყენებით.
და იგივე ეფექტის მისაღებად მართებული (არაეფექტური) HTML, დაწერეთ:
style = "float: right;" >
ეს ცხრილი სწორდება
ტექსტი მიედინება მის გარშემო მარცხნივ
შემდეგი განმარტავს TABLE ატრიბუტებს, რომლებიც არ არიან HTML- ის სპეციფიკაციის ნაწილი.
წინა ინფორმაცია აღწერს HTML ელემენტის ატრიბუტებს, რომლებიც მოქმედებს HTML 4.01-ში, მაგრამ მოძველებულია HTML5- ში.
ქვემოთ ჩამოთვლილია TABLE ატრიბუტები, რომლებიც არ მოქმედებს ნებისმიერ მიმდინარე სპეციფიკაში. თუ არ აინტერესებთ თუ არა თქვენი გვერდები შეამოწმეთ და თქვენი მომხმარებლები იყენებენ ბრაუზერს, რომელიც მხარს უჭერს ამ ელემენტებს, მაშინ შეგიძლიათ გამოიყენოთ ეს ელემენტები. მაგრამ მათი უმრავლესობა თანამედროვე ბრაუზერებში არ არის მხარდაჭერილი ან ალტერნატივები, რომლებიც უფრო სტანდარტებს შეესაბამება.
ჩვენ არ გირჩევთ გამოიყენოთ ეს ატრიბუტები თქვენს HTML ცხრილებში.
ატრიბუტი არის ძველი ატრიბუტი, რომელიც ადრე იყო CSS- ის მხარდაჭერით. ეს საშუალებას გაძლევთ შეცვალოთ ცხრილის ფონის ფერი. თქვენ შეგიძლიათ დააყენოთ ფერი სახელი ან თექვსმეტობითი კოდი. ეს ატრიბუტი ჯერ კიდევ ბევრი ბრაუზერით მუშაობს, მაგრამ მომავალში დასაბუთებული HTML- ისთვის არ უნდა გამოიყენოთ იგი და გამოიყენოთ CSS ნაცვლად.
ამ ალტერნატივის უკეთესი ალტერნატივა არის სტილის ქონება.
მაგიდის ფერის ფერის შესაცვლელად დაწერეთ:
style = "background-color: #ccc;" >
ეს ცხრილი აქვს ნაცრისფერი ფონდი
Bgcolor ატრიბუტის მსგავსად, საზღვრის ატრიბუტი საშუალებას გაძლევთ შეცვალოთ ატრიბუტის ფერი. ეს ატრიბუტი მხოლოდ Internet Explorer- ის მხარდაჭერით ხორციელდება. ამის ნაცვლად, თქვენ უნდა გამოიყენოთ საზღვრის ფერი სტილის ქონება.
მაგიდის საზღვრის ფერის შესაცვლელად დაწერე:
style = "border-color: red;" >
ეს ცხრილი აქვს წითელი საზღვარი.
საზღვრისფერით და საზღვრისკოპარკის ატრიბუტები ჩართულია Internet Explorer- ში, რომელიც საშუალებას გაძლევთ შექმნათ 3D საზღვარი თქვენს მაგიდასთან. თუმცა, როგორც IE8 და up, ეს მხოლოდ მხარს უჭერს IE7 სტანდარტების რეჟიმი და Quirks რეჟიმი . Microsoft აცხადებს, რომ ეს თვისებები აღარ არის მხარდაჭერილი.
მოკლე დროში, Cols ატრიბუტი TABLE ელემენტს შემოთავაზებული, რათა დაეხმაროს ბრაუზერები ვიცი, რამდენი სვეტების მაგიდა ჰქონდა. შენობა იყო, რომ ეს ხელს შეუწყობს დიდი მაგიდების გაწევის დაჩქარებას. თუმცა ეს მხოლოდ Internet Explorer- ის მიერ განხორციელდა, ხოლო IE8 და up, ეს მხოლოდ IE7 სტანდარტების რეჟიმსა და Quirks რეჟიმში არის მხარდაჭერილი.
იმის გამო, რომ არსებობს სიგანე ატრიბუტი (მოძველებული HTML5) ბევრი ადამიანი მიიჩნია იყო სიმაღლე ატრიბუტი მაგიდები ასევე. მაგრამ იმის გამო, რომ მაგიდები შეესაბამება მათი შინაარსის სიგანე ან განსაზღვრული სიგანე CSS ან სიგანე ატრიბუტი, სიმაღლე არ შეიძლება შეზღუდული. ამის ნაცვლად, ბრაუზერები დაშვებულ სიმაღლე ატრიბუტს განსაზღვრავს მინიმალური სიმაღლე მაგიდასთან. თუ მაგიდა უფრო მაღალია, ვიდრე სიმაღლე, ეს უფრო მაღალია. მაგრამ თქვენ უნდა გამოიყენოთ ქონება
ერთად CSS სიმაღლე ქონების შეგიძლიათ შეზღუდოს სიმაღლე თუ იყენებთ CSS ქონების ასევე განვსაზღვროთ, თუ რა ხდება ზედმეტი შინაარსი.
მაგიდაზე მინიმალური სიმაღლის დასადგენად დაწერეთ:
style = "height: 30em;" >
ეს ცხრილი მინიმუმ 30 წამში მაღალია.
ორი ატრიბუტი და დამატებითი სივრცე მარცხენა / მარჯვენა მხარეს (hspace) და ზედა / ქვედა (vspace) მაგიდის გარშემო. თქვენ უნდა გამოიყენოთ სტილის ქონება ნაცვლად.
ვერტიკალური სივრცის დაყენება 20 პიქსელამდე და ჰორიზონტალური სივრცე 40 პიქსელზე, დაწერეთ:
style = "margin: 20px 40px;"
ამ ცხრილს აქვს 20 პიქსელის vspace და 40 პიქსელიანი hspace.
ატრიბუტი არის ლოგიკური ატრიბუტი, რომელიც განსაზღვრავს თუ არა ცხრილის შინაარსი მშობლის ელემენტის ან ფანჯრის ანუ ჰორიზონტალური სენსორების ზღვარზე. ამის ნაცვლად, თქვენ უნდა განისაზღვროს თითოეული მაგიდის საკანში შეფუთვის მახასიათებლები CSS- ის გამოყენებით.
იმისათვის, რომ სვეტი ბევრი ტექსტით არ გადაიტანოთ, წერენ:
style = "თეთრი სივრცე: nowrap;" ეს არის სვეტის შინაარსი. მაგრამ მაშინაც კი, თუ კონტეინერი უფრო ფართოა, ტექსტი არ უნდა გადაიტანოთ მომდევნო ხაზში, მაგრამ აიძულებს ბრაუზერის ფანჯარაში ჰორიზონტალურად გადაახვიოს ყველა შინაარსი.
საბოლოო ჯამში, ატრიბუტი განსაზღვრავს, თუ როგორ უჯრედის ფარგლებში ვერტიკალურად განლაგდება თითოეული უჯრედის შინაარსი. იმის ნაცვლად, რომ ამ არასწორი ატრიბუტი, თქვენ უნდა გამოიყენოთ CSS ქონების თითოეულ საკანში გსურთ შეიცვალოს განვიხილეთ. თქვენ არ შეამჩნევთ ამ სტილის ეფექტს, თუ უჯრედის შინაარსი ნაკლებია, ვიდრე სხვა, უფრო დიდი უჯრედების მიერ შექმნილი სივრცე.
იმისათვის, რომ აიძულოს საკანში გასწორება ბოლოში (ვიდრე შუა, როგორც ნაგულისხმები), წერენ:
ეს უჯრედი უფრო მეტია, ვიდრე დანარჩენი და ამით აიძულებს სიმაღლის სიმაღლეს. ასე რომ თქვენ დაინახავთ, რომ ვერტიკალურად მიუერთებული უჯრედი ბოლოშია.
style = "ვერტიკალური- align: bottom;" > შინაარსი ბოლოში.
შინაარსი შუა.