|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Таблицы
Пример
| Яблоки | 25% |
| Бананы | 30% |
| Апельсины | 15% |
| Остальное | 30% |
Примеры
Пример демонстрирует, как вставить таблицу в html-документ.
Как изменить рамку вокруг таблицы.
Таблицы
Таблица вставляется с помощью тега <table>. Таблица состоит из строк (элемент <tr>), каждая строчка состоит из одной или нескольких ячеек с данными (элемент <td>). Ячейки с данными могут содержать текст, изображения, списки, параграфы, формы, горизонтальные линии, таблицы и т.д.
<tr>
<td>Первая строчка, первая ячейка</td>
<td>Первая строчка, вторая ячейка</td>
</tr>
<tr>
<td>Вторая строчка, первая ячейка</td>
<td>Вторая строчка, вторая ячейка</td>
</tr>
</table>
Как это будет выглядеть в браузере:
| Первая строчка, первая ячейка | Первая строчка, вторая ячейка |
| Вторая строчка, первая ячейка | Вторая строчка, вторая ячейка |
Таблицы и атрибут border
Если вы не укажете атрибут border, таблица будет отображена без рамок. Иногда это бывает полезно, но в большинстве случаев вы скорее всего захотите отобразить рамки таблицы.
Для их отображения надо использовать атрибут border:
<tr>
<td>Первая строчка, первая ячейка</td>
<td>Первая строчка, вторая ячейка</td>
</tr>
</table>
Заголовки в таблице
Заголовки в таблицу вставляются с помощью тега <th>
<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 |
Пустые ячейки в таблице
Пустые ячейки не очень хорошо отображаются во многих браузерах:
<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 отображает рамки!).
Чтобы избежать этого и отобразить рамки вокруг пустой ячейки, добавьте неразрывный пробел ( ) в пустые ячейки:
<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 |
Советы
Теги <thead>,<tbody> и <tfoot> используются редко из-за неполной поддержки в браузерах. Ожидается, что это будет исправлено в будущих версиях XHTML.
Больше примеров
Пример демонстрирует таблицы без рамок.
Пример демонстирует как отображать заголовки в таблице.
Пример демонстирует использование неразрывного пробела (" ") для правильного отображения пустых ячеек.
Пример демонстирует таблицу с названием.
Таблицы с объединенными строками/столбцами
Пример демонстрирует объединение несольких ячеек в стоблцах/строках таблицы.
Пример демонстирует как отображаются другие элементы в таблице.
Пример демонстирует использование атрибута cellpadding для увеличения полей вокруг содержимого ячеек.
Пример демонстирует использование атрибута cellspacing для изменения расстояния между ячейками.
Изменение фонового рисунка/цвета таблицы
Пример демонстирует, как можно изменить фон таблицы или использовать в качестве фона изображение.
Изменение фоного рисунка/цвета ячейки таблицы
Пример демонстирует, как можно изменить фон ячейки в таблице или использовать в качестве фона изображение.
Выравнивание содержимого ячейки
Пример демонстирует использование атрибута align для выравнивания содержимого ячейки.
Использование атрибута frame для контролирования рамок вокруг таблицы.
Использование атрибутов frame и border для контролирования рамок таблицы.
Теги таблиц
| Тег | Описание |
|---|---|
| <table> | Вставка таблицы |
| <th> | Заголовки в таблице |
| <tr> | Строка в таблице |
| <td> | Ячейка в таблице |
| <caption> | Название таблицы |
| <colgroup> | Группировка нескольких колонок в таблице для применения к ним одинаковых атрибутов |
| <col> | Задание атрибутов одной или нескольких колонок в таблице |
| <thead> | Группировка заголовков таблицы |
| <tbody> | Группировка основного содержимого («тела») таблицы |
| <tfoot> | Группировка раздела итого (footer) в таблице |
