Упражнение #5

Създаване и форматиране на таблици

"Разчертаване" на таблици с различна размерност - таговете <table>, <tr>, <td>, <caption> и атрибутите cellpadding, cellspacing

Таблица от 1 ред с 3 клетки
1-ви ред, 1-ва колона	1-ви ред, 2-ра колона	1-ви ред, 3-та колона

Таблица от 3 реда с по 1 клетка
1-ви ред, 1-ва колона
2-ри ред, 1-ва колона
3-ти ред, 1-ва колона

Таблица от 2 реда с по 2 клетки
1-ви ред, 1-ва колона	1-ви ред, 2-ра колона
2-ри ред, 1-ва колона	2-ри ред, 2-ра колона

Таблица с по-сложна структура - допълнителните тагове <thead>, <tbody>, <tfoot>, <th> и атрибутите colspan, rowspan

Външно заглавие
Вътрешно заглавие(thead, th)
data(tbody)	data(tbody)	data(tbody)	data(tbody)
data(tbody)	data(tbody)	data(tbody)	data(tbody)
data(tfoot)	data(tfoot)	data(tfoot)	data(tfoot)

Вложени таблици

Таблица 1

Таблица 2
...	...

Таблица 3
...	...

CSS свойства за форматиране на таблици

Свойството border-collapse определя дали рамката на таблицата трябва да бъде редуцирана до една обща рамка:
separate: запазва отделните - това е по подразбиране
collapse: обединява рамките на съседни клетки.

	<style>
	table { border-collapse: collapse;}	 table, td, th { border: 1px solid black;}
	</style>

Ако искаме само една рамка около таблицата, свойството border за <table> трябва да се уточни:

table { border-collapse: collapse; border: 1px solid black;}

Ширината и височината на на таблица се определят от свойствата width и height.

	
	<style>
	table, td, th {  border: 1px solid black;}
	table {  border-collapse: collapse; width: 100%;}  th {  height: 50px;}
	</style>

Свойството text-align задава хоризонталното подравняване (left, right или center) на съдържанието в <th> или <td>. По подразбиране, съдържанието на <th> елементите е центрирано, а съдържанието на елементите <td> е ляво подравнено.
Следващият пример подравнява в ляво текста в <th> елементите:

	
	<style>
	table, td, th {   border: 1px solid black;}
	table { border-collapse: collapse; width: 100%;} th {  text-align: left;}
	</style>

Свойството vertical-align задава вертикалното подравняване (top, bottom или middle) на съдържанието в <th> или <td>. По подразбиране, вертикалното подравняване на съдържанието на таблицата е middle (за <th> и <td>).
Следващият пример задава вертикално подравняване на текст bottom за елементите <td>:

За да се контролира пространството между рамката и съдържанието на таблицата се използва свойството padding за елементите <td> и <th>:

	
	<style>
	table, td, th {  border: 1px solid #ddd;  text-align: left;}
	table { border-collapse: collapse;  width: 100%;}
	th, td {  padding: 15px;}
	</style>

Свойството border-bottom към <th> и <td> добавя хоризонтални разделители:

	
	<style>
	table {  border-collapse: collapse;  width: 100%;}
	th, td {  padding: 8px;  text-align: left;  border-bottom: 1px solid #ddd;}
	</style>

За таблица с двуцветни ивици се използва селектора nth-child(), за да се добави background-color на всички четни (или нечетни) таблични редове:

	
	<style>
	table {   border-collapse: collapse;   width: 100%;}
	th, td {   text-align: left;   padding: 8px;}
	tr:nth-child(even){background-color: red}
	</style>

Примерът по-долу определя фоновия цвят и цвета на текста за елементите <th>:

	
	<style>
	table {   border-collapse: collapse;   width: 100%;}
	th, td {   text-align: left;   padding: 8px;}
	tr:nth-child(even){background-color: #99CCCC}
	th {   background-color: green;   color: white;}
	</style>

Показване на хоризонтална лента за превъртане на таблицата (scroll), ако екранът е твърде малък, за да се покаже цялото съдържание:
Добавя се блоков елемент (като <div>) с overflow-x:auto около елемента <table>:

	
	<style>
	table {   border-collapse: collapse;   width: 100%;}
	th, td {   text-align: left;   padding: 8px;}
	tr:nth-child(even){background-color: #f2f2f2}
	</style>

Използване на атрубута id за определяне свойства на таблица

	
	<style>
	table {  width:100%;}
	table, th, td {   border: 1px solid black;   border-collapse: collapse;}
	th, td {   padding: 5px;   text-align: left;} 
	
	table #t01 tr:nth-child(even) {   background-color: #eee;}
	table #t01 tr:nth-child(odd) {   background-color:#fff;}
	table #t01 th {   background-color: black;   color: white;}
	</style>

⇪