Как создать таблицу в HTML5 и указать её параметры через стили?
Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.
Решение
Пример 1. Создание таблицы
HTML5 IE Cr Op Sa Fx
Тег table Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Порядок расположения ячеек и их вид показан на рис. 1.
Рис. 1. Результат создания таблицы с четырьмя ячейками
Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0.
Пример 2. Поля внутри ячеек
HTML5 CSS 2.1 IE Cr Op Sa Fx
Тег table Заголовок 1 Заголовок 2 Ячейка 3 Ячейка 4
Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.
Рис. 2. Поля в ячейках таблицы
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные рецепты
Как добавить картинку на веб-страницу?
Как добавить иконку сайта в адресную строку браузера?
Как добавить фоновый рисунок на веб-страницу?
Как сделать обтекание картинки текстом?- Как растянуть фон на всю ширину окна?
- Как выровнять фотографию по центру веб-страницы?
Как разместить элементы списка горизонтально?
Как убрать подчеркивание у ссылок?
Как убрать маркеры в маркированном списке?
Как изменить расстояние между строками текста?
Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?- Как открыть ссылку в новом окне?
Создание таблиц в HTML ⇒ код таблицы, ширина и высота
Этот урок научит вас создавать HTML таблицы и манипулировать их свойствами.
Когда-то HTML таблицы использовались для верстки сайтов, но сегодня идеологами современных версий языков гипертекстовой разметки: XHTML и HTML 5, рекомендовано применять таблицы по назначению, то есть для представления данных.
HTML код таблицы, пример:
Посмотреть в новом окне: HTML таблица
Теги, атрибуты и значения
- Теги – объявляют о создании HTML таблицы.
- border=»1″ – устанавливает границу HTML таблицы и ее ячеек в 1 пиксел. Если атрибут border отсутствует или его значение равно 0 – границ не будет.
- Теги – определяют табличный ряд.
- Теги – определяют ячейку HTML таблицы.
HTML таблица может иметь множество рядов и ячеек, а ячейка, в свою очередь, может содержать внутри себя другую таблицу (это свойство будет рассмотрено в одном из следующих уроков).
Как сделать таблицу в HTML | Cellpadding
Определим cellpadding или пространство внутри ячеек таблиц:
Атрибуты и значения
- cellspacing=»0″ – определяет расстояние между ячейками таблиц, а также между границами ячеек и границей таблицы.
- cellpadding=»8″ – пространство между границей ячейки и ее содержимым.
- style=»» – линейное включение CSS.
- background-color: – определяет цвет фона.
- color: – определяет цвет текста.
Символ пробела в этом месте заполняет пустое пространство внутри ячейки.
| ячейка 1, первый ряд | |
| ячейка 1, второй ряд | ячейка 2, второй ряд |
Заметьте, что в данном случае высота и ширина таблицы определена ее содержимым и значением cellpadding . И еще, различными браузерами свойства некоторых атрибутов отображаются по разному, если в Internet Explorer четко видно, что рамка черная, то, например, в Firefox она будет переливаться. Как обойти эти расхождения, вы узнаете в уроке CSS таблица.
Как сделать таблицу в HTML | Cellspacing
Определим cellspacing или расстояние между ячейками и границей таблицы в 12 пикселей:
cellspacing=»» , как уже было сказано выше, определяет расстояние между границами ячеек таблицы, а также между границами ячеек и границeй таблицы.
| ячейка 1, первый ряд | |
| ячейка 1, второй ряд | ячейка 2, второй ряд |
В следующем примере border=»0″ отменит границы HTML таблицы и ячеек:
| ячейка 1, первый ряд | |
| ячейка 1, второй ряд | ячейка 2, второй ряд |
HTML размер таблицы, ширина и высота
Высота и ширина HTML таблицы:
| ячейка 1, первый ряд | ячейка 2, первый ряд | ячейка 3, первый ряд |
| ячейка 1, второй ряд | ячейка 2, второй ряд | ячейка 3, второй ряд |
Посмотреть в новом окне: Ширина HTML таблицы
Атрибуты и значения
- width – в данном случае была определена ширина HTML таблицы в процентах.
- height – определяет высоту таблицы.
Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML изображение-карта 
HTML код таблицы 
Еще HTML таблица
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML код таблицы, теги? – Не вопрос!
empty-cells
Задает отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse , свойство empty-cells игнорируется.
Ячейка считается пустой в следующих случаях:
- нет вообще никаких символов;
- в ячейке содержится только перевод строки, символ табуляции или пробел;
- значение visibility установлено как hidden .
Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет непустой.
Синтаксис
empty-cells: show | hide
Значения
show Отображает границу вокруг ячейки и фон в ней. hide Граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком.
HTML5 CSS2.1 IE Cr Op Sa Fx
empty-cells Леонардо 5 8 Рафаэль 11 Микеланджело 24 Донателло 13
Результат данного примера в браузере Safari показан на рис. 1. Тот же пример в браузере Internet Explorer 7 продемонстрирован на рис. 2.
Рис. 1. Вид таблицы в браузере Safari
Рис. 2. Вид таблицы в браузере Internet Explorer 7
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает свойство empty-cells и отображает пустые ячейки всегда так, словно для них установлено empty-cells : hide .
Firefox версии 2 и ниже не прячет строку таблицы, если для всех ячеек задано empty-cells : hide и ячейки пусты.
Браузер Opera до версии 9.27 включительно не скрывает строку таблицы и для пустых ячеек отображает цвет фона.
Таблицы в HTML
Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!
Значение таблиц в HTML5
Сегодня в вёрстке сайтов таблицы имеют не такое большое значение, как несколько лет назад. Раньше сайты создавались с помощью так называемой табличной верстки, и таблицы были основой, скелетом сайта. Позже, с развитием HTML, а также по мере появления всё большего количества портативных устройств для выхода в интернет (планшеты, смартфоны) сайты, сверстанные с помощью таблиц, «ехали», не помещались на экране, отображались коряво, и возникла потребность в резиновой, адаптивной и отзывчивой верстке.
Поэтому сейчас таблицы используются по прямому назначению — для структурированной подачи информации, будь то меню, прайс-лист или ведомость по сдавшим летнюю сессию.
Основные теги таблицы
Таблица состоит из нескольких обязательных тегов:
- тег (по англ. таблица) — это тег, который говорит браузеру, что внутри него будет таблица
- тег (от англ. table row — строка таблицы) обозначает строку
- тег (от англ. table data — данные таблицы) обозначает ячейку. Именно в этот тег мы закладываем всё, из чего будет состоять таблица — текст, картинки, списки, кнопки или даже другие таблицы
Давайте посмотрим схематически, как это всё ложится в коде:
Как видите, по умолчанию у нашей таблицы нет границ. В HTML5 границы, цвет границ, фона и многое другое делается с помощью CSS.
Помните, HTML отвечает за разметку веб-страниц, а CSS — за их стилизацию? Совсем скоро мы расскажем, как создаются красивые и сложные таблицы в современной верстке, а в этой статье мы хотели дать ту базу знаний, которая поможет вам разобраться именно в разметке таблицы, а не в её прихорашивании.
Оглавление таблиц
Чтобы как-то назвать таблицу, используется тег , по английски заголовок.
В большинстве случаев первая строка таблицы описывает те значения, которые пойдут в колонках и как-то выделяется среди прочих строк.
Обратите внимание, что данные в первой строчке приобрели жирный шрифт и выровнялись по центру колонок.
Иногда в таблицах нужно выделить не только первую строку, но и первый столбец. Например так:
Внимательный читатель наверняка заметил, что первая ячейка в первой колонке пустая. Если вам нужна пустая ячейка в таблице — её все равно нужно создать, просто ничего не вписывать между тегами или . Если этого не сделать — браузер подвинет остальные ячейки, куда сочтет нужным и содержимое таблицы поплывет. Попробуйте сами в JSFiddle убрать элемент и увидите, что произойдет.
Объединение ячеек по вертикали
Бывает, что соседние ячейки имеют одинаковые данные, и их можно прописать один раз вместо нескольких.
Атрибут rowspan объединяет ячейки у соседних рядов (т.е. по вертикали).
Пример объединенных ячеек:
border — отвечает за толщину границы, значение задается по умолчанию в пикселях
cellpadding — расстояние от контента ячейки до границ. Если оно =»0″ — значит текст (или любой другой контент) вплотную прилегает к границам ячейки. В случае с текстом это не очень красиво , поэтому мы зададим его равным 4 пикселям.
cellspacing — расстояние между ячейками. Если оно =»0″ — значит границы ячеек накладываются друг на дружку. Если оно больше — значит каждая ячейка отстоит от другой на заданное расстояние и получается как-бы двойная рамка. Выглядит на любителя:
Если мы задали атрибут border, то по умолчанию cellspasing равен 2 пикселям. Поэтому если мы хотим границы, но при этом не хотим разрывов между ними — нужно указывать, что cellspasing=»0″
Здесь же вы можете видеть, как тесно тексту в ячейках — это потому, что применен cellpadding=»0″
Итак, как же работает атрибут rowspan? Прежде, чем сверстать таблицу — нарисуйте её от руки на листке бумаги или создайте в экселе, так вам будет проще разобраться во всех этих строчках и колонках.
Схематически нашу таблицу «Сравнение моделей» можно представить, как поле для игры в морской бой:
В ней есть 4 колонки и 4 строчки,
во второй колонке вторая и третья ячейки объединены — ставим кораблик.
В четвертой колонке совмещены третья и четвертая ячейка — и туда ставим кораблик.
Вот только в HTML мы пишем код не колонками, а строчками. Как же записать это в коде?
Очевидно, что первая строка без изменений — пишем и в нём 4 элемента .
Еще раз посмотрим на нашу таблицу, но уже с тегами. Читать нужно, как книгу — слева направо, сверху вниз:
А теперь наконец проверим, как это работает в редакторе:
Объединение ячеек по горизонтали
Атрибут colspan объединяет ячейки у соседних колонок (т.е. по горизонтали). Принцип здесь тот же, что и с rowspan
К примеру нам нужно создать вот такую таблицу:
Давайте снова прочитаем её слева направо, сверху вниз:
Схематично это можно отобразить так:
Теперь посмотрим на код и результат поближе:
Перфекционист скажет, что здесь колонки разной ширины и таблица из-за этого некрасивая. Да, браузер автоматически подстраивает ширину колонки под самый широкий текст, который в ней есть. Чтобы сделать колонки одинаковой ширины, им нужно задать какой-то фиксированный размер с помощью CSS. Поэтому красивыми мы научимся делать таблицы позже, когда познакомимся с CSS.
А пока всё. До встречи!
- ← Установка Eclipse (на примере Windows)
- Установка сертификата SSL на Ubuntu с Apache →