Таблица с рамкой | htmlbook.ru
Рамка вокруг таблицы позволяет акцентировать на ней внимание, отделить от остального содержимого веб-страницы и расширить набор средств по дизайну таблиц.
Для создания рамки применяется стилевое свойство 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 {
font-weight: bold; /* Жирное начертание текста */
text-align: left; /* Выравнивание по левому краю */
}
</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> 
В данном примере добавляется стилевой класс с именем 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> 
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
Определение границ для таблиц и их ячеек
Определение границ для таблиц и их ячеек СодержимоеIndex 🔎︎
Задание предопределённого стиля обрамления
Выделите ячейки таблицы, которые требуется изменить.
-
Выберите один из заранее заданных стилей границ.
Это добавит выбранный стиль к текущему стилю обрамления ячеек таблицы. Чтобы очистить все стили обрамления, выберите в левой верхней части окна Обрамление пустой стиль границ.
org/HowToStep» dir=»auto»>На панели инструментов Таблица (Writer) или Линия и заливка щёлкните значок Обрамление. Откроется окно Обрамление.
Настройка стиля границ
Выделите ячейки таблицы, которые требуется изменить.
Choose Table — Properties — Borders (Writer) or Format — Cells — Borders (Calc).
В области Определяется пользователем выберите канты, которые должны появиться в обычной разметке. Переключить выделение канта можно, щёлкнув в области предварительного просмотра.
В случае выбора нескольких строк или столбцов можно изменить промежуточные линии между строками или столбцами. Выберите срединные маркеры в области Пользовательские.
Выберите для стиля границ стиль и цвет линии в области Линия. Эти параметры применяются ко всем линиям границы, относящимся к выбранному стилю границ.
- Повторите последние два шага для каждой стороны границы.
Select the distance between the border lines and the page contents in the Padding area.
Нажмите кнопку ОК, чтобы применить изменения.
Пожалуйста, поддержите нас!
Граница таблицы HTML
По умолчанию веб-браузеры не применяют границы к таблицам HTML. Нам нужно будет добавить стиль CSS к элементу
| № | Имя | Выполнить | Команда |
|---|---|---|---|
| 1 | Сачин Рамеш Тендулкар | 18426 | Индия |
| 2 | Кумар Чокшанада Сангаккара | 14234 | Шри-Ланка |
| 3 | Рики Томас Понтинг | 13704 | Австралия |
| 4 | Санат Теран Джаясурия | 13430 | Шри-Ланка |
| 5 | Денагамаж Пробот Махела де Сильва Джаявардене | 12650 | Шри-Ланка |
Стиль CSS для того же выглядит следующим образом:
Пример границы таблицы HTML
| № | Имя | Работа | Команда |
|---|---|---|---|
| 1 | Сачин Рамеш Тендулкар | 18426 | Индия |
| 2 | Кумар Чокшанада Сангаккара | 14234 | Шри-Ланка |
| 3 | Рики Томас Понтинг | 13704 | |
| 4 | Санат Теран Джаясурия | 13430 | Шри Ланка |
| 5 | Denagamage Proboth Mahela de Silva Jayawardene | 12650 | Шри-Ланка |
Приведенная выше таблица имеет границы.
Мы установили его, применив внутренний CSS. Удалите элемент стиля со всем его содержимым и посмотрите, что будет отображаться в таблице.