ჩადეთ ცხრილი html-ში. თითქმის სტანდარტული რეჟიმი

09.07.2019

ნებისმიერი ცხრილი HTML-ში არის რიგებისა და სვეტების ნაკრები, რომელთა გადაკვეთაზე არის უჯრედები. ცხრილების შექმნა HTML-ში საკმაოდ მარტივია, თქვენ უბრალოდ უნდა წარმოიდგინოთ საბოლოო მოდელი. HTML-ში ცხრილები გამოიყენება არა მხოლოდ მონაცემების წარმოსაჩენად, ისინი შეიძლება გამოყენებულ იქნას ტექსტური ბლოკების, სურათების და ა.შ. ვებ გვერდზე, ე.ი. მათი დახმარებით შეგიძლიათ თავად შექმნათ გვერდის განლაგება.

TABLE ელემენტი, შექმენით ცხრილი

HTML-ში ცხრილების შესაქმნელად გამოიყენება ცხრილის ელემენტი და ყველა კოდი (მისი შინაარსი)ცხრილები განლაგებულია ტეგებს შორის . ამ ელემენტის ატრიბუტები ადგენს მნიშვნელობებს მთელი ცხრილისთვის:

ფონი - აყენებს სურათს (URL), რომელიც შეიძლება იყოს ფონი მთელი ცხრილისთვის;
bgcolor - ცხრილის ფონის ფერი, დაყენებულია თუ ფონი არ არის დაყენებული, როგორც გამოსახულება;
საზღვარი - მაგიდის ხაზების სისქე, თუ საჭიროა ხილული საზღვრები;
bordercolor - მაგიდის ხაზების ფერი;
cellpadding - მანძილი უჯრედების შიგნით ტექსტიდან უჯრედის საზღვრებამდე;
უჯრედების ინტერვალი - მანძილი ცხრილის საზღვრებიდან უჯრედების გარე საზღვრებამდე (ცხრილის შიგნით);
სიგანე - ადგენს ცხრილის სიგანეს px-ში ან %.

ჩვენ ვწერთ მაგიდის კოდს ლურჯი ფონის მქონე ცხრილისთვის, ხაზის სისქე 1 პიქსელი თეთრი, უჯრედების შიგნით და გარეთ 2 პიქსელი, სიგანე გვერდის 100%.

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

დაამატეთ ხაზი

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

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

უჯრედების დამატება

უჯრედები ქმნიან ცხრილის ვერტიკალურ სვეტებს; . დაამატეთ უჯრედები ჩვენს ცხრილში:

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

საკანი No1
საკანი No2
საკანი No3

ჩვენ ვნახავთ შედეგად ცხრილს:

სტრიქონების შეერთება

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

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

rowspan="2" >სტრიქონები No1 და No2 გაერთიანებულია
საკანი No1
საკანი No2

საკანი No3
საკანი No4

ხაზი No3
საკანი No5
საკანი No6

ბრაუზერი აჩვენებს:

#1 და #2 სტრიქონები გაერთიანებულია ხაზი No3

საკანი No1	საკანი No2
საკანი No3	საკანი No4
საკანი No5	საკანი No6

სვეტების შერწყმა

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

bgcolor="blue" border="1" bordercolor="white" cellpadding="10"cellpacing="2" width="100%" >

colspan="2" >სვეტები No1 და No2 გაერთიანებულია
სვეტი #3

საკანი No1
საკანი No2
საკანი No3

საკანი No4
საკანი No5
საკანი No6

ბრაუზერი აჩვენებს:

ატრიბუტები კოლსპანიდა მწკრივების სიგრძეშეიძლება გამოყენებულ იქნას ერთდროულად. ბრაუზერში ასე გამოიყურება:

ან ასე:

სცადეთ კოდის დაწერა თავად!

მაგიდის ზომები და განლაგება

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

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

მაგიდის ფონი

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

ბოლოს და ბოლოს

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

/ რის გარეშეც ვერ შექმნით ვებსაიტს: ∼ ∼

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

მაგიდის შექმნა

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

ცხრილის ვებ გვერდზე დასამატებლად გამოიყენეთ ტეგი

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

. ცხრილი უნდა შეიცავდეს მინიმუმ ერთ უჯრედს (მაგალითი 12.1). ნებადართულია თეგის ნაცვლად

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

