Создание таблиц в HTML. Все о HTML таблицах
В HTML для создания таблиц используются теги группы table. К ним относятся:
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Далее необходимо определить строки и ячейки — структуру таблицы.
Пример простой таблицы HTML
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Исходный код простой таблицы HTML
Ячейка 1
Ячейка 2
Ячейка 3
Ячейка 4
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 8
Ячейка 9 Заголовки таблицы HTML
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Пример HTML таблицы с заголовком th
| Volkswagen AG | Daimler AG | BMW Group |
|---|---|---|
| Audi | Mercedes-Benz | BMW |
| Skoda | Mercedes-AMG | Mini |
| Lamborghini | Smart | Rolls-Royce |
Исходный код таблицы HTML с заголовками th
Volkswagen AG
Daimler AG
BMW Group
Audi
Mercedes-Benz
BMW
Skoda
Mercedes-AMG
Mini
Lamborghini
Smart
Rolls-Royce Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan , у ячейки или , где x — количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут rowspan , у ячейки или , где x — количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
Текст ячейки Пример HTML таблицы с объединением ячеек
| Nissan | ||
|---|---|---|
| Модель | Комплектация | Наличие |
| Nissan Qashqai | VISIA | + |
| TEKNA | + | |
| Nissan X-Trail | ACENTA | + |
| CONNECTA | — | |
Исходный код таблицы HTML с объединенными ячейками
Nissan
Модель
Комплектация
Наличие
Nissan Qashqai
VISIA
+
TEKNA
+
Nissan X-Trail
ACENTA
+
CONNECTA
- Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Пример HTML таблицы с колонтитулами и подписью
| Характеристика | SUTA 09H 6R | SUTA 09HR6R | SUTA 15H 5R |
|---|---|---|---|
| Наличие | + | + | + |
| Мощность двигателя | 0,9 (90 л.с.) | 0,9 (90 л.с.) | 1,5 (90 л.с.) |
| Топливо | бензин | бензин | дизель |
| Норма токсичности | Евро-6 | Евро-6 | Евро-5 |
Исходный код таблицы с колонтитулами и подписью
Комплектации Renault Sandero Stepway
Характеристика
SUTA 09H 6R
SUTA 09HR6R
SUTA 15H 5R
Наличие
+
+
+
Мощность двигателя
0,9 (90 л.с.)
0,9 (90 л.с.)
1,5 (90 л.с.)
Топливо
бензин
бензин
дизель
Норма токсичности
Евро-6
Евро-6
Евро-5 Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Оба тега могут определять стили для одной или нескольких колонок. Атрибут span , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
Пример HTML таблицы с разделением на колонки
| ZEN 2E2C AL A | ZEN 2E2C J5 A | INTENSE 2E3C AL A | Характеристика |
|---|---|---|---|
| 1.5 (90 л.с.) | 1.2 (115 л.с.) | 1.5 (90 л.с.) | Мощность двигателя |
| дизель | бензин | дизель | Топливо |
| АКП6 (EDC) | АКП6 (EDC) | АКП6 (EDC) | Трансмиссия |
Исходный код таблицы HTML c и
ZEN 2E2C AL A
ZEN 2E2C J5 A
INTENSE 2E3C AL A
Характеристика
1.5 (90 л.с.)
1.2 (115 л.с.)
1.5 (90 л.с.)
Мощность двигателя
дизель
бензин
дизель
Топливо
АКП6 (EDC)
АКП6 (EDC)
АКП6 (EDC)
Трансмиссия Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
Cоздание таблицы в HTML
Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте следующую статью). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.
Теги и атрибуты таблиц
Вот основные элементы, которые нужны для создания таблиц:
- — контейнер, внутри которого располагается таблица (такой же, как для маркированных или для нумерованных списков).
- border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
- задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега , вне ячеек и строк.
- — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
- — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри обозреватель выделяет жирным и размещает по центру.
- — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег , столько ячеек в ней и будет: один тег — одна ячейка.
- позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега , если его нет, то после .
- используется для той же цели, что и . может содержать , но не наоборот.
- span — атрибут, задающий число столбцов, к которым применяются свойства контейнера .
- , и — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и в HTML-документе.
- colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
- rowspan объединяет ячейки по столбцам.
Пример создания таблицы
Создайте документ формата HTML и скопируйте в него следующий код:
Пример таблицы
| Назначение | Инструмент | |
|---|---|---|
| Разметка | HTML | XHTML |
| Оформление | CSS | |
| Разработка | PHP | Python |
В браузере документ будет выглядеть так:
Разберём, какие строчки кода за что отвечают.
- — открыли таблицу, задав ей толщину рамок.
- Инструменты создания сайтов — озаглавили её.
- — открыли строку.
- Назначение — создали ячейку с оформлением заголовка.
- Инструмент — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две. — закрыли строку. Аналогично создали остальные строки.
Разметка HTML XHTML — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки. — закрыли таблицу.
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
Как сделать таблицу в HTML? Теги таблицы HTML и их атрибуты
Таблица в HTML — это способ вывести на экран данные, упорядочив их в колонки и строки. Каждый элемент в таблице является составной частью и строки, и колонки.
В ячейках HTML таблицы могут храниться такие элементы как: заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Таблицы в HTML: Видео
В этом уроке мы рассмотрим такие вопросы:
И так, обо всем по порядку.
Как создать таблицу в HTML
Для того, чтобы добавить таблицу на веб-страницу нужно использовать тег . А для того, чтобы добавить строки и ячейки — теги и .
Давайте создадим простую таблицу используя вышеупомянутые теги. Откройте любой текстовый редактор (можно обычный Блокнот) и впишите в него следующий код:
Это ячейка №1 Это ячейка №2
Сохраните созданный файл с расширением .html (Например: index.html).
Вот мы и создали свою первую простую таблицу с одной строкой и двумя ячейками.
Давайте более детально рассмотрим вышеупомянутый код.
Разделение таблицы на логические части
Для разделения таблицы на таблицы на логические части используют теги , , .
Тег предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Он используется для группировки заголовочного содержимого таблицы и соответственно формирует верхний колонтитул таблицы.
Тег предназначен для хранения одной или нескольких строк и используется для группировки основного содержимого таблицы. Элемент должен быть расположен после тегов и (если таковые присутствуют), а также после тега .
Тег предназначен для хранения одной или нескольких строк, которые должны быть отображены внизу таблицы. По сути — это нижний колонтитул таблицы. Элемент должен быть расположен перед элементом в таблице. Несмотря на то, что тег в исходном коде определяется до тега , браузеры отображают его в самом низу таблицы.
Что даёт нам разделение таблицы на логические части?
Например, у вас очень большая таблица и вы выводите её на печать. В таком случае, браузер обрабатывает код таблицы и формирует её верхний и нижний колонтитул, которые будут напечатаны соответственно в верхней и нижней части каждой страницы. Также браузеры могут использовать вышеупомянутые элементы для включения прокрутки тела таблицы, независимо от заголовка и нижнего колонтитула.
Пример как разделить таблицу на логические части:
Наименование товара Цена, руб. Итого: 500 Это ячейка №1 Это ячейка №2
Как создать ячейку заголовка столбца таблицы в HTML
Пример как создать ячейку заголовка столбца таблицы в HTML:
Наименование товара Цена, руб. Итого: 500 Это ячейка №1 Это ячейка №2
Как создать строки и ячейки таблицы в HTML
Для создания строки таблицы HTML используют элемент . А для создания ячейки — тег .
Например, следующим кодом, мы добавили ещё одну строку с двумя ячейками в тело нашей таблицы (в раздел ):
Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №2 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как сделать заголовок таблицы в HTML
Пример как сделать заголовок таблицы в HTML:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №2 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как сделать границы таблицы в HTML
Для того, чтобы сделать границу таблицы в HTML используется атрибут border. Если задан атрибут border=»0″, то таблица будет без рамки. Если же border=»1″, то ширина границы будет равна 1px. Если border=»10″ — то 10px.
Пример как сделать границы таблицы в HTML:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №2 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как сделать отступ в таблице HTML
Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Он добавляет пустое пространство к ячейке и тем самым увеличивает ее размеры. Без cellpadding текст в таблице плохо воспринимается, так как он накладывается на границу ячеек (при условии, что граница таблицы не равна 0). А с cellpadding вокруг текста образуется свободное пространство и благодаря этому такой текст комфортнее читать.
Атрибут cellspacing задает расстояние между внешними границами ячеек. Если установлен атрибут border, то толщина границы принимается в расчет.
Пример как сделать отступ в таблице HTML:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №2 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как объединить ячейки таблицы в HTML
Для объединения двух и более ячеек в одну используются атрибуты colspan и rowspan тега .
Атрибут colspan устанавливает число ячеек, которые должны быть объединены по горизонтали.
Атрибут rowspan устанавливает число ячеек, которые должны быть объединены по вертикали.
Пример как объединить ячейки таблицы в HTML по вертикали:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №2 строки №1 Это ячейка №1 строки №2
Пример как объединить ячейки таблицы в HTML по горизонтали:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как сделать фон таблицы в HTML
Атрибут bgcolor устанавливает цвет фона ячейки.
Пример как сделать фон таблицы в HTML:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как задать размер таблицы в HTML
Атрибут width задает ширину элемента, атрибут height — его высоту. Таким образом, создавая таблицу в HTML, можно указать её ширину, или высоту (при необходимости).
Для этого нам достаточно прописать для элемента table атрибут width=»значение», или height=»значение». Значение может быть указано как в пикселях, так и в процентах.
Пример как установить ширину таблицы в HTML:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Группирование строк и столбцов таблицы
Тег предназначен для задания ширины и стиля одной или нескольких колонок таблицы. Этот тег позволяет уменьшить код таблицы за счет сокращения повторяющихся атрибутов, и при наличии этого тега браузер начинает показывать содержимое таблицы, не дожидаясь ее полной загрузки.
Тег можно использовать в комбинации с тегом , который определяет характеристики одной или нескольких колонок.
Тег также задает ширину и другие характеристики одной или нескольких колонок таблицы.
Пример как задать характеристики для столбцов таблицы:
Таблица №1. Пример таблицы HTML Наименование товара Цена, руб. Итого: 500 Это ячейка №1 строки №1 Это ячейка №1 строки №2 Это ячейка №2 строки №2
Как создать простую таблицу стилей CSS с помощью Notepad
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 11 человек(а).
Количество просмотров этой статьи: 6143.
В этой статье:
Notepad — один из текстовых редакторов, которые можно использовать для создания каскадной таблицы стилей (CSS) документа. После создания файла CSS в Notepad вы можете связать этот файл с веб-страницей так, что содержание веб-страницы может форматироваться вашей таблицей стилей.
Откройте программу Notepad.
Скопируйте следующий код:
@charset "utf-8";/* CSS Document*//*Define the body element's color*/bodybackground: # FFFFFF;>/*This section is for links*/a:linkfont-weight:normal; color:Navy>a:visitedfont-weight:normal; color:Green;>a:hoverfont-weight:bold; color: Red; font-variant:small-caps;>/*This section is for a paragraph section*/p font-style:italic; font-size:18px;>blue color:#0000FF;>/*This section is for the image's black border.*/img border-color: #000000; border:thick; border-style:ridge;>
#Вставьте код из «Шаг 2» в Notepad.
Сохраните файл в Notepad. Сохраните его под именем «SimpleCSS.css», нажав кнопку «File» и выбрав команду «Save». После нажатия кнопки «Save» отобразится диалоговое окно «Save As».
Назовите свой CSS-файл. Введите «SimpleCSS.css» или любое имя в текстовое поле «File Name» с расширением «.css».