Что такое cellpadding в html
Перейти к содержимому

Что такое cellpadding в html

  • автор:

Атрибут cellpadding HTML тега table

Атрибут cellpadding определяет расстояние между содержимым ячейки таблицы и ее границей.

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

Вместо него следует использовать стили CSS.

Синтаксис атрибута
Значения атрибута
Значение Описание
pixels Расстояние между содержимым ячейки таблицы и ее границей
Пример использования атрибута

Устанавливаем расстояние между содержимым ячейки таблицы и ее границей в 10px:

  
Месяц Сэкономлено
Январь $100

Атрибут cellpadding

Определяет расстояние между границей ячейки и её содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым её размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячеек.

Данный атрибут устарел, взамен используйте стили.

Синтаксис

Значения

Любое целое значение в пикселях или процентах.

Значение по умолчанию

Пример

TABLE, атрибут cellpadding

.

Примечание

В CSS вместо атрибута cellpadding используйте стилевое свойство padding, добавляя его к селектору td или th .

padding td

.

Браузеры

3 12 1 3.5 1 1

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Атрибут cellspacing HTML тега table

Атрибут cellspacing определяет расстояние в пикселях между ячейками таблицы.

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

Синтаксис атрибута
Значения атрибута
Значение Описание
pixels Расстояние между ячейками таблицы
Пример использования атрибута

Устанавливаем расстояние между ячейками таблицы в 10px:

  
Месяц Сэкономлено
Январь $100

Что такое cellpadding в html

Таблицы используют как контейнеры для хранения данных. Чтобы долго не расписывать, давайте сразу перейдем к примеру:
&lthtml>
&lthead>
&lttitle>Главная&lt/title>
&lt/head>
&ltbody>
&ltp>Меню&lt/p>
&ltul>
&ltli>Главная&lt/li>
&ltli>Банан&lt/li>
&ltli>Яблоко&lt/li>
&ltli>&lta href=»persik.html» title=»Польза персика»>Персик&lt/a>&lt/li>
&lt/ul>
&lttable border=»2″>
&lttr>
&lttd>1&lt/td>
&lttd>2&lt/td>
&lt/tr>
&lttr>
&lttd>3&lt/td>
&lttd>4&lt/td>
&lt/tr>
&lt/table>
&lt/body>
&lt/html>

Также мы установили значения для атрибута border=»2″, который отвечает за толщину границы нашей таблицы. Как таблица будет выглядеть в браузере:

  • За создание таблицы отвечает тег &lttable>&lt/table>.
  • За создание строки отвечает тег &lttr>&lt/tr>.
  • А уже внутри идут столбцы, которые создаются тегом &lttd>&lt/td>. Вот внутри данного тега уже можно размещать содержимое таблицы.

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

Также существует тег, с помощью которого можно задавать название столбцов. Это тег &ltth>&lt/th>. Давайте посмотрим, как он размещается в коде:

Атрибуты тегов td th

Для тегов &lttd> и &ltth> очень полезными являются атрибуты colspan и rowspan.
&lthtml>
&ltbody>
&lth4>Правильное применение colspan:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd colspan=»2″>100&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>400&lt/td>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>

Вот как выглядит это в браузере:

Следующее здание выполните самостоятельно и посмотрите в чём разница.
&lth4>Неправильное применение colspan:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd colspan=»2″>100&lt/td>
&lttd>200&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>400&lt/td>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>

Теперь рассмотрим значение rowspan:

&lth4>Правильное применение rowspan:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd rowspan=»2″>100&lt/td>
&lttd>200&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>

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

Так же предлагаю следующее задание выполнить самостоятельно и понять, в чём разница.

&lth4>Неправильное применение rowspan:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd rowspan=»2″>100&lt/td>
&lttd>200&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>400&lt/td>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>
&lt/body>
&lt/html>

