Лекция · 4.3

HTML кестелерін құру

Сабақ кестесін, бағаны, өнім тізімін веб-бетте қалай көрсетуге болады? Тізім тегтерінің өзі жеткіліксіз — деректі жол мен баған түрінде реттеу керек. Бүгін HTML кестелерін — олардың құрылымын, безендіру атрибуттарын және ұяшықтарды біріктіруді үйренеміз.

Кестенің негізгі тегтері

HTML кестесі бес негізгі тегтен тұрады, олар «матрёшка» сияқты бір-бірінің ішінде орналасады:

ТегҚызметі
<table>Кестенің өзі (сыртқы контейнер)
<caption>Кестенің тақырыбы (бір рет қана)
<tr>Бір ҚАТАР (table row)
<th>Тақырып ұяшығы (қалың қаріп, ортаға тураланған)
<td>Әдеттегі деректер ұяшығы (table data)
Есеп (оңай): жиексіз және жиекті кесте

Берілді: Аты мен тегінен тұратын деректер.

<h3>Zhiyeksiz keste</h3>
<table>
    <tr><th>Aty</th><th>Tegi</th></tr>
    <tr><td>Ainur</td><td>Isaeva</td></tr>
</table>

<h3>Zhiyekti keste</h3>
<table border="1">
    <tr><th>Aty</th><th>Tegi</th></tr>
    <tr><td>Ainur</td><td>Isaeva</td></tr>
</table>

Түсіндірме: border атрибуты көрсетілмесе (немесе 0 болса), кесте жиегі КӨРІНБЕЙДІ.

Кесте атрибуттары
АтрибутҚызметі
alignМәтінді КӨЛДЕНЕҢІНЕН туралау (left/center/right)
valignМазмұнды ТІГІНЕН туралау (top/bottom/baseline)
bgcolorФон түсі
border="n"Кесте жиегінің қалыңдығы (пиксельмен)
cellpadding="n"Мазмұн мен жиек арасындағы аралық
cellspacing="n"Ұяшықтар арасындағы аралық

Кестенің тақырыбын <caption> тегі белгілейді, ол <table>-дан кейін бірден жазылады. align атрибуты арқылы оны кестенің қай жағына (left/center/right, top/bottom) орналастыруға болады.

Ұяшықтарды біріктіру

Кейде кестенің бір ұяшығы бірнеше жол немесе баған орнын алуы керек — мыс. жалпы тақырып бірнеше баған үстінде тұруы үшін. Мұны екі арнайы атрибут шешеді:

Атрибут
rowspan="n" — n қатардағы ұяшықтарды ТІГІНЕН біріктіреді. colspan="n" — n бағандағы ұяшықтарды КӨЛДЕНЕҢІНЕН біріктіреді.
Есеп (орта): ұяшықтарды біріктіру

Берілді: «Күзен» жануары туралы кесте — жалпы тақырып жолы (2 баған біріктірілген), содан кейін салмағы/өлшемі бағандары.

<table border="1">
    <tr align="center">
        <td rowspan="2"></td>
        <td colspan="2">Kuzen</td>
    </tr>
    <tr>
        <td>salmagy</td><td>olshemi</td>
    </tr>
    <tr align="center">
        <td>atalyqtar</td>
        <td>1.2-2.5 kg</td><td>70 sm</td>
    </tr>
</table>

Түсіндірме: бірінші <td rowspan="2"> — екі жол бойы бос орын қалдырады; colspan="2" — «Kuzen» жазуын екі баған орнына жазады.

Кестенің ұяшығын толығымен түспен «толтыру» керек болса, ұяшықты БОС қалдырмау керек — оның орнына арнайы бос орын символы қолданылады: &nbsp;.

<tr><td>CYAN</td><td bgcolor="cyan">&nbsp;</td></tr>
🎯 ҰБТ байланысы
Кесте тегтерінің иерархиясы мен colspan/rowspan айырмашылығы жиі тексеріледі.
1
<th> — тақырып ұяшығы, <td> — әдеттегі дерек ұяшығы, шатастырмау.
2
rowspan — ТІГІНЕН (жолдар), colspan — КӨЛДЕНЕҢІНЕН (бағандар) біріктіреді.
3
border="0" немесе көрсетілмесе — кесте жиегі көрінбейді.
Сабақ қорытындысы
  • Кесте құрылымы: <table> → <tr> (қатар) → <th>/<td> (ұяшық).
  • border, bgcolor, cellpadding, cellspacing — кестені безендіру атрибуттары.
  • rowspan (тігінен) және colspan (көлденеңінен) — ұяшықтарды біріктіру құралдары.
  • &nbsp; — бос ұяшықты толтыратын арнайы HTML символы.