Lentelių generavimas naudojant CSS
Pasirodžius IE 8-ai versijai galime pritaikyti CSS technologijos display: table savybę, kurios pagalba galėsime kurti lenteles naudojant tik CSS. Kaip žinia, šią funkciją palaiko ir Firefox 2, Firefox 3, Opera 9, tačiau tiek IE6, tiek IE7 nepalaiko display: table.
Darbą pradėsime susikurdami html šabloną, kuriame bus lentelė su viena eilute ir trimis stulpeliais:
...
<body>
<div id="table">
<div id="tableLeft">
Kairysis turinys
</div>
<div id="tableCenter">
Centrinis turinys
</div>
<div id="tableRight">
Dešinysis turinys
</div>
</div>
</body>
...
CSS kodas atrodys šitaip:
#table {
display: table;
}
#tableLeft {
display: table-cell;
width: 200px;
background-color: #C3FF68;
padding-left: 10px;
}
#tableCenter {
display: table-cell;
width: 200px;
border-left: 1px dotted #09854D;
border-right: 1px dotted #09854D;
padding: 10px;
}
#tableRight {
display: table-cell;
width: 200px;
padding-left: 10px;
}
CSS lentelės reikšmės. Galima pastebėti, kad css reikšmės atitinka HTML žymes ir atlieką tokią pat funkciją. Skliausteliuose pateikiu atitinkamas HTML žymes:
- table - nurodo, kad bloke bus apibrėžiama lentelė. (table)
- table-row - lentelės nauja eilutė (tr)
- table-cell - lentelės naujas elementas (td)
- table-row-group - lentelės eilučių grupė (tbody)
- table-header-group - lentelės viršutinės antraštės grupė (thead)
- table-footer-group - lentelės apatinės antraštės grupė (tfoot)
- table-caption - lentelė užrašas (caption)
- table-column - lentelės stulpelis (col)
- table-column-group - lentelės stulpelių grupė (colgroup)
Sukurkime lentelę su trimis stulpeliais. HTML atrodys štai taip:
...
<body>
<div class="content">
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
</div>
</body>
...
CSS kodas:
.content {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
}
Šitaip galima sukurti ištisą lentelę:
...
<div class="content">
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
</div>
</div>
...]
Kitos lentelių parinktys:
-
table-layout — savybė nurodo algoritmą, kuris bus naudojamas išdėstyti lentelę.
{ table-layout: fixed } { table-layout: auto }
- border-collapse — jeigu reikšmė nurodoma collapse, tada lentelės laukelių kraštinės nesidubliuos. Numatytoji reikšmė separate rodo, kad lentelės laukelis neatpažįsta šalia esančio laukelio ir dubliuoja kraštines.
- border-spacing — tarpai tarp laukelių.
Taigi, pabandykime sukurti mini galeriją su trumpu paveiksliuko aprašymu. Lentelę sudarys du stulpeliai ir dvi eilutės:
...
<div class="table">
<div class="row">
<div class="cell">
<img src="anger.jpg" alt="Lorem ipsum" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="cell">
<img src="cat.jpg" alt="Phasellus velit" />
<p>Phasellus velit massa, mollis a, hendrerit id, rhoncus a, dui.</p>
</div>
</div>
<div class="row">
<div class="cell">
<img src="curious_leopard.jpg" alt="Cras sem diam" />
<p>Cras sem diam, luctus nec, mollis et, suscipit sed, diam.</p>
</div>
<div class="cell">
<img src="prairie_dog.jpg" alt="Praesent tortor eros" />
<p>raesent tortor eros, congue sit amet, blandit in, sollicitudin at, dui.</p>
</div>
</div>
</div>
...
CSS kodas:
.table {
display: table;
border-spacing: 10px;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
width: 200px;
border: 5px solid black;
background-color: black;
color: white;
vertical-align: top;
text-align: center;
}
Apibendrinimas
Kaip bebūtų gaila, tačiau jeigu kuriate svetainę plačiai auditorijai ir siekiate kuo didesnio suderinamumo su lankytojų naršyklėmis, CSS sugeneruotos lentelės nėra labai realu. Kol rinkoje lyderiaus IE 6 ir IE 7, apie tai galime pamiršti. Tačiau kaupti žinias ir žiūrėti plačiai į ateitį tikrai verta.
O kodėl turėtume naudoti būtent CSS lentelių generavimui? Kiekvienas save gerbiantis ir savo darbą mėgstantis svetainių kūrėjas stengiasi rašyti kokybišką, optimalų kodą. Kitaip sakant, jis ieško būdų, kaip gauti rezultatą paprastesniais būdais. Būtent lentelių kūrimas ir stilizavimas su CSS suteikia galimybę sukurti lankstų, optimalų kodą tolimesniems tobulinimams ir pan. Kita vertus, negalima nuvertinti ir standartinio lentelių kūrimo — juk ne visais atvejais tinka vienintelis variantas.
2008-11-16 20:18:03
Gairės:
Martyna
