1.4. Kesteler
HTML kesteleri qatar hám baǵanalardıń kesilisiwinen jasalǵan ketekshelerden quralǵan. Kestelerdiń keteksheleri baslama, dizim, tekst, súwret, formalardıń elementleri, hám basqa kestelerden quralǵan bolıwı múmkin. HTML-hújjetlerdegi kesteler tek ǵana informatsiyalar menen baylanıslı gruppalar ushın paydalanıw emes, jáne de tekst hám súwretlerdi bir-birine salıstırmalı bolǵan anıq bir orınlarǵa qoyıw ushın paydalanadı. Keste járdeminde betlerdiń bóleklerin bir-birine salıstırmalı dúzetiwge, súwret hám tekstti janına qoyıwdı, bezew reńlerin basqarıw, tekstlerdi baǵanalarǵa bóliwge boladı.
Kesteniń bárshe elementlerine global atributlar jáne de menshik atributlar tiyisli.
<table> elementi járdeminde kesteniń karkasın jaratıw.
Kesteni anıqlaytuǵın element <table> jup teg bolıp esaplanadı. Kesteniń bárshe elementi <table> hám </table> teginiń ishinde jaylasqan bolıw kerek.
Kesteler ádette kórinetuǵın shegarasına iye emes. Kestelerdegi shegeralar border qásiyeti járdeminde beriledi:
<table border="1"> … </table>
Border atributın házirgi waqıtta HTML5 standartında paydalanıw usınıs etilmeydi, shegaralardı basqarıw ushın arnawlı CSS atributların paydalanıwǵa usınıs etiledi. Bul haqqında CSS temasında tolıǵıraq toqtap ótemiz.
cellspacing hám cellpadding atributlar ketekshelerdiń ishki hám sırtqı shegaraları arasında bos orındı belgileydi.
Eki baǵana hám eki qatardan ibarat bolǵan kestenin kórinisi tómendegishe boladı:
<table>
<tr><th></th><th></th></tr> <!--- baslama ketekshelerden ibarat qatar jaratamız -->
<tr><td></td><td></td></tr> <!—kesteniń tiykarǵı denesinen ibarat qatar jaratamız -->
</table>
Kestede qatardı jaratıw
<tr> elementi kestege qatardı belgileydi. Kesteniń gorizantal qatarlardıń sanın <tr> …. </tr> jup tegleriniń sanı arqalı anıqlanadı.
Kestede baslama ketekshelerdi jaratıw
<th> elementi – arnawlı baslama ketekshelerdi, qalın qara shrift penen ajıratılǵan tekstli ketekshelerdi jaratadı.
Baslamanıń keteksheler sanı <th> … </th> jup tegleriniń sanı menen anıqlanadı. Bul elementlerge colspan, rowspan, headers atributları tiyisli (tómende túsintirilgen).
<table>
<tr>
<th>Baslama ketekshedegi tekst </th>
<th>Baslama ketekshedegi tekst </th>
</tr>
...
</table>
Keste denesiniń ketekshelerin jaratıw.
<td> elementi kestede magliwmatlardı ketekshe kóriniste saqlaydı hám onı keste qatarlarına qosadı. <td> …. </td> jup tegleri – qatarlarǵa mas keletuǵın tegler arasında jaylasqan bolıp, olardıń sanı kestedegi baǵanalar sanın sanın anıqlaydı. Kesteniń ketekshe juplıqlar sanı baslamadaǵı keteksheler juplıqları sanına teń bolıwı kerek.
Bul elementge colspan, rowspan, headers atributları tiyisli.
<table>
...
<tr>
<td>ketekshede qandayda bir tekst</td>
<td> ketekshede qandayda bir tekst </td>
</tr>
</table>
Esletpe:
Table, tr, td, th elementlerine tómendegishe atributlardı paydalanıwǵa boladı:
align – tekstti, suwretti gorizontal boyınsha tegislew tártibi (left|center|right)
valign – tekstti, suwretti vertical boyınsha tegislew tártibi (top|middle|bottom)
bgcolor – keste, qatar, baslama yamasa keteksheniń fondaǵı reńi
background - keste, qatar, baslama yamasa keteksheniń fondaǵı suwreti
Bul atributlardı HTML5 te paydalanıw usınıs etilmeydi, olardıń ornına tiyisli CSS atributlardı paydalanıw usınıs etiledi. Biraq ápiwayı kesteler ushın usı atributlardı qollawıńız múmkin.
Kestege imzalardı qosıw
<caption> elementi kestede imzalardı jaratadı. Qatarlardı hám ketekshelerdi táriplewine qaramastan <table> teginen keyin tuwrıdan-tuwrı qosadı.
<table>
<caption>Ónimler dizimi<caption>
<tr>
<th>№</th>
<th>Ónim atı</th>
<th>ólshem birligi</th>
<th>Sanı</th>
<th>Bir dana bahası</th>
<th>Ulıwma bahası</th>
</tr>
<tr>
<td>1.</td>
<td>Pomidor</td><td>kg</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Qıyar</td><td>kg</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
<tr>
<td colspan="5" align="right">JÁMI:</td><td>1168,80</td>
</tr>
</table>
Kesteniń qatarların hám baǵanaların toplaw
<colgroup> elementi bir túrdegi ketekshelerdiń logikasin ajratıp, baǵanalardıń strukturali toparın jaratadı. Formatlaw ushın bir neshe baǵanalardı gruppalaydı, hár bir ketekshe hám hár bir qatarlar ushın stillerdi qollawdıń ornına baǵanalarǵa stillerdi qollawǵa múmkinshilik beredi. <table> hám <caption> teglarınan keyin tuwrıdan-tuwrı qoyıladı.
<col> elementi kestelerdi uliwmalıq strukturaǵa iye bolmaǵan bóleklerge ajıratadı. Hár bir baǵanaǵa <colgroup> elementi shegarasında baǵanalardıń qásiyetlerin belgilewge imkan beredi. <style> atributı járdeminde keteksheniń fonınıń tiykarǵı reńin ózgertiwge boladı.
<col> elementi ushın span atributı bar, yaǵnıy ol baǵanalardıń sanın jámlew ushın kórsetiledi.
<table>
<colgroup>
<col span="2" style="background:Khaki"><!— bul konstruktsiya járdeminde kesteniń baslanǵısh eki baǵanasınıń fonına reńi beriledi-->
<col style="background-color:LightCyan"><!—kesteniń keying (bir) baǵanasınıń fonına reń beremiz-->
</colgroup>
<tr>
<th>№</th>
<th>Ataması</th>
<th>baha. sum</th>
</tr>
<tr>
<td>1</td>
<td>reńli qálem</td>
<td>20,00</td>
</tr>
<tr>
<td>2</td>
<td>sizǵısh 20sm</td>
<td>30,00</td>
</tr>
</table>
1.5 suwret. <col> hám <colgroup> teglerın paydalanıp kesteniń baǵanaların basqa reń menen belgilew.
Kestelerdiń bólimlerin toparlastırıw
<thead> elementi birlemshi rásmiylstiriw maqsetinde kesteniń qatarları ushın baslamalardıń toparın jaratadı. Kestelerdiń hár bir bólegin kórsetiw ushın <tbody> hám <tfoot> elementlerin qosip paydalanadı. Element tómendegi izbe-izlikte paydalanıw shárt: <table> elementine qarasli, <caption> hám <colgroup> keyin, biraq <tbody>, <tfoot> hám <tr> elementlerinen aldın. Bir kestege bir márte paydalanıwǵa boladı.
<tbody> elementi kestelerde bar bolǵan tiykarǵı maǵlıwmatlardı toparlastıradı. <thead> hám <tfoot> elementleri menen birgelikte paydalanadı. <tfoot> elementi kesteniń tómengi bóliminde jaylasqan jıyındısı hám nátiyjesi haqqında maǵlıwmatlardı kórsetiw ushın qatarlardıń toparların jaratadı. Kestede bir márte paydalanadı. <thead> teginen keyin, <tbody> hám <tr> teglerinen aldın jaylasadı.
<table border="1">
<thead>
<tr>
<th>№</th>
<th>Ataması</th>
<th>Ólshem birligi</th>
<th>Sanı</th>
<th>Bir dana bahası</th>
<th>Ulıwma bahası</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5">JÁMI:</td><td>1168,80</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Pomidor</td><td>kg</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Qıyar</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
</tbody>
</table>
1.6 suwret. <tfoot>, <tbody> elementlerin paydalanıw
Ketekshelerdi kestelerge birlestiriw
colspan hám rowspan atributları kestedegi ketekshelerdi birlestiredi. <colspan> atributı gorizontal birlesken ketekshelerdiń sanın belgileydi, al rowspan bolsa – vertical birlesken ketekshelerdiń sanın belgileydi.
<table border="1">
<tr>
<th>№</th>
<th>Ataması</th>
<th>Ólshem birligi</th>
<th>Sanı</th>
<th>Bir dana bahası</th>
<th>Ulıwma bahası</th>
</tr>
<tr>
<td>1.</td>
<td>Pomidor</td><td>kg</td><td>15,20</td><td>69,00</td><td>1048,80</td>
</tr>
<tr>
<td>2.</td>
<td>Qıyar</td><td>kg</td><td>2,50</td><td>48,00</td><td>120,00</td>
</tr>
<tr>
<td colspan="5">JÁMI:</td><td>1168,80</td><!—Gorizontal boyınsha birlesken keteksheler sanın anılaymız -->
</tr>
</table>
Joqarıda keltirilgen 1.5-súwret colspan atributı járdeminde kestelerdiń gorizontal ketekshelerin birlestiriwge mısal.
Keste elementleriniń tiykarǵı atributları
1-keste.keste elementleriniń atributları
Atribut |
Táriplew, qabıl qılatuǵın mánisi |
colspan |
Gorizontal túrde birlestiriw ushın qatardaǵı ketekshelerdiń sanı. <td colspan="3"> Múmkin bolǵan mánisi: 1 den 999 ǵa shekem sanlar. |
Headers |
Házirgi ketekshedegi maǵlıwmatlardıń baslaması haqqında maǵlıwmatlardı saqlawshı baslama ketekshelerdiń diziminiń kórsetedi. Sóylew brauzerleri ushın arnalǵan. <th id="identifikator">...</th> <th headers="identifikator">...</th> Qabıl alatuǵın mánisleri: ketekshelerdiń atları dizimi, probeller menen ajratilǵan; bul atlar id atributları arqalı ketekshelerge ózlestirilgen bolıwı shárt. |
rowspan |
Baǵanada vertikal boyınsha birlestiw ushın ketekshelerdin sanı. <td rowspan="2"> Múmkin bolǵan mánisi: 1 den 999 ǵa shekem sanlar. |
span |
Birlemshi stilldi beriw ushın birlestiretuǵın baǵanalar sanı. Ádette mánisi 1 ge teń boladı. <col span="2"> Qálegen oń pútin sanlardı ózine qabıl qıladı. |
Kestelerdi jaratıwǵa mısal
HTML belgileniwi tómendegishe:
<table border="1">
<caption>"Asiana" restoranınıń menyusı</caption>
<tr>
<th rowspan="2">Kuxnyası</th>
<th colspan="2">Salqın awqatlar</th>
<th colspan="2">Issı awqatlar</th>
<th rowspan="2">Desert</th>
</tr>
<tr>
<td>Salatlar</td>
<td>Zakuska</td>
<td>Birinshi awqatlar</td>
<td>Ekinshi awqatlar</td>
</tr>
<tr>
<td rowspan="3">Órıs</td>
<td>Vinegret</td>
<td>Salat penen til</td>
<td>Kapustalı borsh</td>
<td>Kartoshkalı bórek</td>
<td>Pal menen pisirilgen alma</td>
</tr>
<tr>
<td>Olivye</td>
<td>Xolodec</td>
<td>U’ydiń rassolı</td>
<td>Qatıqta quwırılǵan balıq</td>
<td>Pirog</td>
</tr>
<tr>
<td>”Shubalı” seld</td>
<td>Quyılǵan sudak</td>
<td>Góshli solyanka</td>
<td>”Pojarskiy” kotletalar</td>
<td>”Kartoshka” pirojniylar</td>
</tr>
<tr>
<td rowspan="3">Ispaniyalı</td>
<td>Góshli seviche</td>
<td>Empanadas</td>
<td>Chesnok penen nanlı sorpa</td>
<td>Deńiz ónimler menen paelya</td>
<td>Churros</td>
</tr>
<tr>
<td>Avokado hám tunecten timbal</td>
<td>Axotomate</td>
<td>Asturiyalı fabada</td>
<td>Shoshqalı rakso</td>
<td>Almoyshavena</td>
</tr>
<tr>
<td>Vetchina menen lobiya </td>
<td>Chanfayna</td>
<td>Balıqlı sorpa </td>
<td>Kartoshkalı tortilya </td>
<td>Bunuelos</td>
</tr>
<tr>
<td rowspan="3">Francuz</td>
<td>Vogezalı salat </td>
<td>Tawıqtan riyet </td>
<td>”Renuar” baklajanlı krem-sup</td>
<td>Ograten kartoshkası</td>
<td>Brioshi</td>
</tr>
<tr>
<td>”Panzanella” salatı</td>
<td>Sirdan delisyez </td>
<td>Qabaqlı francuz sorpa </td>
<td>Qustan gratin</td>
<td>Kiguriyalı limon pirog </td>
</tr>
<tr>
<td>Tar-tar </td>
<td>Marinovkalanǵan losos’</td>
<td>”Konti” sorpası</td>
<td>Tartiflett</td>
<td>”Triumf” savaren</td>
</tr>
</table>
