Табличките са доста сложни структури, които са съставени от редове и колони. Външната основа на таблиците винаги се състои от елемента table.
<table> … </table>
В рамките на този елемент се извършва истинското дефиниране на таблицата. Когато създавате таблица в HTML, е добре да й зададете рамка, за да можете по-лесно да проследите как точно са подредени редовете и колоните. За целта задавате атрибутната стойност border="1" на въведения елемент <table>. (Имайте предвид, че атрибута border в HTML не трябва да се използва. Вместо това трябва да се ползват съответните CSS свойства. За тях обаче повече по-късно).
<table border="1"> … </table>
Сега продължаваме с дефинирането на редовете в таблицата. Това се извършва чрез елемента tr.
<table border="1"> <tr></tr> </table>
Но това все още не води до желания изход. Следващото стъпка е да дефинирате колоните. Отново това става чрез елемента td.
<table border="1">
<tr>
<td></td>
</tr>
</table>Сега можете да дефинирате първото съдържание на таблицата. Това се прави между <td> и </td>.
<table border="1">
<tr>
<td>Съдържание 1</td>
</tr>
</table>
Сега е време да погледнете резултата в браузъра.
Досега таблцата вие само се състои от една клетка. Сега можете да добавите още една колона. Това става отново чрез елемента td. Внимавайте да го дефинирате в рамките на елемента tr.
<table border="1">
<tr>
<td>Съдържание 1</td>
<td>Съдържание 2</td>
</tr>
</table>
Тук отново погледнете резултата в браузъра.
За да добавите допълнителни редове към таблицата, просто създайте още един елемент tr, в който отново да се дефинират желаните елементи td.
Ето и един пример:
<table border="1">
<tr>
<td>Съдържание 1</td>
<td>Съдържание 2</td>
</tr>
<tr>
<td>Съдържание 3</td>
<td>Съдържание 4</td>
</tr>
</table>
Погледнете резултата в браузъра и ще видите следното:
Така можете да създадете разгледни таблички.
Дефиниране на заглавие, тяло и краен крак
Таблиците могат да се разделят на логически части - заглавна, една или няколко стойности и краен крак. Следният пример показва как може да изглежда нещо подобно:
<table border="1">
<thead>
<tr>
<th>Заминаване</th>
<th>Пристигане</th>
<th>Перон</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Берлин</td>
<td>Стралзунд</td>
<td>5</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Берлин</td>
<td>Хамбург</td>
<td>1</td>
</tr>
<tr>
<td>Мюнхен</td>
<td>Берлин</td>
<td>3</td>
</tr>
</tbody>
</table>И ето как изглежда резултатът в браузъра:
Разделението на тези области не довежда до определен визуален ефект. Разбира се, възниква въпрос: защо трябва да си правим труда да дефинираме тези области? Има две добри причини за това:
• Чрез CSS можем да форматираме различно областите.
• Браузърите могат да повтарят заглавната и долната част на табличката на всяка страница при печатане на дълги таблички.
Заглавната част на таблицата се задава с thead. Следват редовете на таблицата, които принадлежат към заглавната част. Не забравяйте да затворите заглавната част с </thead>.
Ако желаете таблицата да има долна част, тя трябва да бъде дефинирания преди тялото на таблицата. Долната част се въвежда с <tfoot>. След това може да последват един или няколко реда, които принадлежат към долната част. Затворете края на таблицата с </tfoot>.
Същинското тяло на таблицата се дефинира в рамките на елемента tbody. Този елемент tbody може да се повтаря. Тялото на таблицата се затваря с </tbody>.
Защо например да използваме повече от един tbody в таблица? Един добър пример би могло да бъде таблицата на Бундеслигата по футбол. В такава таблица обикновено има няколко области.
• Шампион
• Участници в Шампионска лига
• Квалификация за Шампионска лига
• Участници в Лига Европа
• Сивата зона
• Място за отпадане
• Отпадащи
Всяка от тези области може да се пакетира в собствен елемент tbody и след това да се форматира по различен начин чрез CSS.
Задаване на предварителни стойности за колоните
Как таблицата ще бъде показана от браузърите зависи главно от наличните редове и колони. Процесът на показване на таблица обаче не е съвсем лесен за браузъра. Всъщност браузърът винаги трябва първо да прочете цялата таблица, преди да я покаже. Именно това може да отнеме известно време, особено при много обширни таблици. Този проблем може да се преодолее, като се каже директно на браузъра от колко колони всъщност се състои таблицата.
<table>
<colgroup span="2"></colgroup>
<tr>
<th>ISBN</th>
<th>Заглавие</th>
<th>Цена</th>
</tr>
<tr>
<td>23223423434</td>
<td>Кратка история на почти всичко</td>
<td>29,95 евро</td>
</tr>
</table>
Чрез colgroup се въвежда предварителната дефиниция на колоните. Имайте предвид, че повечето от атрибутите, налични в по-ранни версии на HTML за colgroup, вече не са разрешени в HTML5. Разрешен е само атрибутът span. Този атрибут очаква като стойност числото на колоните, които са включени в таблицата.
Елементът colgroup се намира директно зад откриващия таг <table>. Самите колони се дефинират чрез отделните елементи col.
При използване на colgroup имате основно две възможности:
• С атрибута span
• Без атрибута span
Ако не използвате атрибута span, за всяка колона, през която трябва да се разпростира групата от колони, в рамките на елемента colgroup се дефинира отделен елемент col. Обърнете внимание, че col е самостоятелен елемент.
<table>
<colgroup>
<col />
<col />
</colgroup>
<tr>
<th>ISBN</th>
<th>Заглавие</th>
<th>Цена</th>
</tr>
<tr>
<td>23223423434</td>
<td>Кратка история на почти всичко</td>
<td>29,95 евро</td>
</tr>
</table>
Има и хибридна форма.
<table> <colgroup> <col> </colgroup> <colgroup span="2"></colgroup> …
Това е удобно, когато една колона трябва да бъде предварително дефинирана отделно, но другите трябва да бъдат събрани в група.
