| TANDILA | თარიღი: შაბათი, 2011 ივლისი 16, 19:12 | შეტყობინება # 1 |
 ვებ მასტერი
ჯგუფი: ადმინი
ჰოსტები: 160
| ცხრილები <table></table> ტეგით გამოისახება, მაგრამ ცხრილს უჯრებიც გააჩნია? HTML-მა არც ის დაჩაგრა და საკუთარი ტეგი გამოუყო, მაგრამ გამოსახვის ერთი თავისებურებით: ჯერ ვუთითებთ, რომ გვაქვს სტრიქონი, შემდეგ კი ვუთითებთ ამ სტრიქონში არსებულ უჯრებს.
სტრიქონის ტეგს <tr> ჰქვია, უჯრისას კი <td>.
ვთქვათ გვინდა შევქმნათ ერთუჯრიანი ცხრილი. კოდი შემდეგნაირი იქნება:
Code <table>
<tr>
<td> კონტენტი </td>
</tr>
</table>
ჯერ დაიწერა ტეგი <table>, რაც ცხრილის დასაწყისს ნიშნავს, შემდეგ "გავხსენით" ახალი სტრიქონი ტეგ <tr>-ს გამოყენებით და სიტყვა "კონტენტი" მოვაქციეთ უჯრის ტეგში. შემდეგ დავხურეთ გახსნილი ტეგები და ერთუჯრიანი ცხრილი მზადაა! თუმცა მას სრულყოფილებამდე ჯერ კიდევ ბევრი აკლია. ამ თავში სწორედ ამ ნაკლის გამოსწორებას შევეცდებით.
თქვენს წინაშეა ცხრილი, რომელსაც სამი სვეტი და ორი სტრიქონი აქვს. დავიწყოთ კოდის შედგენა, რომელიც ამ ცხრილს შექმნის:
Code <table>
<tr></tr>
<tr></tr>
</table>
ეს კოდი ორ სტრიქონს ქმნის. ჩვენ ორი სტრიქონი, სამი სვეტი და მათი გაფორმება გვინდა. ასე რომ, მივიწევთ წინ.
Code <table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
ამ კოდმა თითოეულ სტრიქონში სამი სვეტი ჩაამატა. წინსვლა იგრძნობა 
ცხრილის კეთებისას პირველად ყოველთვის სტრიქონი, ანუ <td> მიუთითეთ, სხვა შემთხვევაში სასურველ ცხრილს კი არა, უაზრობას მიიღებთ. კიდევ ერთი - ცხრილი გაკეთებამდე ქაღალდზე დახაზეთ, კოდის წერა კი ამის შემდეგ დაიწყეთ. ეს საქმეს შესამჩნევად გაგიადვილებთ.
შევავსოთ მიღებული კარკასი:
Code <table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
ალბათ მიხვდით, რომ ტეგ <td>-ებს შორის ჩაწერილი ციფრები ცხრილის შესაბამის უჯრაში ჩაიწერება და თანაც სტრიქონისა და სვეტის ნომრებსაც აღნიშნავს:
1x1 1x2 1x3
2x1 2x2 2x3
ჩვენს შედეგს ზემოთ მოყვანილი მაგალითისგან ფერიღა განასხავებს. მოვაშოროთ განსხვავება ატრიბუტ bgcolor-ის მეშვეობით. ეს სწორედ ის ატრიბუტია, <body> ტეგში გვერდის ძირითადი ფერის მისათითებლად რომ ვიყენებდით, მაგრამ ახლა სხვა გამოყენებაც მოეძებნა:
Code <table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
და აი რა მივიღეთ:
თუ თქვენ ძირითადი ფონის ფერის მითითება სტრიქონისთვის დაგჭირდა, მაშინ bgcolor ტეგ <tr>-ს მიუწერეთ:
Code <tr bgcolor="#FFCC33">
თუ ძირითადი ფონის ფერის მითითება მთელი ცხრილისთვის მოგინდათ, მაშინ bgcolor ტეგ <table>-ს მიუწერეთ:
Code <table bgcolor="#FFCC33">
ზუსტად იგივენაირად შეიძლება ფონად სურათი მივუთითოთ, ოღონდ ატრიბუტად background, მნიშვნელობად კი სურათის მისამართი უნდა მივუთითოთ.
თუ ცხრილის ძირითად ფონის ფერს ან სურათს მიუთითებთ, მაგრამ რომელიმე სტრიქონში ან უჯრაში მისი შეცვლა მოგინდებათ, უბრალოდ თავიდან მიუთითეთ ძირითადი ფონის ფერი ან სურათი სასურველ სტრიქონში ან უჯრაში.
ჩვენ ასეთი ცხრილის შექმნა ვცადეთ:
და ასეთი რამ მივიღეთ:
მგონი ზომაში განსხვავება საგრძნობია რა ვქნათ ამის თავიდან ასაცილებლად?
უკვე ნაცნობი ატრიბუტები - heigth და width უნდა გამოვიყენოთ. მათი მნიშვნელობების გამოსახვა ორნაირად - პიქსელებში და პროცენტებში შეიძლება, თუმცა პროცენტებზე ცოტა მოგვიანებით ვისაუბრებთ. ახლა კი გამოვსახოთ სიმაღლე და სიგანე პიქსელებში:
Code <table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
კი მაგრამ - გაუჩნდება კითხვა დაკვირვებულ მკითხველს - რატომ აქვს სიმაღლე მხოლოდ ორ სვეტს მითითებული მაშინ, როცა სიგანე ყველა სვეტს აქვს მითითებული? პასუხი მარტივია: HTML სტრიქონის სიმაღლედ სტრიქონში ყველაზე "მაღალი" უჯრის სიმაღლეს სვამს. ასე რომ, დანარჩენებისთვისაც სიმაღლის მითითება უაზროდ დროის კარგვაა.
ზუსტად იგივე ხდება სიგანის შემთხვევაშიც. მთელ სვეტში ყველა უჯრის სიგანე მაქსიმალურს უტოლდება.
მაგრამ არსებობს შემთხვევებიც, როცა სიმაღლისა და სიგანის მითითება პროცენტებში ჯობს. დავუშვათ, დაგჭირდათ, რომ სტრიქონში ერთი უჯრა მეორეს 75% იყოს. პროცენტული შეფარდების ანგარიშის ნაცვლად სასურველი უჯრის სიგანეს მნიშვნელობად მშვიდად უწერთ 75%-ს, HTML კი თავად ანგარიშობს, რომ ერთ უჯრას თუ მთელი სტრიქონის 75% აქვს დაკავებული, მეორეს 25% დარჩება და შესაბამისადაც იქცევა.
დავუბრუნდეთ ჩვენს მაგალითს, მგონი სასურველ შედეგს მივუახლოვდით:
მაგრამ ტექსტის(ამ შემთხვევაში ციფრების) უჯრების შუაში გამოსახვაა საჭირო:
Code <table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
ტექსტი ნაცნობი <center> ტეგის მეშვეობით უჯრის შუაში დავსვით და სასურველი შედეგიც მიღებულია:
თქვენ <center> ტეგის დანიშნულების მქონე ატრიბუტიც უნდა გახსოვდეთ. მას align ჰქვია და <td> ტეგთანაც გამოიყენება:
Code <td align="center">2x2</td>
ასევე გვახსოვს, რომ align-ს კიდევ სამი მნიშვნელობა აქვს, მაგრამ <td> ტეგთან მხოლოდ ორი - left და right გამოიყენება. სამწუხაროდ, justify-ს გამოყენება არ შეგვიძლია.
ნებისმიერ უჯრაში შეიძლება იყოს სურათები, ღილაკები, ბმულები და ტექსტი, რაღა თქმა უნდა. მოკლედ, სრული კომპლექტი.
|
| |
| |
