Создание таблиц

www-html.ru

Обычная версия

Таблица состоит из строк и столбцов ячеек, которые могут содержать контент и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты контента и рисунков.

Для добавления таблицы на web-страницу используется тег-контейнер <TABLE>. Таблица должна содержать хотя бы одну строку и колонку (пример 1).

Пример 1. Создание таблицы

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
</head>
<body>

<table>
<tr>
<td>Содержимое таблицы</td>
</tr>
</table>

</body>
</html>

Для добавления строк используется тег <TR>. Чтобы разделить строки на колонки применяются теги <TD> и <TH> (пример 2). Разница между этими тегами следующая. Тег <TH> предназначен для разработки заголовков, содержимое такой ячейки обозначается жирным начертанием и выравнивается по центру (пример 2). В остальном, действуют эти теги одинаково.

Пример 2. Ячейки таблицы

Валидный HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
</head>
<body>

<table border="1">
<tr>
 <th>Ячейка 1</th>
 <td>Ячейка 2</td>
</tr>
<tr>
 <th>Ячейка 3</th>
 <td>Ячейка 4</td>
</tr>
</table>

</body>
</html>

Ниже показано расположение ячеек таблицы.

Рис. 1

Рис. 1. Вид таблицы

Особенности таблиц

У каждого параметра таблицы есть свое значение установленное по умолчанию. Это означает, что если какой-то атрибут пропущен, то неявно он все равно присутствует, причем с некоторым значением. Из-за чего вид таблицы может оказаться совсем другим, нежели предполагал разработчик. Чтобы понимать, что можно ожидать от таблиц, следует знать их явные и неявные особенности, которые перечислены далее.



Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект