Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

Таблици

Таблиците се дефинират с таг <table>. Таблицата е разделена на редове чрез таг <tr>, а редовете са разделени на клетки с данни чрез таг <td>. Клетките могат да съдържат текст, изображения, списъци, параграфи, хоризонтални линии, таблици и т.н. Заглавията в таблиците се дефинират с таг <th>. Когато е необходимо да се показва клетка без съдържание трябва да се използва символа ( ) за да се направи клетката видима.

По-долу е даден пример за очертана таблица с атрибут border=”1” с два реда с по две клетки. Ако атрибута border липсва, таблицата ще се показва без очертание. Стойността на този атрибут е дебелината на очертаване в пиксели (виж примера в браузъра):

<html>
  <body>
    <table border="1">
      <tr>
	  <th>Колона І</th>
	  <th>Колона ІІ</th>
	  </tr>
	  <tr>
	  <td>ред 1, клетка 1</td>
	  <td>ред 1, клетка 2</td>
	  </tr>
	  <tr>
	  <td>ред 2, клетка 1</td>
	  <td>ред 2, клетка 2</td>
	  </tr>
	  <tr>
	  <td>ред 3, клетка 1</td>
	  <td> </td>
	  </tr>
    </table>
  </body>
</html>

Несиметрични таблици

В следващият пример е показано дефинирането на клетки, които съдържат повече от един ред или колона (виж примера в браузъра).

    <html>
<body>
<h4>Клетка, която обхваща две колони:</h4>
<table border="1">
<tr>
<th>Име</th>
<th colspan="2">Телефон</th>
</tr>
<tr>
<td>Никола Меранзов</td>
<td>0888414809</td>
<td>02/4823361</td>
</tr>
</table>
<h4>Клетка, която обхваща две редици:</h4>
<table border="1">
<tr>
<th>Име:</th>
<td>Никола Меранзов</td>
</tr>
<tr>
<th rowspan="2">Телефон:</th>
<td>0888414809</td>
</tr>
<tr>
<td>02/4803361</td>
</tr>
</table>
</body>
</html>

Многоелементни таблици

В примера по-долу е показано как да се показват елементи в клетките на таблицата (виж примера в браузъра):

    
<html>
<body>
<table border="1">
<tr>
<td>
<p>Това е текстов параграф</p>
<p>Това е втори текстов параграф</p>
</td>
<td>Тази клетка съдържа таблица:
<table border="1">
<tr>
<td>Едно</td>
<td>Две</td>
</tr>
<tr>
<td>Три</td>
<td>Четири</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Тази клетка съдържа списък
<ul>
<li>бяло</li>
<li>зелено</li>
<li>червено</li>
</ul>
</td>
<td>Всичко е ясно</td>
</tr>
</table>
</body>
</html>

Разстояние между рамка и съдържание, фон на клетка

По-долу е даден пример за създаване на интервали между съдържанието на клетката и рамката. Също така е показано увеличаване на разстоянието между клетките и задаване на фон като цвят или изображение(виж примера в браузъра):

    <html>
<body>
<h4>Без интервал:</h4>
<table border="1">
<tr>
<td>Първи</td>
<td>Ред</td>
</tr>
<tr>
<td>Втори</td>
<td>Ред</td>
</tr>
</table>
<h4>С интервал и фонов цвят “yellow” или изображение
"silver-bg.jpg":</h4>
<table border="1" cellpadding="10">
<tr>
<td bgcolor="yellow">Първи</td>
<td>Ред</td>
</tr>
<tr>
<td background="silver-bg.jpg">Втори</td>
<td>Ред</td>
</tr>
</table>
<h4>С разстояние между клетките:</h4>
<table border="1" cellspacing="10">
<tr>
<td>Първи</td>
<td>Ред</td>
</tr>
<tr>
<td>Втори</td>
<td>Ред</td>
</tr>
</table>
</body>
</html>

Изравняване съдържаниет в таблица

В следващият пример е показано изравняване на текстовете в таблица (виж примера в браузъра):

    <html>
<body>
<table width="400" border="1">
<tr>
<th align="center">Заплати личен състав</th>
<th align="center">Януари</th>
<th align="center">Февруари</th>
</tr>
<tr>
<td align="left">Иван Иванов</td>
<td align="right">1200,00</td>
<td align="right">1150,20</td>
</tr>
<tr>
<td align="left">Петър Петров</td>
<td align="right">925,40</td>
<td align="right">985,40</td>
</tr>
<tr>
<td align="left">Димитър Димитров</td>
<td align="right">718,30</td>
<td align="right">852,80</td>
</tr>
<tr>
<th align="center">Общо</th>
<th align="right">1843,70</th>
<th align="right">1988,40</th>
</tr>
</table>
</body>
</html>

Ограждане на таблици

В този пример е демонстрирано използването на атрибута “frame” със стойности "hsides" и "vsides" за различни начини на ограждане на таблицата (виж примера в браузъра):

    <html>
<body>
<p> Ако не виждате рамки около таблицата в този пример
това означава, че Вашя браузър не поддържа атрибута “frame”</p>
<table frame="hsides" border="3">
<tr>
<td>Иван Иванов</td>
</tr>
</table>
<br />
<table frame="vsides" border="3">
<tr>
<td>Петър Петров</td>
</tr>
</table>
</body>
</html>