C, PHP, VB, .NET

Дневникът на Филип Петров


* Форматиране на таблици

Публикувано на 27 август 2009 в раздел ХHTML.

Сега е време да разгледаме няколко по-специфични параметри, чрез които да можем да форматираме таблиците много по-гъвкаво.

1. cellpadding: атрибут със стойност в пиксели, чрез който се обозначава разстоянието между текста в клетките и рамката на клетките в таблица.

Пример:

<table border="1" cellpadding="10">
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

cell padding

Алтернативно можете да използвате стилове. Стил padding или подстилове padding-top, padding-left, padding-right и padding-bottom ви дават още по-гъвкави възможности за позициониране на текст в клетка.

2. cellspacing: атрибут приемащ стойност в пиксели, чрез който се обозначава разстоянието между рамката на таблицата и рамката на клетките.
Пример:

<table border="1" cellspacing="10">
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

По подразбиране cellspacing e 1. Най-често използвана е стойност 0, при която рамките съвпадат.

Пример:

<table border="1" cellspacing="0">
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>

	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

Алтернативата чрез стилове е border-spacing.

3. width: Дължина по хоризонтала на таблица или клетка. Ще дадем пример за всеки елемент по отделно. Тук ще го реализираме чрез стилове.

Пример: Таблица с обща широчина 80%.

<table border="1" style="width:80%">
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

Пример: Таблица изпълваща екрана по хоризонтала и с първа колона от точно 70 пиксела.

<table border="1" style="width:100%">
	<thead>
		<tr>
			<th style="width:70px">Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

4. height: Определя височина на таблица или ред.

Пример: Таблица с обща височина 200 пиксела и първи ред с височина 20 пиксела.

<table border="1" style="height:200px">
	<thead>
		<tr style="height:20px">
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

5. frame: атрибут, определящ рамката на таблицата. Възможните стойности са:

a) void – без рамка;
б) above – само горната линия на рамката е видима;
в) below – само долната линия;
г) hsides – само двете вертикални линии;
д) vsides – само горната и долната линия;
е) lhs – само лявата линия;
ж) rhs – само дясната линия;
з) box – всички линии (по подразбиране).

Пример:

<table border="3" frame="vsides">
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

6. colgroup: Използва се за създаване на групи от колони. Можете лесно да си направите аналогия с thead, tbody и tfoot, които са групи по редове. Ето как можем да създадем таблица с три колони и две групи. За да ги различите ще сложим розов фон на първата група и жълт на втората:

<table border="1">
	<colgroup span="2" style="background-color:pink"></colgroup>
	<colgroup style="background-color:yellow"></colgroup>
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
			<th>Колона 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
			<td>31</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
			<td>32</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2 Колона 3
11 21 31
12 22 32

7. rules: атрибут, чрез който се контролират линиите вътре в таблицата. Възможните стойности са:

а) none – без линии – по подразбиране;
б) groups – само между между thead, tbody и tfoot, както и col и colgroup;
в) rows – линии само по редове;
г) cols – линии само по колони;
д) all – и по редове и по колони.

Пример:

<table border="1" rules="groups">
	<colgroup></colgroup>
	<colgroup></colgroup>
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

8. border, border-color и border-style: стилове, който задават дебелина, цвят на рамката и стил.

a) border – всъщност обединяващ стил, който може да приема повече от един параметър. Ако му подадем размер в пиксели, то определя дебелината на рамката;
б) border-color – приема за стойност цвят на рамката;
в) border-style – приема една от следните стойности:
– none – без рамка;
– hidden – практически същото като none;
– dotted – на точки;
– dashed – на чертички;
– solid – права линия (по подразбиране);
– double – двойна права линия;
– groove, ridge, inset, outset – специални триизмерни ефекти, които зависят пряко от border-color;
– inherit – наследяване от родителски елемент (т.е. ако например таблицата е вътре в параграф, то наследява рамката на параграфа).

Пример:

<table style="border:7px; border-style:dashed; border-color:lightblue">
	<thead>
		<tr>
			<th>Колона 1</th>
			<th>Колона 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>11</td>
			<td>21</td>
		</tr>
		<tr>
			<td>12</td>
			<td>22</td>
		</tr>
	</tbody>
</table>

Резултат:

Колона 1 Колона 2
11 21
12 22

Същите стилове са приложими за цели редове или отделни клетки!

Вече можем да построим доста смислени таблици. Ето например списък от ученици:

<table rules="all" cellpadding="10" frame="box"
	   style="border-width:1px; border-style:solid; border-color:black;
		   width:100%; font-family:'Lucida Console', Monaco, monospace;font-size:12pt">
	<colgroup style="background-color:wheat;
		         width:25px"></colgroup>
	<colgroup span="2" style="background-color:whitesmoke"></colgroup>
	<thead style="background-color:lightgrey; height:40px">
		<tr>
			<th>#</th>
			<th>Лично име</th>
			<th>Фамилно име</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td style="text-align:center">1</td>
			<td>Анна</td>
			<td>Петрова</td>
		</tr>
		<tr>
			<td style="text-align:center">2</td>
			<td>Иван</td>
			<td>Захариев</td>
		</tr>
		<tr>
			<td style="text-align:center">3</td>
			<td>Димитър</td>
			<td>Михайлов</td>
		</tr>
	</tbody>
</table>

Резултат:

Примерна таблица

* Някои от резултатите са показани с картинки, понеже wysiwyg редактора на блога автоматично променя стиловете.

 



Добави коментар

Адресът на електронната поща няма да се публикува


*