Лекция 3. Кестелерді жасау

Кестелерді бейнелеу үшін HTML тегтерінің бірнеше түрі қолданылады:

Кесте:<TABLE>...</TABLE> - кестені сипаттайтын негізгі тег. Кестенің барлық элементтері осы тегтің арасында орналасады.

Кесте қатары: <TR>...</TR> - кестедегі жол саны <TR>..</TR> жұптық тегтердің қайталану санымен байланысты. Жолдың кестеде орналасу жағдайына байланысты ALIGN және VALIGN деген атрибуттары болады.

Кесте ұяшықтары: <TD>...</TD> - кестедегі ұяшықтарды белгілейді,ол жолдың ішінде жазылады. Егер жолда кейбір бағандар үшін ұяшықтар жоқ болса, браузер оны бос ұяшық етіп көрсетеді. Ұяшық ішіндегі деректердің орналасуы ағымдағы жағдайда ALIGN=left және VALIGN=middle атрубуттарымен сипатталады. Тегтерді жазу барысында ол жағдайды өзгертуге болады.

Кесте тақырыбы: <TH>...</TH> - тақырып ұяшығы бүкіл кестенің енін көрсетеді, бұл ұяшықтағы текст ағымдағы жағдайда ALIGN=center атрибутына ие.

Кесте аты: <CAPTION>...</CAPTION> - бұл тег кесте атын көрсетеді. <CAPTION> тегі <TABLE>...</TABLE> тегтерінің арасында жазылады, бірақ міндетті түрде жол және ұяшық тегтерінің алдында жазылуы тиіс. Тақырыпқа ALIGN атрибутын қолдануға болады, ол кестеде орналасуын анықтайды:

TOP - тақырып кестенің жоғарғы жағының ортасына жазылады.
LEFT - тақырып кестенің жоғарғы жағының сол жақ шетіне жазылады.
RIGHT - тақырып кестенің жоғарғы жағының оң жақ шетіне жазылады.
BOTTOM -тақырып кестенің төменгі жағының ортасына жазылады.

Қарапайым кесте жасап көрейік:

<table > <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td>1984</td></tr> </table>

Мұнда кесте шекарасының сызығы көрсетілмеген,кесте шекарасын көрсету және басқа да өлшемдерін беру үшін мынадай тегтер қолданады:

BORDER- егер бұл атрибут бар болса кестеген және оның ұяшықтарына шекаралық сызық сызылады. Сондай-ақ, оған мән беріп шекара енін беруге болады, мысалы BORDER=3.

CELLPADDING - ұяшық ішіне бос кеңістік қосады. Оның мәні пикселмен беріледі және ол ұяшықтың ені және ұзындығы бойынша іске асырылады.

CELLSPACING – ұяшықтар арасына бос кеңістік қалдырады, мұның да мәнін пикселмен береміз.

WIDTH - бұл тег арқылы кесте енінің ұзындығын беруге болад. Оның мәні пиксельмен (WIDTH=400) немесе немесе браузер терезесінің ұзындығына байланысты пайыздық мәнмен (мысалы, WIDTH=80%) беріледі.

Мысалдар:

· сellpadding тегін қолдану

<table border="1" cellpadding="20"> <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td>1984</td></tr> </table>

<table border="1" cellspacing="20"> <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td>1984</td></tr> </table>

· cellspacing тегін қолдану

· width тегін қолдану

<table border="1" width="80%"> <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td>1984</td></tr> </table>

· Барлық атрибуттарды қолддану

<html> <head> <title>Кесте жасау</title> </head> <body> <table border="1" cellpadding="5" cellspacing="5" width="80%"> <CAPTION ALIGN=top> Кесте 1 </CAPTION> <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td>1984</td></tr> </table> </body> </html>

Ұяшық ішіндегі текстерді түзету

Қалыпты жағдайдаth тақырыпшасы ұяшық ортасында жазылса, ал td-ғы деректер сол жағында жазылады.Төмендегі тегтер арқылы текстерге түзету жүргізуге болады:

ALIGN – атрибуты <tr> қатарындағы барлық ұяшықтардағы текстерді түзету мүмкіндігін береді.Ол деректердің ұяшық ішінде көлденең орналасуы бойынша түзету жүргізеді. Ол мынадай мәндерді қабылдайды: left (сол жақ), right (оң жақ) немесе center (ортасы).

VALIGN – атрибуты ұяшық ішіндегі деректерді тігінен орналасуы бойынша түзетеді. Оның мәндері: top (жоғары), bottom (төмен), middle (ортасы) и baseline (жолдың барлық ұяшықтары жоғарыға қарай қысылған)

<table border="1" cellpadding="5" cellspacing="5" width="80%"> <CAPTION ALIGN=top> Кесте 1 </CAPTION> <tr><th>Аты</th> <th>Жылы </th></tr> <tr align="center"><td>Марат</td><td>1983</td></tr> <tr align="center"><td>Айгул</td><td>1984</td></tr> </table>

Бос ұяшықтар

Егер тегтерді жазу барысында кейбір ұяшықтар бос қалып кетсе (1-жағдай) оның нәтижесі 1-суреттегідегідей болады. Ондай түрдегі бос ұяшықтың алдын алу үшін  (бос орын ) тегін қолданамыз(2-жағдай).

1-жағдай <table border="1" cellpadding="20"> <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td></td></tr> </table>

2-жағдай <table border="1" cellpadding="20"> <tr><th>Аты</th> <th>Жылы </th></tr> <tr><td>Марат</td><td>1983</td></tr> <tr><td>Айгул</td><td> </td></tr> </table>

1-сурет 2-сурет

Бірнеше бағандарды немесе жолдарды біріктіретін ұяшықтар

Кейде кесте сызу барысында бірнеше бағандар немесе жолдар біріктіріліп, онда деректер жазылатын жағдайлар кездеседі.Ол үшін мынадай тегтер қолданады:

COLSPAN – көрсетілген ұяшық үшін көлденең бағытта қанша ұяшық біріктірілетіні көрсетіледі.

ROWSPAN - көрсетілген ұяшық үшін тік бағытта қанша ұяшық біріктірілетіні көрсетіледі.

COLSPAN –тегін қолдану <table border="1" > <tr align="center"> <td colspan="2"> 1x1 </td> <td > 1x2 </td></tr> <tr align="center"> <td > 2x1</td> <td > 2x2</td> <td > 2x3 </td></tr> </table>
ROWSPAN –тегін қолдану <table border="1" > <tr align="center"> <td > 1x1 </td> <td > 1x2 </td> <td rowspan="2"> 1x3 </td></tr> <tr align="center"> <td > 2x1</td> <td > 2x2</td></tr> </table>
Екеуін бірге қолдану <table border="1" > <tr align="center"> <td colspan="2" > 1x1 </td> <td rowspan="2"> 1x2 </td> </tr> <tr align="center"> <td > 2x1</td> <td > 2x2</td> </tr> </table>

NOWRAP

Данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.