Таблици в HTML

  1.Основни тагове

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

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

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

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

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

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

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

2.Атрибути на тага <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.

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

Забележка: атрибутите "align" и "bgcolor" на тага <table> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат.

3.Атрибути на тага <tr>

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

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

bgcolor="цвят" задава цвят на фона на реда

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

Забележка: атрибута "bgcolor" на тага <tr> е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.

4.Атрибути на тага <td>

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

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

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

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

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

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

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

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

Забележка: атрибутите "bgcolor", "height" и "width на тага <td> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат. 

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