C, PHP, VB, .NET

Таблиците са често използвано средство за форматиране на HTML страници. Също така те са и едно от основните средства за постигане на ефектен дизайн. Таблиците приемат изключително класически смисъл - състоят се от редове (<tr> - table rows) и колони (<td> - table data). Самите таблици се ограждат в таг <table>. Има и специални стойности <th> - table head или "заглавни колони". Ще демонстрираме една примерна таблица и в последствие ще обясним всеки нейн елемент:

<table border="1">
<caption>Примерна таблица</caption>
<thead>
	<tr>
		<th>Заглавие на колона 1</th>
		<th>Заглавие на колона 2</th>
	</tr>
</thead>

<tfoot>
	<tr>
		<th colspan="2">Аз направих тази таблица</th>
	</tr>
</tfoot>

<tbody>
	<tr>
		<td>11</td>
		<td>21</td>
	</tr>
	<tr>
		<td>12</td>
		<td>22</td>
	</tr>
	<tr>
		<td>13</td>
		<td>23</td>
	</tr>
</tbody>
</table>

Резултат:

Примерна таблица

Заглавие на колона 1	Заглавие на колона 2
Аз направих тази таблица
11	21
12	22
13	23

Тагът <table border="1"> означава, че започваме да "строим" таблица, която ще бъде с рамка с дебелина 1. Следващия таг <caption> обозначава "заглавие" на таблицана - текст, който стои цетрално над и извън таблицата.

Тагът <thead> стартира т.нар. "заглавни редове" на таблицата. Всяка информация изписана вътре в този таг ще бъде в началото на таблицата. Вътре в <thead> ние отваряме първи ред на таблицата чрез таг <tr>. Вижате, че в първи ред изброяваме две стойности - заглавните тагове <th>. В тях изписваме като обикновен текст заглавията на колоните. Както виждате от визуализацията - заглавния текст излиза с удебелен шрифт. Обикновено го използваме за даване на наименование (заглавие) на колоните.

Следва таг <tfoot> - table footer. Всяка информация записана в този таг ще се визуализира винаги в края на таблицата. Виждате, че там също сме отворили нов ред <tr>. В него сме записали само един заглавен таг <th>, но сме му дали параметър colspan="2". Това означава, че следващата информация ще се визуализира като бъдат обединени две поредни клетки. Както виждате от резултата - текстът "Аз направих тази таблица" се визуализира в две клетки, вместо в една. Обикновено използваме <tfoot> за даване на допълнителна уточняваща информация за данните в таблицата.

Накрая в таг <tbody> се визуализира конкретното съдържание на таблицата. Виждате, че последователно сме отворили три тага <tr>, т.е. три реда в таблицата. Всеки ред съдържа по две стойности <td>, в които е записан съответен текст.

Добре е винаги да следим броя на колоните когато създаваме нов ред. В горния пример ако бяхме забравили "colspan=2" в реда от <tfoot>, то щеше да се получи следното:

<table border="1">
<caption>Примерна таблица</caption>
<thead>
	<tr>
		<th>Заглавие на колона 1</th>
		<th>Заглавие на колона 2</th>
	</tr>
</thead>

<tfoot>
	<tr>
		<th>Аз направих тази таблица</th>
	</tr>
</tfoot>

<tbody>
	<tr>
		<td>11</td>
		<td>21</td>
	</tr>
	<tr>
		<td>12</td>
		<td>22</td>
	</tr>
	<tr>
		<td>13</td>
		<td>23</td>
	</tr>
</tbody>
</table>

Резултат:

Примерна таблица

Заглавие на колона 1	Заглавие на колона 2
Аз направих тази таблица
11	21
12	22
13	23

Виждате, че като, че ли има липсваща клетка в таблицата ни. Обикновено това не е ефектът, който търсим.

Освен да обединяваме колони - можем да обединяваме и редове. Ето един пример:

<table border="1">
<tbody>
	<tr>
		<td rowspan="3">Ляво</td>
		<td>Горе</td>
		<td rowspan="3">Дясно</td>
	</tr>

	<tr>
		<td>Център</td>
	</tr>

	<tr>
		<td>Долу</td>
	</tr>
</tbody>
</table>

Резултат:

Ляво	Горе	Дясно
	Център
	Долу

Очевидно е, че с Rowspan като, че ли се работи доста по-трудно. Особено при по-големи таблици е доста трудно да се следят редовете, които са обединени. За щастие има редица визуални редактори на HTML като FrontPage и Dreamweaver, които значително облекчават работата на разработчиците. В следваща статия ще разгледаме допълнителни възможности за форматиране на таблици.