Как вставить таблицн в HTML // Вебшкола онлайн

 back-5844865 next-1333255

Яблоки 25%
Бананы 30%
Апельсины 15%
Остальное 30%

Таблицы

Пример демонстрирует, как вставить таблицу в html-документ.

Рамки таблиц

Как изменить рамку вокруг таблицы.

Таблица вставляется с помощью тега

. Таблица состоит из строк (элемент ), каждая строчка состоит из одной или нескольких ячеек с данными (элемент

). Ячейки с данными могут содержать текст, изображения, списки, параграфы, формы, горизонтальные линии, таблицы и т.д.

Первая строчка, первая ячейка Первая строчка, вторая ячейка
Вторая строчка, первая ячейка Вторая строчка, вторая ячейка

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

Первая строчка, первая ячейка Первая строчка, вторая ячейка
Вторая строчка, первая ячейка Вторая строчка, вторая ячейка

Таблицы и атрибут border

Если вы не укажете атрибут border, таблица будет отображена без рамок. Иногда это бывает полезно, но в большинстве случаев вы скорее всего захотите отобразить рамки таблицы.

Для их отображения надо использовать атрибут border:

Первая строчка, первая ячейка Первая строчка, вторая ячейка

Заголовки в таблице

Заголовки в таблицу вставляются с помощью тега

Заголовок Еще один заголовок
Строчка 1, ячейка 1 Строчка 1, ячейка 2
Строчка 2, ячейка 1 Строчка 2, ячейка 2

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

Заголовок Еще один заголовок
Строчка 1, ячейка 1 Строчка 1, ячейка 2
Строчка 2, ячейка 1 Строчка 2, ячейка 2

Пустые ячейки в таблице

Пустые ячейки не очень хорошо отображаются во многих браузерах:

Строчка 1, ячейка 1 Строчка 1, ячейка 2
Строчка 2, ячейка 1

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

Строчка 1, ячейка 1 Строчка 1, ячейка 2
Строчка 2, ячейка 1

Заметьте, что исчезли рамки вокруг пустой ячейки (Mozilla Firefox отображает рамки!).

Чтобы избежать этого и отобразить рамки вокруг пустой ячейки, добавьте неразрывный пробел ( ) в пустые ячейки:

Строчка 1, ячейка 1 Строчка 1, ячейка 2
Строчка 2, ячейка 1  

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

Строчка 1, ячейка 1 Строчка 1, ячейка 2
Строчка 2, ячейка 1  

Советы

Теги , и используются редко из-за неполной поддержки в браузерах. Ожидается, что это будет исправлено в будущих версиях XHTML.

Больше примеров

Таблицы без рамок

Пример демонстрирует таблицы без рамок.

Заголовки в таблице

Пример демонстирует как отображать заголовки в таблице.

Пустые ячейки

Пример демонстирует использование неразрывного пробела (» «) для правильного отображения пустых ячеек.

Таблицы с названием

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

Таблицы с объединенными строками/столбцами

Пример демонстрирует объединение несольких ячеек в стоблцах/строках таблицы.

Теги в таблице

Пример демонстирует как отображаются другие элементы в таблице.

Cell padding

Пример демонстирует использование атрибута cellpadding для увеличения полей вокруг содержимого ячеек.

Cell spacing

Пример демонстирует использование атрибута cellspacing для изменения расстояния между ячейками.

Изменение фонового рисунка/цвета таблицы

Пример демонстирует, как можно изменить фон таблицы или использовать в качестве фона изображение.

Изменение фоного рисунка/цвета ячейки таблицы

Пример демонстирует, как можно изменить фон ячейки в таблице или использовать в качестве фона изображение.

Выравнивание содержимого ячейки

Пример демонстирует использование атрибута align для выравнивания содержимого ячейки.

Атрибут frame

Использование атрибута frame для контролирования рамок вокруг таблицы.

Атрибуты frame и border

Использование атрибутов frame и border для контролирования рамок таблицы.

Теги таблиц

Тег Описание

Вставка таблицы
Заголовки в таблице
Строка в таблице
Ячейка в таблице
Название таблицы
Группировка нескольких колонок в таблице для применения к ним одинаковых атрибутов
Задание атрибутов одной или нескольких колонок в таблице
Группировка заголовков таблицы
Группировка основного содержимого («тела») таблицы
Группировка раздела итого (footer) в таблице

 back-5844865 next-1333255