1.Основни тагове
Таблиците в HTML-документа са разположени между двата основни тага <table> и </table>.
Между тези два тага се изписват:- таговете за табличен ред - <tr> и </tr>
- таговете за таблична клетка, чрез които се оформят редовете и колоните - <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>
-таг за заглавие на таблицата - <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>
- таговете <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>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.
ПРИМЕР:
<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, макар че браузърите ще продължат да ги поддържат.
Между тези два тага се изписват:- таговете за табличен ред - <tr> и </tr>
- таговете за таблична клетка, чрез които се оформят редовете и колоните - <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>
-таг за заглавие на таблицата - <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>
- таговете <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>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.
ПРИМЕР:
<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, макар че браузърите ще продължат да ги поддържат.
3.Атрибути на тага <tr>
align="left, center или right" позиционира съдържанието на реда вляво, в центъра или вдясно
valign="top, middle или bottom" позиционира съдържанието на реда горе, в средата или долу
bgcolor="цвят" задава цвят на фона на реда
bordercolor="цвят" задава цвят на рамката (задължително е в такъв случай стойността border на таблицата да бъде различна от 0)
Забележка: атрибута "bgcolor" на тага <tr> е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.
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 колони.
Хоризонтални и вертикални линии
1.Тагът за хоризонтални линии е <hr>. Той няма затварящ таг и затова според изискванията в XHTML трябва да се изписва <hr />.
В HTML не съществува таг за вертикални линии. Вертикална линия може да се направи или във вид на графичен файл или чрез колона от таблица, например по следния начин:
<table width="290" bgcolor="#f0f0f0" border="0" cellpadding="0" cellspacing="3">
<tr valign="top">
<td width="135">
Това е пример за изграждане на вертикална линия чрез превръщане на колона от таблица във вертикална линия.
<td width="5" bgcolor="#000000"> <!—Тази колона е фактически вертикалната линия -->
</td>
Ще се вижда вертикална линия, която всъщност е колона от настоящата таблица със зададен черен фон и дебелина 5 пиксела.Когато се използва без никакви атрибури тага <hr /> изобразява по подразбиране 3-измерна линия със сянка, заемаща цялата дължина на страницата или таблицата в която е изписан тага.2.Атрибути на <hr />
1. width="цифрова стойност" задава дължина на линията в пиксели или проценти
2. align="left, right или center" задава разположение на линията вляво, вдясно или в центъра
3. size="цифрова стойност" задава дебелина на линията в пиксели
4. color="цвят" задава цвят на линията
5. noshade="noshade" премахва сянката на линията
ПРИМЕР:
<hr width="200" size="5" color="#ff0000">
В примера линията е с дължина 200 пиксела, с дебелина 5 пиксела и червен цвят:
В HTML не съществува таг за вертикални линии. Вертикална линия може да се направи или във вид на графичен файл или чрез колона от таблица, например по следния начин:
<table width="290" bgcolor="#f0f0f0" border="0" cellpadding="0" cellspacing="3">
<tr valign="top">
<td width="135">
Това е пример за изграждане на вертикална линия чрез превръщане на колона от таблица във вертикална линия.
<td width="5" bgcolor="#000000"> <!—Тази колона е фактически вертикалната линия -->
</td>
Ще се вижда вертикална линия, която всъщност е колона от настоящата таблица със зададен черен фон и дебелина 5 пиксела.Когато се използва без никакви атрибури тага <hr /> изобразява по подразбиране 3-измерна линия със сянка, заемаща цялата дължина на страницата или таблицата в която е изписан тага.2.Атрибути на <hr />
1. width="цифрова стойност" задава дължина на линията в пиксели или проценти
2. align="left, right или center" задава разположение на линията вляво, вдясно или в центъра
3. size="цифрова стойност" задава дебелина на линията в пиксели
4. color="цвят" задава цвят на линията
5. noshade="noshade" премахва сянката на линията
ПРИМЕР:
<hr width="200" size="5" color="#ff0000">
В примера линията е с дължина 200 пиксела, с дебелина 5 пиксела и червен цвят:
