Таблиците са важен инструмент при създаването на една уеб-страница. Често цялата страница е разположена в таблица, чиито редове и колони оформят различните части на HTML-документа.
1. Основни тагове
Таблиците в 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>
В прозореца на браузъра този код ще изглежда така:
2. Други тагове, които се ползват в таблиците
А. Чрез тага <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>
Ефекта от горния код е следния:
3.Атрибути на тага <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. таговете за табличен ред - <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>
В прозореца на браузъра този код ще изглежда така:
2. Други тагове, които се ползват в таблиците
А. Чрез тага <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>
Ефекта от горния код е следния:
3.Атрибути на тага <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, макар че браузърите ще продължат да ги поддържат.
4.Атрибути на тага <tr>
align="left, center или right" позиционира съдържанието на реда вляво, в центъра или вдясно
valign="top, middle или bottom" позиционира съдържанието на реда горе, в средата или долу
bgcolor="цвят" задава цвят на фона на реда
bordercolor="цвят" задава цвят на рамката (задължително е в такъв случай стойността border на таблицата да бъде различна от 0)
Забележка: атрибута "bgcolor" на тага <tr> е изваден от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да го поддържат.
5.Атрибути на тага <td>
align="left, center или right" позиционира съдържанието на колона вляво, в центъра или вдясно
valign="top, middle или bottom" позиционира съдържанието на колона горе, в средата или долу
bgcolor="цвят" задава цвят на фона на колоната
background="изображение" задава изображение като фон на клетката
colspan="цифрова стойност" определя колко колони обхваща една клетка
rowspan="цифрова стойност" определя колко реда обхваща една клетка
width="цифрова стойност или процент" задава ширина на клетката в пиксели или процент от възможното пространство
height="цифрова стойност" задава височина на клетката в пиксели
Забележка: атрибутите "bgcolor", "height" и "width на тага <td> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат. ПРИМЕР:
<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 колони.
align="left, center или right" позиционира съдържанието на колона вляво, в центъра или вдясно
valign="top, middle или bottom" позиционира съдържанието на колона горе, в средата или долу
bgcolor="цвят" задава цвят на фона на колоната
background="изображение" задава изображение като фон на клетката
colspan="цифрова стойност" определя колко колони обхваща една клетка
rowspan="цифрова стойност" определя колко реда обхваща една клетка
width="цифрова стойност или процент" задава ширина на клетката в пиксели или процент от възможното пространство
height="цифрова стойност" задава височина на клетката в пиксели
Забележка: атрибутите "bgcolor", "height" и "width на тага <td> са извадени от стандартите на езика и не се поддържа от XHTML, макар че браузърите ще продължат да ги поддържат. ПРИМЕР:
<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 колони.
Хоризонтални и вертикални линии
Тагът за хоризонтални линии е <hr>. Той няма затварящ таг и затова според изискванията в XHTML трябва да се изписва <hr />.
В HTML не съществува таг за вертикални линии. Вертикална линия може да се направи или във вид на графичен файл или чрез колона от таблица, например по следния начин:
<table width="290" bgcolor="#f0f0f0" border="0" cellpadding="0" cellspacing="3">
<tr valign="top">
<td width="135">
Това е пример за изграждане на вертикална линия чрез превръщане на колона от таблица във вертикална линия.
</td>
<td width="5" bgcolor="#000000"> <!—Тази колона е фактически вертикалната линия -->
</td>
<td>
<====Тук отляво се вижда вертикална линия, която всъщност е колона от настоящата таблица със зададен черен фон и дебелина 5 пиксела.
</td>
</tr>
</table>
Ефекта от горния код ще бъде следния:
Когато се използва без никакви атрибури тага <hr /> изобразява по подразбиране 3-измерна линия със сянка, заемаща цялата дължина на страницата или таблицата в която е изписан тага.
Атрибутите на <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 документ:
<!DOCTYPE html>
<html>
<head>
<title>ТАБЛИЦИ</title>
</head>
<body>
<table align="center" border="2" bgcolor="#ff0000" width="900" height="600" cellspacing="3" cellpadding="10">
<tr>
<td colspan="6" width="300" height="40" bgcolor="blue" align="center" > <b>ФАКТУРА</b></td>
<tr>
<td width="300" height="20" align="center"> <b>Фирма</b></td>
<td rowspan="4" ></td>
<td rowspan="4" ></td>
<td rowspan="2" colspan="3"></td>
</tr>
<tr>
<td width="300" height="100"><center><b>ET "Иван Иванов"</b></center></td>
</tr>
<tr>
<td width="300" height="20" align="center">Адрес</td>
<td rowspan="2" colspan="3"></td>
</tr>
<tr>
<td width="300" height="100"> </td>
</tr>
<tr>
<td colspan="4" rowspan="2"width="300" valign="middle">
<ol>
<li>Moнитори</li>
<li>Клавиатури</li>
<li>Безжични мишки</li>
</ol>
</td>
<td width="100" height="20"><b>Брой</b></td>
<td width="100" height="20"><b>Цени</b></td>
</tr>
<tr>
<td valign="top" ><table cellpadding="30"><tr><td valign="middle"> <b>234 456 678</b></td></tr></table> </td>
<td></td>
</tr>
<tr>
<td colspan="4">
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">
<td></td>
<td></td>
</tr>
<tr>
<td height="20" ><b>МОЛ </b></td>
<td height="20" ><b>Име </b></td>
<td height="20"><b>Подпис</b></td>
<td height="20"><b>Общо</b></td>
<td colspan="2"></td>
</tr>
<td colspan="2"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<tr>
</table>
</body>
</html>
В HTML не съществува таг за вертикални линии. Вертикална линия може да се направи или във вид на графичен файл или чрез колона от таблица, например по следния начин:
<table width="290" bgcolor="#f0f0f0" border="0" cellpadding="0" cellspacing="3">
<tr valign="top">
<td width="135">
Това е пример за изграждане на вертикална линия чрез превръщане на колона от таблица във вертикална линия.
</td>
<td width="5" bgcolor="#000000"> <!—Тази колона е фактически вертикалната линия -->
</td>
<td>
<====Тук отляво се вижда вертикална линия, която всъщност е колона от настоящата таблица със зададен черен фон и дебелина 5 пиксела.
</td>
</tr>
</table>
Ефекта от горния код ще бъде следния:
Когато се използва без никакви атрибури тага <hr /> изобразява по подразбиране 3-измерна линия със сянка, заемаща цялата дължина на страницата или таблицата в която е изписан тага.
Атрибутите на <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 документ:
<!DOCTYPE html>
<html>
<head>
<title>ТАБЛИЦИ</title>
</head>
<body>
<table align="center" border="2" bgcolor="#ff0000" width="900" height="600" cellspacing="3" cellpadding="10">
<tr>
<td colspan="6" width="300" height="40" bgcolor="blue" align="center" > <b>ФАКТУРА</b></td>
<tr>
<td width="300" height="20" align="center"> <b>Фирма</b></td>
<td rowspan="4" ></td>
<td rowspan="4" ></td>
<td rowspan="2" colspan="3"></td>
</tr>
<tr>
<td width="300" height="100"><center><b>ET "Иван Иванов"</b></center></td>
</tr>
<tr>
<td width="300" height="20" align="center">Адрес</td>
<td rowspan="2" colspan="3"></td>
</tr>
<tr>
<td width="300" height="100"> </td>
</tr>
<tr>
<td colspan="4" rowspan="2"width="300" valign="middle">
<ol>
<li>Moнитори</li>
<li>Клавиатури</li>
<li>Безжични мишки</li>
</ol>
</td>
<td width="100" height="20"><b>Брой</b></td>
<td width="100" height="20"><b>Цени</b></td>
</tr>
<tr>
<td valign="top" ><table cellpadding="30"><tr><td valign="middle"> <b>234 456 678</b></td></tr></table> </td>
<td></td>
</tr>
<tr>
<td colspan="4">
<td></td>
<td></td>
</tr>
<tr>
<td colspan="4">
<td></td>
<td></td>
</tr>
<tr>
<td height="20" ><b>МОЛ </b></td>
<td height="20" ><b>Име </b></td>
<td height="20"><b>Подпис</b></td>
<td height="20"><b>Общо</b></td>
<td colspan="2"></td>
</tr>
<td colspan="2"></td>
<td></td>
<td></td>
<td colspan="2"></td>
<tr>
</table>
</body>
</html>
