Таблици

Таблиците са важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа.

Таблиците в HTML-документа са разположени между двата основни тага <table> и </table>.

Между тези два тага се изписват:

1. таговете за табличен ред - <tr> и </tr>
2. таговете за таблична клетка, чрез които се оформят редовете и колоните - <td> и </td>

За да има таблицата видими очертания трябва в тага table да се добави атрибута border и да му се зададе някаква стойност, например 1.

ПРИМЕР за таблица с 1 колона и 3 реда:

<table border="1">
<tr>
<td>1-ви ред, 1-ва колона</td>
</tr>
<tr>
<td>2-ри ред, 1-ва колона</td>
</tr>
<tr>
<td>3-ти ред, 1-ва колона</td>
</tr>
</table>


Ефекта в браузъра е следния:


ПРИМЕР за таблица с 1 ред и 3 колони:

<table border="1">
<tr>
<td>1-ви ред, 1-ва колона</td>
<td>1-ви ред, 2-ра колона</td>
<td>1-ви ред, 3-та колона</td>
</tr>
</table>


Ефекта в браузъра е следния:


ПРИМЕР за таблица с 2 реда и 2 колони:

<table border="1">
<tr>
<td>1-ви ред, 1-ва колона </td>
<td>1-ви ред, 2-ра колона </td>
</tr>
<tr>
<td>2-ри ред, 1-ва колона </td>
<td>2-ри ред, 2-ра колона </td>
</tr>
</table>

В прозореца на браузъра този код ще изглежда така:




ДРУГИ ТАГОВЕ, КОИТО СЕ ПОЛЗВАТ В ТАБЛИЦИТЕ

1. Чрез тага <th> </th> се задава заглавие на таблицата. Всеки текст разположен между таговете <th> и </th> се показва в центъра на клетката и удебелен.

ПРИМЕР:

<table border="1">
<tr>
<th>Заглавие 1</th>
<th>Заглавие 2</th>
</tr>
<tr>
<td>1-ви ред, 1-ва колона</td>
<td>1-ви ред, 2-ра колона</td>
</tr>
<tr>
<td>2-ри ред, 1-ва колона</td>
<td>2-ри ред, 2-ра колона</td>
</tr>
</table>

В браузера ефекта ще е следния:



2. Таговете <thead> </thead>, <tfoot> </tfoot> и
<tbody> </tbody> позволяват групиране на редовете на таблицата.

Една таблица може да съдържа горна част (head), долна част (foot) и средна част или "тяло" (body). Ако в тялото (средната част) на таблицата е поместена много информация, уеб-дизайнера ще "загуби от поглед" горната и долната част на таблицата. За удобство и прегледност в текстовия редактор, където се пише HTML-кода, чрез таговете <thead>, <tfoot> и <tbody> горната и долната част на таблицата могат да се групират непосредствено една под друга, а "тялото", т.е. средната част на таблицата да се изпише най-отдолу. В браузъра горната част на таблицата ще се показва най-горе, средната част - по средата и долната част - най-долу.

ПРИМЕР:

<table border="1">
<thead>
<tr>
<td>Горна част на таблицата, която се изписва горе</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Долна част на таблицата, която се изписва по средата</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Средна част на таблицата, която се изписва долу</td>
</tr>
</tbody>
</table>


Ефекта от горния код е следния: