Rss Feed
Tweeter button
Facebook button
Technorati button
Reddit button
Myspace button
Linkedin button
Webonews button
Delicious button
Digg button
Flickr button
Stumbleupon button
Newsvine button
Youtube button
 

“div”-ები თუ “table”–ები?

Filed Under (WEB, პროგრამირება) by on 25-03-2010

Tagged Under : , , , , , , ,

 

რათქმაუნდა დივები. მოდით განვიხილოთ "< div>"-ი და "<table>",მათი პლიუსები და მინუსები.

 

დავიწყოთ გუგლით და საერთოდ საძიებო სისტემებით, მათი  პროერიტეტი თანამედროვე საიტებისკენ იქნება გადახრილი(ანუ <div>-ებით აწყობილ საიტებზე) , <table> შედარებით არ უყვართ,რადგან შრეებზე აგებული საიტი უფრო აკურატულია და დაინდექსირებაც უფრო მალევე ხდება. გარჩევაც უფრო ადვილია რადგან კოდის ძირითადი ნაწილი იმართება CSS-დან.

 

დივზე დაწერილი საიტის კოდი ბევრად მოკლეა, მსუბუქია და შესაბამისად უფრო სწრაფადაც იტვირთება, Ajax-ისთვისაც  მისწრებაა.

 

შეიძლება რაღაც მომენტში უფრო მარტივია table-ით განაწილდეს რაღაცეები, იმიტომ რომ საიტის გრიდად წარმოდგენა ჩვენთვის ბევრად ადვილია, მაგრამ როცა რთულ ლეიაუთზეა საქმე მიმდგარი, როგორ წარმოგიდგენია ათი ერთმანეთში ჩადგმული ცხრილი და მაგდენი <tr> <td>-ები? საბოლოოდ შეცდომების რაოდენობაც იზრდება და გვერდის რენდერიც უარესდება div-ებით კი ყველანაირი სახის ლეიაუთის აწყობა შეიძლება, თან საკმაოდ მოქნილად  და კოდიც კარგად გარჩევადია.

 

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

 

შეიძლება თავიდან დიდი დრო დაგჭირდეთ ასათვისებლად, მაგრამ მერწმუნეთ როცა გაერკვევით მიხვდებით  დივებით აწყობა, რომ ჯობია.  სტილები უნდა იყოს ცალკე,  არ უნდა იყოს ერთმანეთში არეული css-ი და html კოდები.

 

 

მოდით ახლა გაჩვენებთ, ამ სურათზე გამოსახული გვერდის კოდებს <div>-ებით  და  <table>-ით  და ნახეთ  განსხვავება,მიხვდებით რომელი უფრო ჯობია.

 

style.css:

@charset "utf-8";
/* CSS Document */
#div1{
width:100px;
height:100px;
float: left;-—მარცხნივ რომ დასვას დივი
}
#div2{ background-color:#CCCCCC;
width:200px;
height:100px;
float: left;
margin-left:15px;-—მარცხენა დაშორება
font-size:14px;
font-weight:bold;
}
#img1{ width:100px; height:100px;
}
#div3{ background-color: #CCFFCC;
font-size:14px;
margin-top:15px;-ზედა დაშორება
width:315px;
height:70px;
float: left;
}
#clearer{ clear:both;
}—-ეს სტილი გამოიყენება, როდესაც ორი დივი გვაქვს გვერდი-გვერდ და გვინდა ახალი დივი დავსვათ ქვემოთ,ამიტომ ვაკეთებთ ახალ  ცარიელ დივს და სტილში ვუწერთ clearer-ს.

 

<head>
<link type="text/css" href="style.css" rel="stylesheet" />

</head>
<body>
<div id="div1"><img id="img1" src="image.jpg"></div>
<div id="div2"> ჭიანჭველებს არ სძინავთ.
ჭიანჭველებს არ სძინავთ.
ჭიანჭველებს არ სძინავთ.
ჭიანჭველებს არ სძინავთ.
ჭიანჭველებს არ სძინავთ.</div>
<div  id="clearer" ></div>
<div id="div3">ისეთი დრო დაგვიდგა, ილია ჭავჭავაძის პუბლიცისტიკის მცოდნის ძებნას, სანთელიც რომ აღარ შველის.</div>
</body>

ახლა ვნახოთ <table>-ებით
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<table width="386" height="228" border="0" cellspacing="15px">
<font face="sylfaen" size="2px">
<tr>
<td width="125" height="116">
<img src="image.jpg" width="125" height="114" alt="image" />
</td>
<td width="212" bgcolor="#CCCCCC"; >
<strong>
ჭიანჭველებს არ სძინავთ.<br />
ჭიანჭველებს არ სძინავთ.<br />
ჭიანჭველებს არ სძინავთ.<br />
ჭიანჭველებს არ სძინავთ.<br />
ჭიანჭველებს არ სძინავთ.
>
</strong>
</td>
</tr>
<tr>
<td height="67" colspan="2" bgcolor="#CCFFFF";>ისეთი დრო დაგვიდგა, ილია ჭავჭავაძის პუბლიცისტიკის მცოდნის ძებნას, სანთელიც რომ აღარ შველის.
</td>
</tr>
</font
</table>
</body>
</html>

 

ამ შემთხვევაში პატარა კოდია, წარმოიდგინეთ საიტს აწყობთ მაშინ რამდენი <tr><td> გექნებათ,კოდი იქნება ქაოსურად, ერთი გამოსავალია კომენტარები,მაგრამ რამდენი კომენტარის დაწერა მოგიწევთ.:)

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

მე არ ვამბობ რომ <table>-ები აგარ გვინდა უბრალოდ დივი უფრო რეკომენდირებულია,< table>-ების გამოყენება შეიძლება როდესაც ინფორმაციის გამოტანა გვინდა ცხრილების სახით, ისინი  ზედ გამოჭრილია ამისათვის,მაგრამ როდესაც საიტის დიზაინს ვაწყობთ  არაა რეკომენდირებული!

იმედია გაითვალისწინებთ ჩემს რჩევებს. 🙂


Comments:

6 Responses to ““div”-ები თუ “table”–ები?”


  1. კარგი პოსტი!
    გადავდივართ div–ებზე, მე უკვე დიდი ხანია ვიყენებ მაგას. 🙂

    Like or Dislike: Thumb up 3 Thumb down 0 (+3)


  2. სამწუხაროდ გეპეიში div-ები არ გვასწავლეს,როცა html-ს გავდიოდით და არც ახლა პირველკურსელებს,ერთი მარტივი მიზეზის გამო,რომ თურმე სასწავლო პროგრამაში არ შედის.

    Like or Dislike: Thumb up 3 Thumb down 0 (+3)


  3. ძალიან კაი პოსტია.!

    Like or Dislike: Thumb up 3 Thumb down 0 (+3)


  4. საიტის ლეიაუთი ყოველთვის დივში უნდა იყოს table ცხრილი უჯრა ლეიაუთი ვერ იქნება …

    Like or Dislike: Thumb up 1 Thumb down 1 (0)


  5. ufro dawvrilebit am da ar aris am saitze? ise kari postia

    Like or Dislike: Thumb up 0 Thumb down 0 (0)


  6. kargi postia sg sg sg 🙂

    Like or Dislike: Thumb up 0 Thumb down 0 (0)

Leave a Reply

You must be logged in to post a comment.