www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > Оформление таблиц > Простая таблица

Простая таблица

контентовая версия  

Простая таблица характеризуется тем, что в ней не используется цветовое решение, а визуальное отделение одного блока данных от другого происходит с помощью линий.

Вначале просмотрим таблицу без рамки, при этом ее контур на web-странице формируется горизонтальной линией сверху и снизу от таблицы (рис. 1).

Рис. 1. Таблица с горизонтальными линиями

Рис. 1. Таблица с горизонтальными линиями

Верхний заголовок таблицы (тег <TH>) также отделяется от ее данных линией, но уже меньшей толщины.

Для добавления линий воспользуемся стилевыми свойствами border-top и border-bottom, они устанавливают линию определенной толщины сверху и снизу от элемента. Применяя эти параметры к селектору TABLE, получим нужный вид таблицы. Аналогично указывается линия внизу ячеек с заголовком, только в этом случае border-bottom следует добавляем к селектору TH, как показано в примере 1.

Пример 1. Применение горизонтальных линий

Валидный HTML
Валидный CSS
<!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=windows-1251">
<title>Таблица</title>
<style type="text/CSS (ЦСС)">
TABLE {
 width: 300px; /* Ширина таблицы */
 border-top: 2px solid #000; /* Линия сверху таблицы */
 border-bottom: 2px solid #000; /* Линия внизу таблицы */
}

TD, TH {
 padding: 3px; /* Поля вокруг содержимого ячеек */
}

TH {
 text-align: left; /* Выравнивание контента по левоой стороне */
 border-bottom: 1px solid #000; /* Линия под верхним заголовком */
}
</style>
</head>
<body>

<table cellspacing="0">
 <tr>
  <th>&nbsp;</th>
  <th>2004</th>
  <th>2009</th>
  <th>2009</th>
 </tr>
 <tr>
  <td>Рубины</td>
  <td>43</td>
  <td>51</td>
  <td>79</td>
 </tr>
 <tr>
  <td>Изумруды</td>
  <td>28</td>
  <td>34</td>
  <td>48</td>
 </tr>
 <tr>
  <td>Сапфиры</td>
  <td>29</td>
  <td>57</td>
  <td>36</td>
 </tr>
</table>

</body>
</html>

В данном примере меняется выравнивание содержимого ячеек <TH> по левоой стороне, поскольку исходно для таких ячеек оно установлено по центру.

Следующий вариант таблицы еще проще выглядит и содержит всего две линии, которые разбивают содержимое таблицы на три блока (рис. 2). Первый блок содержит названия драгоценных камней, второй — годы, а третий — набор чисел.

Рис. 2. Простая таблица, оформленная при помощи линий

Рис. 2. Простая таблица, оформленная при помощи линий

Горизонтальную линию создаем путем добавления стилевого свойства border-bottom к селектору TH, как это было показано в примере 1. А для вертикальной линии заводим новый класс, назовем его vl, который устанавливает линию справа, и добавляем класс к определенным ячейкам (пример 2).

Пример 2. Использование линий в таблице

Валидный HTML
Валидный CSS
<!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=windows-1251">
<title>Таблица</title>
<style type="text/CSS (ЦСС)">
TABLE {
 width: 300px; /* Ширина таблицы */
}

TD, TH {
 padding: 3px; /* Поля вокруг содержимого ячеек */
}

TH {
 text-align: left; /* Выравнивание по левоой стороне */
 border-bottom: 1px solid #000; /* Линия снизу */
}

.vl {
 border-right: 1px solid #000; /* Линия справа */
}
</style>
</head>
<body>

<table cellspacing="0">
 <tr>
  <th class="vl">&nbsp;</th>
  <th>2004</th>
  <th>2009</th>
  <th>2009</th>
 </tr>
 <tr>
  <td class="vl">Рубины</td>
  <td>43</td>
  <td>51</td>
  <td>79</td>
 </tr>
 <tr>
  <td class="vl">Изумруды</td>
  <td>28</td>
  <td>34</td>
  <td>48</td>
 </tr>
 <tr>
  <td class="vl">Сапфиры</td>
  <td>29</td>
  <td>57</td>
  <td>36</td>
 </tr>
</table>

</body>
</html>

В данном примере класс vl, который устанавливает вертикальную линию справа, добавляется ко всем ячейкам первой колонки, это тег <TH> и <TD>.

Статья опубликована: 07.10.2009 Последнее обновление: 20.04.2009
Поиск по сайту
Оформление таблиц
Разделы
Теги по теме

TABLE
Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

TD
Предназначен для разработки одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE.

TH
Тег TH предназначен для разработки одной ячейки таблицы, которая обозначается как заголовочная. контент в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру.

TR
Тег TR служит контейнером для разработки строки таблицы.

CSS (ЦСС) по теме

border-bottom
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

text-align
Определяет горизонтальное выравнивание контента в пределах элемента.

width
Устанавливает ширину блочных или заменяемых элементов. Ширина не включает толщину границ вокруг элемента, значение отступов и полей.

border-top
Одновременно задает толщину, стиль и цвет границы сверху элемента.

Copyright 2009 Все права защищены

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