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>

Резултат:

Тагът <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>

Резултат:

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

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

<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, които значително облекчават работата на разработчиците. В следваща статия ще разгледаме допълнителни възможности за форматиране на таблици.