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

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

АТРИБУТИ НА ТАГА <TABLE>

border=“цифрова стойност“ задава рамка на таблицата в пиксели

bordercolor=“цвят“ задава цвят на рамката

bgcolor=“цвят“ задава цвят на фона на таблицата

background=“изображение“ задава изображение като фон

align=“left, center или right“ задава позициониране на таблицата вляво, в центъра или вдясно

width=“цифрова стойност или процент“ задава дължина на таблицата в пиксели или в процент от свободното пространство

cellpadding=“цифрова стойност или процент“ задава разстоянито между съдържанието на клетката и стените и в пиксели или процент

cellspacing=“цифрова стойност или процент“ задава разстоянито в пиксели или процент между отделните клетки

frame=“една от стойностите: lhs, rhs, vsides, above, below, hsides, void, box, border“, където

lhs премахва горната, долната и дясната рамка на таблицата
rhs премахва горната, долната и лявата рамка на таблицата
vsides премахва горната и долната рамка на таблицата
above премахва страничните и долната рамка на таблицата
below премахва страничните и горната рамка на таблицата
hsides премахва страничните рамки на таблицата
void премахва външните рамки на таблицата
box и border показват всички рамки (същия ефект е по подразбиране)

За да се ползва трибута frame трябва на атрибута border  да е зададена стойност различна от 0.

ПРИМЕР:

<table width=“300″ border=“1″ frame=“void“ cellspacing=“0″ cellpadding=“3″>
<tr align=“center“>
<td><a href=““>Линк 1</a></td>
<td><a href=““>Линк 2</a></td>
<td><a href=““>Линк 3</a></td>
</tr>
<tr align=“center“>
<td><a href=““>Линк 4</a></td>
<td><a href=““>Линк 5</a></td>
<td><a href=““>Линк 6</a></td>
</tr>
</table>

В горния пример е създадена таблица без външни рамки чрез използване на стойността void в атрибута frame. Таблицата ще има следния вид:

Забележка: атрибутите „align“ и „bgcolor“ на тага <table> са извадени от стандартите на езика и не се поддържа от XHTML 1.0 Strict DTD, макар че браузърите ще продължат да ги поддържат. За да се дефинира позицията и цвета на фона на таблицата трябва да се използва CSS (Cascading Style Sheets).

АТРИБУТИ НА ТАГА <TR>

align=“left, center или right“ позиционира съдържанието на колона вляво, в центъра или вдясно

valign=“top, middle или bottom“ позиционира съдържанието на колона горе, в средата или долу

bgcolor=“цвят“ задава цвят на фона на колоната

bordercolor=“цвят“ задава цвят на рамката (задължително е в такъв случай стойността border на таблицата да бъде различна от 0)

Забележка: атрибута „bgcolor“ на тага <tr> е изваден от стандартите на езика и не се поддържа от XHTML 1.0 Strict DTD, макар че браузърите ще продължат да го поддържат. За да се дефинира цвета на фона на колоната трябва да се използва CSS (Cascading Style Sheets).

АТРИБУТИ НА ТАГА <TD>

align=“left, center или right“ позиционира съдържанието на колона вляво, в центъра или вдясно

valign=“top, middle или bottom“ позиционира съдържанието на колона горе, в средата или долу

bgcolor=“цвят“ задава цвят на фона на колоната

background=“изображение“ задава изображение като фон на клетката

colspan=“цифрова стойност“ определя колко колони обхваща една клетка

rowspan=“цифрова стойност“ определя колко реда обхваща една клетка

width=“цифрова стойност или процент“ задава ширина на клетката в пиксели или процент от възможното пространство

height=“цифрова стойност“ задава височина на клетката в пиксели

Забележка: атрибутите „bgcolor“, „height“ и „width на тага <td> са извадени от стандартите на езика и не се поддържа от XHTML 1.0 Strict DTD, макар че браузърите ще продължат да ги поддържат. За да се дефинира дължината, височината и цвета на фона на клетката трябва да се използва CSS (Cascading Style Sheets).

ПРИМЕР:

<table align=“center“ border=“1″ bgcolor=“#ffff00″ width=“80%“ height=“300″ cellspacing=“2″ cellpadding=“2″>
<tr>
<td rowspan=“3″>Лява колона, обединяваща 3 реда</td>
<td colspan=“3″>Горен ред, обединяващ 3 колони</td>
<td rowspan=“3″>Дясна колона, обединяваща 3 реда</td>
</tr>
<tr align=“center“>
<td> 1-ва колона</td>
<td> 2-ра колона</td>
<td> 3-та колона</td>
</tr>
<tr>
<td colspan=“3″> Долен ред, обединяваш 3 колони</td>
</tr>
</table>

Изглед на таблицата от примера:

Горния пример е за таблица центрирана в браузера, с ширина 80%, височина 300 пиксела, с рамка 1 пиксел, жълт фон, разстояние от съдържанието до рамката 2 пиксела, разстояние между клетките 2 пиксела, с 2 странични колони, обхващащи по 3 реда и по един горен и долен ред, обхващащи по 3 колони.