Начиная с этого урока, я больше не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body.

Блок . Структура простейшей таблицы

Я думаю, вы представляете, что такое таблица в обычной жизни - это набор строк и столбцов, на пересечении которых находятся ячейки.

В 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>

Так код будет выглядеть в браузере:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Блок . Ячейки-заголовки

Кроме тегов td существуют также теги <th>, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.

В следующем примере ячейки "Иван" и "Николай" должны быть обычными ячейками td, а ячейка "Имя" по логике должна быть ячейкой-заголовком th, так как "Имя" - это общее название содержимого этого столбца:

<table border="1">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

По умолчанию текст в ячейках th будет жирный и расположен по центру (это поведение можно поменять, но об этом позже).

Блок . Атрибут cellspacing

Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).

Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

<table border="1" cellspacing="10">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.

В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.

Если вы думаете, что вам не стоит изучать этот атрибут из-за того, что он устарел - вы ошибаетесь. В мире гораздо больше сайтов, сделанных не на HTML5, и в них вы можете столкнуться с этим атрибутом (и некоторыми другими устаревшими, которые мы будем проходить). В этом случае вам нужно знать, что это такое и как с ним работать.

Блок . Атрибут cellpadding

Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:

<table border="1" cellpadding="20">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Для сравнения привожу то, как таблица будет выглядеть по умолчанию:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает - обнулите его.

Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

Блок . Обнуляем cellpadding и cellspacing

Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

<table border="1" cellpadding="0" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Как вы видите, в данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.

Блок . Добавляем ширину и высоту

Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста - ширина большая, мало текста - ширина маленькая).

Посмотрите на пример их применения:

<table border="1" cellpadding="0" cellspacing="0" width="300" height="300">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Значениями атрибутов могут выступать пиксели или проценты. Значения в процентах задаются таким образом: width="30%" - в этом случае таблица займет 30% ширины родителя.