Praneškite apie mus:


HTML Išdėliojimas - div ar table?

0

Kuriant puslapį yra susiduriama su išdėliojimo problema. Seniau, buvo populiaru, viską delioti lentelėse, tačiau dabar, kai turime kur kas tobulesnes css ir html kalbas, galime tai daryti kur kas efektyviau - su kitais elementais, tokiais kaip div.



Istorija

Seniau, kai internetinės technologijos nebuvo tiek išsivysčiusios, kaip dabar, didžioji dalis puslapių buvo daromi su lentelėmis. Pavyzdžiui reikia puslapio su dviem pusėmis, kur dedasi meniu ir kiti moduliai, o per vidurį koks straipsnis, dažniausiai būdavo kuriama lentelė su trim stulpeliais. Kairį stulpelį naudojo kaip konteinerį meniu moduliams, antrą, vidurinį, kaip konteinerį pagrindiniam atverstam puslapiui, o trečiąjį, jeigu reikia, - likusiems moduliams. Pridėjus dar vieną eilutę su sujungtais visais trim stulpeliais, gaudavo konteinerį logotipui ir visai likusiai viršutinei puslapio daliai. Tai atrodo visai neblogas sprendimas, tačiau dabar lenteles turėtume naudoti tik tada, kai jų tikrai reikia. Yra keletas pranašumų, kodėl turėtume nebenaudoti lentelių kuriant puslapio struktūrą.

 

Div ar table

Taigi, kodėl nenaudoti table, kaip žymės, skirtos išdėstymui? Pagrindiniai argumentai už div:

 

  1. Mažiau kodo - div žymei aprašyti tereikia pačios žymės <div> <div> ir truputėlio css stiliaus taisyklių, tuo tarpu table žymei reikia table, tr, td žymių + tbody, thead.. + css stiliaus taisyklių
  2. Kodas tampa švaresnis, labiau patrauklus paieškos sistemų robotams ir lengviau kraunamas
  3. Table žymėmis paremtą dizainą "krauna" ilgiau, nei su div
  4. Su div žymėmis padarytą dizainą yra daug lengviau koreguoti, keisti išdeliojimą, stilius
  5. Su div žymėmis padarytas dizainas yra kur kas lankstesnis. Pritaikius javascript kalbą galime keitinėti peršviečiamumą, leisti vartotojui keisti išdeliojimą, pasirinkti tokį stilių, kokio jis nori.

 

Argumentai už table:

 

  1. Kartais yra lengviau padaryti, tačiau tai įpratimo klausimas. Gerai išmokus valdyti div elementus, būna paprasčiau pagaminti išdėliojimą su div, nei su table žymėmis.

 

Kada naudoti žymę table?

Pačios žymės pavadinimas table - iš anglų kalbos išvertus reiškia lentelę, todėl šią žymę reikia naudoti tada, kai reikia lentelės. Pavyzdžiui tokios:


Eil.Nr. Kiti atsiskaitymai Kolokviumas Kaupiamasis balas
Svorio koeficientas 20% 30%
1 9 10 4.8
2 10 9 4.7
3 7 8 3.8
4 8 8 4

 

Lentelės kodas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<table cellspacing="0" cellpadding="0">
<tr>
<td><strong>Eil.Nr.</strong></td>
<td><strong>Kiti atsiskaitymai</strong></td>
<td><strong>Kolokviumas</strong></td>
<td><strong>Kaupiamasis balas</strong></td>
</tr>
<tr>
<td><em>Svorio koeficientas</em></td>
<td>20%</td>
<td>30%</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>9</td>
<td>10</td>
<td>4.8</td>
</tr>
<tr>
<td>2</td>
<td>10</td>
<td>9</td>
<td>4.7</td>
</tr>
<tr>
<td>3</td>
<td>7</td>
<td>8</td>
<td>3.8</td>
</tr>
<tr>
<td>4</td>
<td>8</td>
<td>8</td>
<td>4</td>
</tr>
</table>

 

Kada naudoti žymę div?

Žymė div buvo sukurta tam, kad į ją galėtume talpinti kokią nors informaciją. Ji buvo sukurta puslapio struktūros darymui. Viso puslapio išdėstymas turi būti nurodytas su div žymėmis ir css kalbos stiliais, todėl mokantis html yra būtina lygiagrečiai mokytis ir css kalbą. Paprasto puslapio išdėstymo kodas būtų toks:

 

1
2
3
4
5
6
7
<div id="centravimui">
<div id="antraste">antraste</div>
<div id="meniu">meniu</div>
<div id="kaire">kaire</div>
<div id="pagrindinis">pagrindinis</div>
<div id="apacia">apacia</div>
</div>

 

Su css kalba nurodome stilius:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
* {
border:1px solid #999;
}

#centravimui {
width:500px;
margin:0px auto;
}
#antraste {
width:100%;
height:100px;
}
#meniu {
width:100%;
height:30px;
text-align:center;
}
#kaire {
width:150px;
float:left;
   height:200px;
}
#pagrindinis {
width:340px;
float:right;
height:400px;
}
#apacia {
width:100%;
clear:both;
height:30px;
}

 

Visas kodas:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<html>
<head>
<style type="text/css">
* {
border:1px solid #999;
}
#centravimui {
width:500px;
margin:0px auto;
}
#antraste {
width:100%;
height:100px;
}
#meniu {
width:100%;
height:30px;
text-align:center;
}
#kaire {
width:150px;
float:left;
height:200px;
}
 #pagrindinis {
width:340px;
float:right;
height:400px;
}
#apacia {
width:100%;
clear:both;
height:30px;
}
</style>
</head>
<body>
<div id="centravimui">
<div id="antraste">antraste</div>
<div id="meniu">meniu</div>
<div id="kaire">kaire</div>
<div id="pagrindinis">pagrindinis</div>
<div id="apacia">apacia</div>
</div>
</body>
</html>

pabandyk_pats

Perskaityta: 7348 kartų

Lukas
Autorius: Lukas
El. paštas.: Šis el. pašto adresas yra apsaugotas nuo spam botų. Jum reikalingas įjungtas Javasctipt kad jį matytumėte
Manualai.lt tinklo autorius ir administratorius. VDU Energetikos Fizikos ir Verslo Informatikos studentas. LinkedIn
Raktažodžiai
html    pazengusiems    div   
Patinka straipsnis?
Komentarai

Komentarų nėra. Norėdami komentuoti turite prisijungti