Теперь Вы уже знаете, все нужные атрибуты и их значения, и я предлагаю перейти дальше.
Вы наверняка заметили, что добавилась еще одна строка, которая находится над всеми остальными. И я добавила столько же тегов &ltth> сколько и столбцов. Иначе если вы добавите тегов заголовка больше чем количество столбцов, тогда ваша таблица будет выглядеть примерно вот так:

Сейчас изучим еще несколько важных и часто используемых атрибутов.
Таблицы в html обладают таким свойством столбцов, что столбцы могут объединяться по вертикали и по горизонтали.
Сначала объединим столбцы:
&lttable border=»2″>
&lttr>
&ltth>Первый столбец&lt/th>
&ltth>Второй столбец&lt/th>
&lt/tr>
&lttr>
&lttd COLSPAN=»2″>1&lt/td>
&lttd>2&lt/td>
&lt/tr>
&lttr>
&lttd>3&lt/td>
&lttd>4&lt/td>
&lt/tr>
&lt/table>

Как это выглядит в браузере:

Как видите ячейка с цифрой «2» вылезла за пределы таблицы. Это произошло из-за того что мы объединили две ячейки по горизонтали. Мы применили здесь атрибут COLSPAN=»2″. И в значении указали 2, то есть объединить две ячейки.
Сейчас посмотрим, как объединить ячейки по вертикали:
&lttable border=»2″>
&lttr>
&ltth>Первый столбец&lt/th>
&ltth>Второй столбец&lt/th>
&lt/tr>
&lttr>
&lttd ROWSPAN=»2″>1&lt/td>
&lttd>2&lt/td>
&lt/tr>
&lttr>
&lttd>3&lt/td>
&lttd>4&lt/td>
&lt/tr>
&lt/table>

Как это выглядит в браузере:

Сейчас лишней оказалась ячейка с цифрой «4». Также все данные теги и атрибуты можно комбинировать. Например:
Как это будет выглядеть в браузере:

  • CELLPADDING — расстояние между границей ячейки и ее содержимым.
  • CELLSPACING — расстояние между внешними границами ячеек

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

А сейчас рассмотрим, как работает атрибут cellspacing.
&lttable border=»2″ cellpadding=»6″>
&lttr>
&ltth>Первый столбец&lt/th>
&ltth>Второй столбец&lt/th>
&lt/tr>
&lttr>
&lttd>1&lt/td>
&lttd>2&lt/td>
&lt/tr>
&lttr>
&lttd>3&lt/td>
&lttd>4&lt/td>
&lt/tr>
&lt/table>

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

А сейчас пример с двумя атрибутами вместе:
&lttable border=»2″ cellspacing=»0″ cellpadding=»6″>
&lttr>
&ltth>Первый столбец&lt/th>
&ltth>Второй столбец&lt/th>
&lt/tr>
&lttr>
&lttd>1&lt/td>
&lttd>2&lt/td>
&lt/tr>
&lttr>
&lttd>3&lt/td>
&lttd>4&lt/td>
&lt/tr>
&lt/table>

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

Пробуйте всё прописать руками. Тогда вы лучше запомните теги и будете помнить, где и как их применить.

Практическое задание 1

Таблицы
&lthtml>
&ltbody>
&ltp>
Каждая таблица начинается с тега table.
Каждая строка таблицы начинается с тега tr.
Каждый элемент данных таблицы начинается с тега td.
&lt/p>
&lth1>Это пример простейшей таблицы, содержащей одну строку и одну ячейку.&lt/h1>
&lttable border=»1″>
&lttr>
&lttd>Одна строка и одна ячейка&lt/td>
&lt/tr>
&lt/table>

&lth1>Одна строка и три столбца:&lt/h1>
&lttable border=»1″>
&lttr>
&lttd> столбец 1&lt/td>
&lttd> столбец 2&lt/td>
&lttd> столбец 3&lt/td>
&lt/tr>
&lt/table>

