HTML Основы


HTML Расширенный


HTML Примеры


HTML Справка




Таблицы


назад вперед

Пример

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

Примеры

Таблицы

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

Рамки таблиц

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


Таблицы

Таблица вставляется с помощью тега <table>. Таблица состоит из строк (элемент <tr>), каждая строчка состоит из одной или нескольких ячеек с данными (элемент <td>). Ячейки с данными могут содержать текст, изображения, списки, параграфы, формы, горизонтальные линии, таблицы и т.д.

<table border="1">
<tr>
<td>Первая строчка, первая ячейка</td>
<td>Первая строчка, вторая ячейка</td>
</tr>
<tr>
<td>Вторая строчка, первая ячейка</td>
<td>Вторая строчка, вторая ячейка</td>
</tr>
</table>

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

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

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

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

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

<table border="1">
<tr>
<td>Первая строчка, первая ячейка</td>
<td>Первая строчка, вторая ячейка</td>
</tr>
</table>

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

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

<table border="1">
<tr>
<th>Заголовок</th>
<th>Еще один заголовок</th>
</tr>
<tr>
<td>Строчка 1, ячейка 1</td>
<td>Строчка 1, ячейка 2</td>
</tr>
<tr>
<td>Строчка 2, ячейка 1</td>
<td>Строчка 2, ячейка 2</td>
</tr>
</table>

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

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

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

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

<table border="1">
<tr>
<td>Строчка 1, ячейка 1</td>
<td>Строчка 1, ячейка 2</td>
</tr>
<tr>
<td>Строчка 2, ячейка 1</td>
<td></td>
</tr>
</table>

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

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

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

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

<table border="1">
<tr>
<td>Строчка 1, ячейка 1</td>
<td>Строчка 1, ячейка 2</td>
</tr>
<tr>
<td>Строчка 2, ячейка 1</td>
<td>&nbsp;</td>
</tr>
</table>

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

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

Советы

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Cell padding

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

Cell spacing

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

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

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

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

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

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

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

Атрибут frame

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

Атрибуты frame и border

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


Теги таблиц

Тег Описание
<table> Вставка таблицы
<th> Заголовки в таблице
<tr> Строка в таблице
<td> Ячейка в таблице
<caption> Название таблицы
<colgroup> Группировка нескольких колонок в таблице для применения к ним одинаковых атрибутов
<col> Задание атрибутов одной или нескольких колонок в таблице
<thead> Группировка заголовков таблицы
<tbody> Группировка основного содержимого («тела») таблицы
<tfoot> Группировка раздела итого (footer) в таблице


Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА




ССЫЛКИ


Подпишись на новости сайта