და არა.

მაგალითი 12.1. მაგიდის შექმნა

TABLE ტეგი

უჯრედი 1 უჯრედი 2

უჯრედი 3

უჯრედი 4

უჯრედების რიგი და მათი გარეგნობა ნაჩვენებია ნახ. 12.1.

ინსტრუქციები

პირველი ნაბიჯი არის ცხრილის შექმნა, თუ ის უკვე არ არსებობს. ეს მოქმედება შესრულებულია ატრიბუტში. ამისათვის გამოიყენება ტეგები (საჭიროა ტეგის დახურვა):

- მაგიდა;
- ხაზი;

- სვეტი.

ძირითადი დამატებითი ატრიბუტები:
საზღვარი – საზღვარი;

Bordercolor – საზღვრის ფერი;
სიგანე – სიგანე;
სიმაღლე - სიმაღლე.

2X2 ცხრილის სინტაქსი საზღვრების გარეშე და მარცხნივ/მარჯვნივ გასწორებული შინაარსისთვის არის:

1 უჯრედის შინაარსი	მე-2 უჯრედის შინაარსი
მე-3 უჯრედის შინაარსი	მე-4 უჯრედის შინაარსი

სურათი უნდა განთავსდეს ტეგის შემდეგ

. თუ სურათს ჩასვამთ ზემოთ წარმოდგენილი ცხრილის პირველ უჯრედში, მიიღებთ:

	მე-2 უჯრედის შინაარსი
მე-3 უჯრედის შინაარსი	მე-4 უჯრედის შინაარსი

დამატებითი ატრიბუტები:
სიგანე – სიგანე;
სიმაღლე – სიმაღლე;
Alt - ალტერნატიული ტექსტი, რომელიც გამოჩნდება მომხმარებლისთვის, თუ სურათის ნახვის ფუნქცია გამორთულია;
გასწორება – ჰორიზონტალური გასწორება;
Valign – ვერტიკალური განლაგება;
სათაური - სურათის წარწერა.

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

	მე-2 უჯრედის შინაარსი
მე-3 უჯრედის შინაარსი	მე-4 უჯრედის შინაარსი

სურათის დამატებითი პარამეტრები.

1. სურათის ფერად შეცვლა მაუსის ზემოდან და კურსორის მდებარეობის შეცვლის შემდეგ:
onMouseOver="this.style.background="#color number"" onMouseOut="this.style.background="#color number""

2. სურათის შეცვლა სხვა სურათზე მაუსის დაჭერისას:
onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif""

3. სურათების მბრუნავი კარუსელის ჩასმა ცხრილის უჯრედში (მნიშვნელობები შეიძლება შეიცვალოს):

// 7 ცვლადი ქცევის გასაკონტროლებლად
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // მართალი თუ მცდარი
var Car_Border_Color="000000"; საზღვარი = "0"
var Car_Speed=5;
var Car_Direction=true; // მართალი თუ მცდარი
var Car_NoOfSides=6; // უნდა იყოს 4, 6, 8 ან 12

/* მასივი სურათების და არჩევითი ბმულების დასაზუსტებლად.
ოთხმხრივი კარუსელისთვის მიუთითეთ მინიმუმ 2 სურათი
6 გვერდიანი კარუსელისთვის მიუთითეთ მინიმუმ 3
8 გვერდიანი კარუსელისთვის მიუთითეთ მინიმუმ 4
12 გვერდიანი კარუსელისთვის მიუთითეთ მინიმუმ 6
თუ ბმული არ არის საჭირო, შეინახეთ იგი ""
*/
Car_Image_Sources=ახალი მასივი(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// შენიშვნა ბოლო სტრიქონის შემდეგ მძიმით არ არის
);

/******************** არ დაარედაქტიროთ ქვემოთ **************************** ******/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=ახალი მასივი(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4.3*Math.PI/2.5*Math.PI/3.11*Math.PI/6.0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=ახალი მასივი(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

ფუნქცია კარუსელი ()
if(document.getElementById)(
for(i=0;i

გაქვთ შეკითხვები?

სახელი

ელფოსტა *

შეტყობინება *

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

თქვენი კომენტარი (სურვილისამებრ):

გაგზავნა