&lth1>Две строки и три столбца:&lt/h1>
&lttable border=»1″>
&lttr>
&lttd>1.1&lt/td>
&lttd>1.2&lt/td>
&lttd>1.3&lt/td>
&lt/tr>
&lttr>
&lttd>2.1&lt/td>
&lttd>2.2&lt/td>
&lttd>2.3&lt/td>
&lt/tr>
&lt/table>

&lth1>Обычная рамка:&lt/h1>
&lttable border=»1″>
&lttr>
&lttd>Первая&lt/td>
&lttd>строка&lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>строка&lt/td>
&lt/tr>
&lt/table>

&lth1>Толстая рамка:&lt/h1>
&lttable border=»10″>
&lttr>
&lttd>Первая&lt/td>
&lttd>строка&lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>строка&lt/td>
&lt/tr>
&lt/table>

&lttable border=»1″>
&lttr>
&lttd>строка 1, ячейка 1&lt/td>
&lttd>строка 1, ячейка 2&lt/td>
&lt/tr>
&lttr>
&lttd>строка 2, ячейка 1&lt/td>
&lttd>строка 2, ячейка 2&lt/td>
&lt/tr>
&lt/table>
&lt/body>
&lt/html>
Сохраните файл под именем 40table.html

Практическое задание 2

Таблица без рамки
&lthtml>
&ltbody>
&lth4>Эта таблица не имеет рамки:&lt/h4>
&lttable>
&lttr>
&lttd>100&lt/td>
&lttd>200&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>400&lt/td>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>

&lth4>И эта таблица не имеет рамки:&lt/h4>
&lttable border=»0″>
&lttr>
&lttd>100&lt/td>
&lttd>200&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>400&lt/td>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 41border.html

Практическое задание 3

Заголовки в таблице
&lthtml>
&ltbody>
&lth4>Заголовки таблицы:&lt/h4>
&lttable border=»1″>
&lttr>
&ltth>Имя &lt/th>
&ltth>Телефон &lt/th>
&ltth>Телефон &lt/th>
&lt/tr>
&lttr>
&lttd>Калиткин&lt/td>
&lttd>202 55 55 &lt/td>
&lttd>456 77 84 &lt/td>
&lt/tr>
&lt/table>

&lth4>Вертикальные заголовки:&lt/h4>
&lttable border=»1″>
&lttr>
&ltth>Фамилия:&lt/th>
&lttd>Калиткин&lt/td>
&lt/tr>
&lttr>
&ltth>Телефон :&lt/th>
&lttd>202 55 55&lt/td>
&lt/tr>
&lttr>
&ltth>Телефон:&lt/th>
&lttd>456 77 84&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 42th.html

Практическое задание 4

Практическое задание 5
1.Заглавие таблицы

&lthtml>
&ltbody>
&lth4>
Эта таблица имеет заглавие
и толстую рамку:
&lt/h4>
&lttable border=»6″>
&ltcaption>Заглавие&lt/caption>
&lttr>
&lttd>100&lt/td>
&lttd>200&lt/td>
&lttd>300&lt/td>
&lt/tr>
&lttr>
&lttd>400&lt/td>
&lttd>500&lt/td>
&lttd>600&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 44caption.html

Дополнительное задание:
1.Ячейки таблицы, которые охватывают более одной строки/столбца

&lth4>Ячейка, которая охватывает два столбца:&lt/h4>
&lttable border=»1″>
&lttr>
&ltth>Организация&lt/th>
&ltth colspan=»2″>Телефон&lt/th>
&lt/tr>
&lttr>
&lttd>Тверской технологический колледж&lt/td>
&lttd>253-9312&lt/td>
&lttd>253-9313&lt/td>
&lt/tr>
&lt/table>

&lth4>Ячейка, которая охватывает две строки:&lt/h4>
&lttable border=»1″>
&lttr>
&ltth>Организация:&lt/th>
&lttd> Тверской технологический колледж&lt/td>
&lt/tr>
&lttr>
&ltth rowspan=»2″>Телефон:&lt/th>
&lttd>253-9312&lt/td>
&lt/tr>
&lttr>
&lttd>253-9313&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 45colrow.html

