Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального
содержимого веб-страницы и расширить набор средств по дизайну таблиц.
Для создания рамки применяется стилевое свойство border, которое добавляется
к селектору TABLE. Также эффектно смотрится таблица,
когда цвет рамки совпадает с цветом фона заголовка (тег <th>),
как показано на рис. 1.
Рис. 1. Таблица с рамкой
В примере 1 показано, как создать такую простую таблицу.
Пример 1. Создание рамки вокруг таблицы
<!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>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблицы */
border: 1px solid black; /* Рамка вокруг таблицы */
}
TD, TH {
padding: 3px; /* Поля вокруг содержимого ячеек */
}
TH {
text-align: left; /* Выравнивание по левому краю */
background: black; /* Цвет фона */
color: white; /* Цвет текста */
}
</style>
</head>
<body>
<table cellspacing="0">
<tr>
<th> </th><th>2004</th><th>2005</th><th>2006</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>
В данном примере выравнивание текста во всех ячейках происходит по левому краю,
что не всегда удобно. На рис. 2 показана таблица, у которой содержимое
ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается
по левому краю.
Рис. 2. Таблица с рамкой
Изменение выравнивания происходит с помощью стилевого свойства text-align,
при этом для отдельных ячеек требуется вводить новый класс, чтобы гибко управлять
некоторыми характеристиками (пример 2).
Пример 2. Таблица с выравниванием содержимого ячеек
<!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>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблицы */
border: 2px solid black; /* Рамка вокруг таблицы */
background: silver; /* Цвет фона таблицы */
}
TD, TH {
text-align: center; /* Выравнивание по центру */
padding: 3px; /* Поля вокруг содержимого ячеек */
}
TH {
background: #4682b4; /* Цвет фона */
color: white; /* Цвет текста */
border-bottom: 2px solid black; /* Линия снизу */
}
.
В данном примере добавляется стилевой класс с именем lc,
он добавляется к ячейкам левой колонки для изменения выравнивания содержимого
и создания жирного начертания текста.
Эффектно смотрится таблица, у которой фон заголовка выполнен в виде градиента
(рис. 3). При этом создание подобной таблицы не представляет особой сложности.
Рис. 3. Таблица с градиентным заголовком
При этом в качестве фона применяется заранее заготовленный рисунок, например,
как показано на рис. 4.
Рис. 4. Заготовка для создания фона
Для добавления фона только к одной строке таблицы имеется несколько способов.
Можно воспользоваться тегом <thead>, который
предназначен для хранения одной или нескольких строк, которые представлены вверху
таблицы. Для этого тега добавляем стилевое свойство background,
оно одновременно определяет цвет фона и фоновый рисунок, а также его повторяемость
(пример 3).
Пример 3. Использование фонового рисунка
<!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>
<style type="text/css">
TABLE {
width: 300px; /* Ширина таблицы */
border: 2px solid #2e8b57; /* Рамка вокруг таблицы */
}
THEAD {
background: #2e8b57 url(images/tablebg.
gif) repeat-x; /* Параметры фона */
}
TD, TH {
padding: 3px; /* Поля вокруг содержимого ячеек */
text-align: center; /* Выравнивание по центру */
}
.lc {
font-weight: bold; /* Жирное начертание текста */
text-align: left; /* Выравнивание по левому краю */
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th> </th><th>2004</th><th>2005</th><th>2006</th>
</tr>
</thead>
<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>
В данном примере тег <thead> охватывает только
верхнюю строку таблицы с ее заголовком.
Для этого тега в стилях одновременно
устанавливается цвет фона и картинка, которая приведена на рис. 4. Хотя
цвет под рисунком не виден, лучше его всегда добавлять, например, для случая
отключения пользователем отображения изображений в браузере.
CSSтаблицы
HTML по теме
Тег <table>
Тег <td>
Тег <th>
Тег <thead>
CSS по теме
background
border
border-bottom
text-align
63. Рамки для таблиц, строк и ячеек в HTML — Таблицы — codebra
Рамка таблиц важный элемент. Она универсальна и часто используема. В этом уроке будет разобрано, как сделать рамку таблицы, ячейки и строки при помощи атрибута, но основная часть урока будет направлена на свойства CSS, потому что рамка становится универсальной при использовании стилей CSS.
Создание рамки при помощи атрибута
Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:
Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:
Код CSS
td { border: 5px solid #CCCCCC; }
Рамка слева, справа, снизу и сверху
При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black; рамка справа border-right: 1px dotted #FF0000; рамка снизу border-bottom: 10px solid #000000; рамка сверху border-top: 1px solid green. Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:
Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius. Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:
Дабы текст не был впритык к рамке, нужно делать отступ от нее. В этом нам поможет свойство padding. Оно тоже многофункционально, но мы рассмотрим его частично, все по той же причине. Будем использовать только одно значение. Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:
Свойство border для создания границОтступы, рамки, поля
Написание модулей в PythonЗнакомство с Python
Работа с файлами в Python Знакомство с Python
Обработка исключений (try/except) в PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Предыдущий урок «62. Практика 2: colspan и rowspan» Следующий урок «64. Cтруктурирование HTML таблиц»
»
В атрибутах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше
Атрибут
Быстрое и простое создание HTML-таблицы с помощью нашего примера кода
Что делает
?
Атрибут рамки использовался для определения видимых границ таблицы. Теперь он устарел и больше не должен использоваться.
FRAME определяет видимость внешних границ. На следующих нескольких страницах мы рассмотрим все девять значений FRAME . FRAME и FRAME имеют раздражающий способ изменения значений по умолчанию друг друга. Чтобы упростить вам жизнь, вот эмпирическое правило: если вы используете КАДР , также используйте КАДР и ГРАНИЦА . Легче не запутаться.
Содержание
1
2
3
4
5
6
7
8
9
10 Значения атрибута frame
ВЫШЕ означает, что граница должна быть только поверх таблицы.
Применение атрибута к таблице, как показано в приведенном выше коде, дает нам странную таблицу
Имя
Еда
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
НИЖЕ означает, что должна отображаться только нижняя граница:
Использование этого дает нам эту неэстетичную таблицу:
Имя
Food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
BORDER означает то же самое, что и FRAME=BOX .
FRAME=BOX означает, что границы должны быть со всех четырех сторон. BOX обычно используется в сочетании с RULES=NONE для создания таблицы с внешними границами, но без внутренних границ:
Использование этого пара атрибут-значение дает нам эту таблицу:
Name
Food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
< table frame="hsides">
FRAME=HSIDES ( H по горизонтали SIDES ) означает, что должны быть границы на верхней и нижней сторонах таблицы.
Использование атрибута дает нам следующую таблицу:
90 перемешанный тофу
Имя
Еда
Звездоцвет
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
FRAME=LHS ( L eft H и S ide) означает, что с левой стороны таблицы должна быть только внешняя граница.
Использование атрибута дает следующую таблицу:
37 7 9069 9000 Мико
Имя
Еда
Звездоцвет
овощной рисовый суп
Энди
хумус
PING
Французский тост
<кадра с таблицей = ”RHS”>
рама = RHS ( R Iight H и S IDE *) означает, что будет только OTTER HID с левой стороны стола.
Использование атрибута дает следующую таблицу:
111111111111111111. внешняя граница.
Имя
Еда
Звездоцвет
перемешанный тофу
Miko
Овощный рисовый суп
ANDY
ХУММС
PING
FRENCH TOAST
Использование атрибута дает следующую таблицу:
Имя
Еда
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
FRAME=VSIDES ( V ertical SIDES ) означает, что слева и справа от таблицы должны быть границы.
Использование атрибута создает эту таблицу:
Name
Food
Starflower
stir fied tofu
Miko
vegetable rice soup
Andy
hummus
Ping
french toast
Values кадра
Атрибут
Имя значения
Примечания
hsides
Атрибут frame использовался в элементе для управления отображением внешней границы. Значение frame=»hsides» указывает, что границы должны быть нарисованы сверху и снизу таблицы. Этот атрибут устарел в HTML5 и больше не должен использоваться. Чтобы добиться эффектов границ на таблицах, используйте CSS.
void
vsides
Адам Вуд
Адам — технический писатель, специализирующийся на документации для разработчиков и учебных пособиях.
Search HTML.com
Search for:
Most Popular
Тег HTML
Тег HTML Body: Master The Most Important HTML Element Now
На рис. 2 показана таблица, у которой содержимое
ячеек выравнивается по центру за исключением левой колонки, где текст выравнивается
по левому краю.
3). При этом создание подобной таблицы не представляет особой сложности.
Далее пример:
Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:
В этом нам поможет свойство 
Узнать больше
внешняя граница.
Значение frame=»hsides» указывает, что границы должны быть нарисованы сверху и снизу таблицы. Этот атрибут устарел в HTML5 и больше не должен использоваться. Чтобы добиться эффектов границ на таблицах, используйте CSS.