belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

CSS >>>

2.4. Оформление внешнего вида таблиц

После создания таблицы стандартными средствами HTML внешний вид можно изменить при помощи CSS. Так для того, чтобы расположить заголовок сверху или снизу таблицы, нужно всего лишь воспользоваться наследуемым свойством caption-side, которое может принимать соответствующие значения:

Также на внешний вид таблицы очень сильно влияет способ отображения границ ячеек таблицы. Дело в том, что по умолчанию каждая ячейка имеет собственную границу (рамку), в результате чего пользователь видит у смежных ячеек не общую границу, а две границы, которые находятся на определенном расстоянии друг от друга (см. пример 2.11). Для того, чтобы изменить такое поведение браузера, нужно воспользоваться наследуемым свойством border-collapse, принимающим следующие значения:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Таблицы</title>
	<style>
		.table_1{
		caption-side: bottom;
		border-collapse: collapse;
		}
	</style>
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №1</caption>
		<tr>
			<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
		</tr>
	</table>
</body>
</html>

Пример 2.11. Форматирование внешнего вида таблицы (пример №1)

Если значение свойства border-collapse установлено, как separate, то возникает необходимость регулирования расстояния между границами смежных ячеек. В этом случае используется наследуемое свойство border-spacing, которое принимает в качестве значения любые единицы измерения длины, используемые в CSS, т.е. px, em и т.д. При чем, если указано только одно значение, то оно определяет расстояние между ячейками как по вертикали, так и по горизонтали, а если указывается два значения, то первое устанавливает расстояние по вертикали, а второе – по горизонтали (см. пример 2.12).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Таблицы</title>
	<style>
		.table_1{
		caption-side: top;
		border-collapse: separate;
		empty-cells: hide;
		border-spacing: 15px;
		}
	</style>
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №1</caption>
		<tr>
			<td></td><td>Ячейка 1.2</td>
		</tr>
		<tr>
		<!-- Неразрывный пробел считается символом -->	
			<td>Ячейка 2.1</td><td>&nbsp;</td>
		</tr>
	</table>
</body>
</html>

Пример 2.12. Форматирование внешнего вида таблицы (пример №2)

Также имеется возможность регулировать отображение границ и фона ячеек, у которых отсутствует содержимое, т.е. пустых ячеек, при помощи наследуемого свойства empty-cells. Данное свойство может принимать следующие значения:

Опять же, это возможно только, если значение свойства border-collapse установлено, как separate. Отметим, что ячейка считается браузером пустой, если у нее отсутствуют любые символы, за исключением пробельных, либо значение свойства visibility установлено, как hidden (это свойство мы рассмотрим далее).

Имеется в CSS и возможность управления процессом формирования браузером макета таблицы, точнее ширины ячеек. Для этого используется ненаследуемое свойство table-layout (см. пример 2.13). Свойство может принимать следующие значения:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Таблицы</title>
	<style>
		.table_1{
		caption-side: top;
		border-collapse: collapse;
		table-layout: fixed;
		width: 100px;
		}
	</style>
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №2</caption>
		<tr>
			<td>Начальная ячейка</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
		</tr>
	</table>
</body>
</html>

Пример 2.13. Форматирование внешнего вида таблицы (пример №3)

В конце хотелось бы опять напомнить, что все перечисленные свойства могут принимать значение inherit, которое указывает браузеру, что для элемента наследуется значение аналогичного свойства родительского элемента.

Контрольные вопросы и задания

  1. Как задать расположение заголовка таблицы?
  2. Имеется ли в CSS возможность слияния соответствующих границ смежных ячеек?
  3. Если границы смежных ячеек раздельны, можно ли задать расстояние между ними по своему усмотрению?

Словарь новых английских слов

word [ˈwɜːd] – слово.
letter [ˈlɛtə] – буква, литера.
spacing [ˈspeɪsɪŋ] – интервал, расстояние.
inherit [ɪnˈhɛrɪt] – наследовать.
indent [ɪnˈdɛnt] – отступ, абзац.
justify [ˈdʒʌstɪfʌɪ] – выровнять строку.
center [ˈsentər] – центр.
direction [dɪˈrɛkʃ(ə)n] – направление.
embed [ɪmˈbɛd] – вставлять, внедрять.
override [ˌəʊvəˈraɪd] – перебивать, не принимать во внимание.
space [speɪs] – пробел, интервал, место.
wrap [ræp] – перенос на строку, обертывать.
line [laɪn] – линия, строка.
capitalize [ˈkapɪt(ə)lʌɪz] – писать прописными буквами.
uppercase [ˈʌpəkeɪs] – верхний регистр.
lowercase [ˈləʊəkeɪs] – нижний регистр.
overline [ˈəʊvəlaɪn] – надчеркивание.
underline [ˌʌndəˈlaɪn] – линия подчеркивающая слово.
through [θruː] – прохождение через.
font [fɒnt] – комплект шрифта.
family [ˈfamɪli] – семья, семейство.
serif [ˈsɛrɪf] – засечка, шрифт с засечками.
sans [sænz] – без (предлог).
cursive [ˈkəːsɪv] – курсив, рукописный текст.
fantasy [ˈfantəsi] – воображение, фантазия.
monospace [ˈmɒnəʊspeɪs] – моноширинный шрифт.
size [saɪz] – размер, величина, объем.
small [smɔːl] – маленький, небольшой.
medium [ˈmiːdɪəm] – средний, умеренный.
large [lɑːdʒ] – большой, крупный.
bold [bəʊld] – жирный (шрифт).
light [lʌɪt] – светлый.
weight [weɪt] – вес.
italic [ɪˈtalɪk] – курсивный.
oblique [əˈbliːk] – косой, наклонный.
variant [ˈvɛərɪənt] – вариант, модификация.
caption [ˈkapʃ(ə)n] – заголовок.
icon [ˈaɪkɒn] – иконка.
message [ˈmɛsɪdʒ] – сообщение.
box [bɒks] – коробка, ящик.
circle [ˈsəːk(ə)l] – круг, кольцо.
square [skwɛː] – квадрат, квадратный.
decimal [ˈdɛsɪm(ə)l] – десятичный.
separate [ˈseprət] – раздельный, разделять.
collapse [kəˈlaps] – сплющивание.
border [ˈbɔːdə] – граница.
hide [haɪd] – прятать.
show [ʃəʊ] – показывать.
fixed [fɪkst] – закрепленный, фиксированный.
Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх