Робота з таблицями на HTML

Зараз ми з вами навчимося створювати таблиці на HTML. Я думаю, ви уявляєте, що таке таблиця у звичайному житті - це набір рядків та стовпців, на перетині яких перебувають комірки.

У HTML таблиці створюються за схожим принципом. Там теж є стовпці та рядки з комірками, проте HTML код таблиць при першому погляді може здатися незвичним: таблиці створюються по рядах - спочатку перший ряд, потім другий і так далі.

Код таблиці має тверду структуру: головним є тег table, всередині якого повинні лежати теги tr, які створюють ряди таблиці, а всередині них - теги td, які створюють осередки. Тег table може мати атрибут border, який задає межі таблиці та її комірки.

Давайте для прикладу зробимо таблицю з трьома рядами та трьома комірками в кожному ряду:

<table border="1">
	<!--Це буде первый рядок таблиці:-->
	<tr>
		<td>комірка 1</td>
		<td>комірка 2</td>
		<td>комірка 3</td>
	</tr>
	
	<!--Це буде другий рядок таблиці:-->
	<tr>
		<td>комірка 4</td>
		<td>комірка 5</td>
		<td>комірка 6</td>
	</tr>
	
	<!--Це буде третій рядок таблиці:-->
	<tr>
		<td>комірка 7</td>
		<td>комірка 8</td>
		<td>комірка 9</td>
	</tr>
</table>

Ширина і висота таблиці

За допомогою атрибутів width и height можна задати ширину і висоту таблиці. Задамо, наприклад, нашій таблиці ширину в 300 пікселів, а висоту - в 200:

<table border="1" width="300" height="200">
	<tr>
		<td>комірка 1</td>
		<td>комірка 2</td>
		<td>комірка 3</td>
	</tr>
	<tr>
		<td>комірка 4</td>
		<td>комірка 5</td>
		<td>комірка 6</td>
	</tr>
	<tr>
		<td>комірка 7</td>
		<td>комірка 8</td>
		<td>комірка 9</td>
	</tr>
</table>

Додайте вашій таблиці ширину 400 пікселів і висоту 300.

Комірки-заголовки

Крім тегів td існують також теги th, які також створюють комірки. Але це вже будуть не звичайні комірки, а комірки-заголовки, які вказують, що знаходиться в даному стовпчику (або рядку) таблиці. За замовчуванням текст у таких комірках th буде жирним та розташований по центру.

Давайте подивимося на прикладі. Нехай у нас є ось така таблиця із працівниками:

<table border="1" width="300">
	<tr>
		<td>Іван</td>
		<td>Іваненко</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Микола</td>
		<td>Миколенко</td>
		<td>300$</td>
	</tr>
	<tr>
		<td>Володимир</td>
		<td>Шевченко</td>
		<td>400$</td>
	</tr>
</table>

Як ви бачите, у першому стовпці зберігається ім'я працівника, у другому стовпці - прізвище, а в третьому – зарплата. Давайте зробимо ще один ряд на початку таблиці, в якому розмістимо заголовки колонок у тегах th:

<table border="1" width="300">
	<tr>
		<th>И`мя</th>
		<th>Прізвище</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Іван</td>
		<td>Іваненко</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Микола</td>
		<td>Миколенко</td>
		<td>300$</td>
	</tr>
	<tr>
		<td>Володимир</td>
		<td>Шевченко</td>
		<td>400$</td>
	</tr>
</table>