Блок 4 . Атрибут 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.

Блок 5. Обнуляем 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.

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

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

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

<table border="1" cellpadding="0" cellspacing="0" 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% ширины родителя.

Задачи для решения

Простые таблицы

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Добавим заголовки, атрибуты width (400) и height (200)

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Добавим выравнивание align

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Закрепление…

 

 

Сейчас мы с вами займемся объединением ячеек. Будем объединять их как по горизонтали, так и по вертикали.

Смотрите пример того, что у нас будет получаться:

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

Таблица, с которой мы будем работать

Сначала я приведу таблицу без объединений, с которой мы будем работать дальше:

<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

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

Блок 1. Как объединить столбцы

Столбцы объединяются с помощью атрибута colspan. При этом на самом деле этот атрибут не объединяет столбцы, а расширяет ячейку по горизонтали. К примеру, запись colspan="2" заставит ячейку стать такого же размера по ширине как две ячейки, а colspan="3" - как три. Давайте рассмотрим примеры, чтобы понять более подробно, как это работает.