2.Теги внутри таблицы

&lthtml>
&ltbody>
&lttable border=»1″>
&lttr>
&lttd>
&ltp>Это параграф &lt/p>
&ltp>Это другой параграф &lt/p>
&lt/td>
&lttd>Эта ячейка содержит таблицу:
&lttable border=»1″>
&lttr>
&lttd>A&lt/td>
&lttd>B&lt/td>
&lt/tr>
&lttr>
&lttd>C&lt/td>
&lttd>D&lt/td>
&lt/tr>
&lt/table>
&lt/td>
&lt/tr>
&lttr>
&lttd>Эта ячейка содержит список
&ltul>
&ltli>элемент 1&lt/li>
&ltli>элемент 2&lt/li>
&ltli>элемент 3&lt/li>
&lt/ul>
&lt/td>
&lttd>КОНЕЦ&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 46tegi.html

3.Отступ от рамки до содержимого ячейки

&lthtml>
&ltbody>
&lth4>Без отступа:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd>Первая &lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lt/table>

&lth4>С отступом (cellpadding) :&lt/h4>
&lttable border=»1″ cellpadding=»10″>
&lttr>
&lttd>Первая&lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lttr>
&lttd>Вторая&lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 47cellp.html

4.Расстояние между ячейками

&lthtml>
&ltbody>
&lth4>Расстояние между ячейками не задано:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd>Первая &lt/td>
&lttd>Строка &lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>Строка &lt/td>
&lt/tr>
&lt/table>

&lth4>Расстояние между ячейками (cellspacing) задано:&lt/h4>
&lttable border=»1″ cellspacing=»10″>
&lttr>
&lttd>Первая &lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>Строка &lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 48cells.html

5.Использование в таблице фонового цвета или фонового изображения

&lth4>Фоновый цвет (bgcolor):&lt/h4>
&lttable border=»1″ bgcolor=»red»>
&lttr>
&lttd>Первая &lt/td>
&lttd>Строка &lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>Строка &lt/td>
&lt/tr>
&lt/table>

&lth4>Фоновое изображение (background):&lt/h4>
&lttable border=»1″ background=»images/bg.jpg»>
&lttr>
&lttd>Первая&lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lttr>
&lttd>Вторая &lt/td>
&lttd>Строка &lt/td>
&lt/tr>
&lt/table>
&lt/body>
&lt/html>
Сохраните файл под именем 49bgcolor.html

6.Фоновый цвет или фоновое изображение в ячейке таблицы

&lth4>Ячейки с фоном:&lt/h4>
&lttable border=»1″>
&lttr>
&lttd bgcolor=»red»>Первая&lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lttr>
&lttd background=»images/bg.jpg»> Вторая&lt/td>
&lttd>Строка&lt/td>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 50background.html

7.Выравнивание содержимого в ячейках таблицы

&lttable width=»360″ border=»1″>
&lttr>
&ltth align=»left»>Пройдено курсов&lt/th>
&ltth align=»center»>2013&lt/th>
&ltth align=»center»>2014&lt/th>
&lt/tr>
&lttr>
&lttd align=»left»>Базы данных&lt/td>
&lttd align=»center»>2&lt/td>
&lttd align=»center»>3&lt/td>
&lt/tr>
&lttr>
&lttd align=»left»>Программирование&lt/td>
&lttd align=»center»>4&lt/td>
&lttd align=»center»>5&lt/td>
&lt/tr>
&lttr>
&lttd align=»left»>Интернет-технологии&lt/td>
&lttd align=»right»>2&lt/td>
&lttd align=»right»>3&lt/td>
&lt/tr>
&lttr>
&ltth align=»left»>всего&lt/th>
&ltth align=»right»>8&lt/th>
&ltth align=»right»>11&lt/th>
&lt/tr>
&lt/table>

&lt/body>
&lt/html>
Сохраните файл под именем 51align.html

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *