Работа с HTML таблицами
Учебник HTML CSS
Практика
Продвинутый курс
Практика
Адаптив
Продвинутые вещи
Практика
Начиная с этого урока, я больше не буду приводить структуру всей страницы, считайте, что мы всегда работаем внутри тега body.
В HTML таблицы создаются по похожему принципу. Там тоже есть столбцы и строки с ячейками, однако HTML код таблиц при первом взгляде может показаться непривычным.
Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):
Так код будет выглядеть в браузере:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Кроме тегов td существуют также теги
Так код будет выглядеть в браузере:
По умолчанию текст в ячейках th будет жирный и расположен по центру (это поведение можно поменять, но об этом позже).
Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).
Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:
Так код будет выглядеть в браузере:
То, что cellspacing имеет некоторое значение по умолчанию, зачастую может мешать вам. В этом случае следует просто поставить его в ноль.
В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.
Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:
Так код будет выглядеть в браузере:
Для сравнения привожу то, как таблица будет выглядеть по умолчанию:
Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.
Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:
Так код будет выглядеть в браузере:
Как вы видите, в данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.
Посмотрите на пример их применения:
Так код будет выглядеть в браузере:
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Атрибуты cellpadding и cellspacing на CSS
Те, кто беспокоится о валидности своей вёрстки по HTML5, столкнулись с той проблемой, что в HTML5 убрали атрибуты cellpadding и cellspacing. Безусловно, имеется вариант указать cellpadding и cellspacing через CSS, о чём я сейчас и напишу.
Начнём с атрибута cellpadding, отвечающего за поля внутри ячеек. Думаю, что многие догадались, как им управлять. Давайте с Вами попробуем обнулить cellpadding через CSS:
Как видите, всё достаточно очевидно. А теперь перейдём к атрибуту cellspacing.
Этот атрибут отвечает за границы между ячейками. Здесь несколько сложнее и свойства зависят от того, что Вы хотите сделать: обнулить границы или поставить иные значения. Если обнулить, то это делается так:
table <
border-collapse: collapse;
>
Данный код обнулит cellspacing, как правило, это и требуется. А если же нужно не обнулить, а изменить значения, то можно использовать border-spacing:
table <
border-spacing: 1px 2px 4px 5px;
>
Это отступы ячеек друг от друга сверху, справа, снизу и слева. То есть числа идут по часовой стрелке, аналогично, как и в свойствах margin и padding.
Вот так легко можно задавать атрибуты cellpadding и cellspacing на CSS.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 5 ):
Может, побольше статей по PHP делать?
Их и так побольше. Да и большинство статей берутся на основе вопросов и просьб у учеников.
Спасибо, меня всегда напрягала необходимость обнулять cellpadding и cellspacing в html. Теперь для всего body в css пропишу body table
Полезная информация! Только мне кажется, не совсем правильно говорить, обнулить границы border-collapse: collapse т.к. данное свойство не обнуляет, а создает одну общую рамку для двух соседних ячеек таблицы, а также одну общую рамку для ячейки и таблицы.
название статьи «Атрибуты cellpadding и cellspacing на CSS», вопрос а где упомянается о cellpadding?
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Cellspacing html что это
Табличное представление информации Используется в тех случаях, когда необходимо вывести на страницу большое количество данных, характеризуемых однотипным набором данных. Примерами таких данных могут быть CD библиотека, или книжный каталог.
Таблицы строятся с помощью элементов следующих типов:
Это далеко не все элементы таблиц, однако, разберем все по порядку. Итак, ниже представлен код простейшей таблицы:
| Листинг №5.1.1: Простейшая таблица |
Как вы сами можете убедиться, полученная таблица выглядит не совсем так, как хотелось бы. У привычных нам таблиц есть по крайней мере рамки! Добиться «нормального» внешнего вида нам помогут атрибуты элемента table:
С учетом вышеописанного модифицируем код примера 5.1.1 следующим образом:
| Листинг №5.1.2: Более интересная таблица |
| Листинг №5.1.3: Таблица с заголовком |
Кроме того, строку заголовка можно выделить, присвоив ей в качестве фона цвет или избражение. Например так:
| Листинг №5.1.4: Альтернативный фон заголовка |
Помимо прочих описанных возможностей, таблице можно дать надпись. Реализуется это с помощью элемента caption? который обычно располагают сразу следом за открывающим тэгом table:
| Листинг №5.1.5: Надпись к таблице |
Надпись обычно выравнивается по центру относительно таблицы. Для изменения выравнивания используйте стилевое правило text-align.
Выравнивание данных таблиц
Ниже приводится пример, демонстрирующий выравнивание данных в ячейках таблицы:
| Листинг №5.1.6: Выравнивание данных в ячейках таблицы |
Управление размерами ячеек
Для ячеек td> и th> можно указать размеры, используя стилевые свойства width и height:
| Листинг №5.1.7: Управление размерами ячеек |
Объединение ячеек
В некоторых задачах приходится строить таблицы, ячейки которых «покрывают» несколько столбцов или строк. Чаще всего это относится к ячейкам заголовков, реже к ячейкам данных таблицы. Ниже представлен пример такой таблицы:
Обратите внимание на «шапку» таблицы. Она состоит уже из двух строк. Это следует принимать во внимание при оформлении таблицы.
Управление объединением ячеек происходит с помощью атрибутов элементов td> и th> :
Код приведенной таблицы представлен ниже:
| Листинг №5.1.8: Таблица с объединением ячеек |
Строкам «шапки» в примере присвоен одинаковый фоновый цвет.
При построении сложных таблиц, содержащих множество объединенных ячеек, важно помнить следующее правило: строка или столбец таблицы должны содержать минимум одну ни с кем не объединенную ячейку! При нарушении данного правила таблица не будет отображаться корректно.
Установить cellpadding и cellpacing в CSS?
В таблице HTML cellpadding и cellspacing могут быть установлены следующим образом:
Как это можно сделать с помощью CSS?
ОТВЕТЫ
Ответ 1
Основы
Для управления «cellpadding» в CSS вы можете просто использовать padding для ячеек таблицы. Например. для 10px «cellpadding»:
Для «cellpacing» вы можете применить свойство CSS border-spacing к своей таблице. Например. для 10px «cellpacing»:
Это свойство позволит даже разделить горизонтальное и вертикальное расстояние, что вы не могли бы сделать со старой «ячейкой» старой школы.
Примечание. Для большого обзора свойств CSS, которые можно применить к таблицам и для каких браузеров, см. эту фантастическую страницу Quirksmode.
Ответ 2
По умолчанию
Поведение браузера по умолчанию эквивалентно:
CELLPADDING
Устанавливает объем пространства между содержимым ячейки и стеной ячейки
CELLSPACING
Управляет пространством между ячейками таблицы
Оба (специальные)
Здесь вы можете найти старый способ html для достижения этого.
Ответ 3
Ответ 4
Ответ 5
Этот хак работает для Internet Explorer 6 и более поздних версий, Google Chrome, Firefox и Opera:
Объявление * предназначено для Internet Explorer 6 и 7, а другие браузеры должным образом игнорируют его.
Ответ 6
Для тех, кто хочет ненулевое значение ячейки, для меня работал следующий CSS, но я могу проверить его только в Firefox. Подробнее о деталях совместимости см. В Quirksmode в другом месте. Кажется, он не может работать со старыми версиями Internet Explorer.
Ответ 7
Простое решение этой проблемы:
Ответ 8
Ответ 9
Оберните содержимое ячейки с помощью div, и вы можете делать все, что хотите, но вы должны обернуть каждую ячейку в столбце, чтобы получить единообразный эффект. Например, чтобы получить более широкие левые и правые поля:
Ответ 10
Просто используя border-collapse: collapse для вашей таблицы и padding для th или td
Ответ 11
Любой, кто предлагает маржи на
Ответ 12
У меня был этот стиль в моем reset.css файле:
Ответ 13
Ответ 14
Из того, что я понимаю из классификаций W3C, является то, что
| Браузер |  Internet Explorer |  Netтscape |  Опера |  Safari |  Mozilla Firefox | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
| ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Описание
Таблицы с невидимой границей долгое время использовались для верстки web-страниц, позволяя разделять файл на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих с нашего сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Синтаксис
Параметры
Закрывающий тег
Пример 1. Использование тега
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Результат данного примера показан ни рис. 1. Показ рисунков в браузере отключен.
Рис. 1. Использование таблиц для разработки макета страницы
Описание параметров тега Параметр ALIGN
Описание
Задает выравнивание таблицы по краю окна браузера.
Синтаксис
Аргументы
Значение по умолчанию
Аналог CSS (ЦСС)
Пример 2. Выравнивание таблицы по центру
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Параметр BACKGROUND
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных рисунков, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей с нашего сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные Имаги в формате GIF, но они отвлекают внимание читателей.
Синтаксис
Аргументы
Любой допустимый адрес Имаги — можно использовать относительный или абсолютный путь.
Значение по умолчанию
Аналог CSS (ЦСС)
Пример 3. Фоновый рисунок в таблице
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Параметр BGCOLOR
Описание
Синтаксис
Аргументы
Значение цвета можно задавать двумя способами.
1. По его названию
Браузеры поддерживают некоторые цвета по их названию.
2. По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.
Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.
Аналог CSS (ЦСС)
Пример 4. Цвет фона таблицы
ШТМЛ 4.01 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
Параметр BORDER
Описание
Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега
