HTML Част 10 (Таблици)

fix3d трудност:

видян: 20428

АТРИБУТИ НА ТАГА <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 колони.

Страници: «1 2

Сподели урока:

HTML Част 10 (Таблици)

Регистрирайте се, за да добавите коментар