Горизонтальные и вертикальные рамки [6/23]

Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

• border-top

• border-right

• border-bottom

• border-left

Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.

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

Отступы внутри ячеек [7/23]

Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега <table>. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

• padding-top,

• padding-right,

• padding-bottom,

• padding-left.

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

td {

padding: 10px;

padding-left: 20px;

}

Отступы между ячейками [8/23]

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

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

Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

• с помощью атрибута cellspacing тега <table>

• или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Испытание: простая, но аккуратная таблица [9/23]

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

Подсказки:

1. Цвет рамок: lightgray.

2. Стили для body менять не надо.

3. Использовались только стандартные теги.

4. Стили применять только к табличным тегам: <table>, <td>.

5. Размеры отступов кратны 5.

6. При стилизации рамок в CSS не забывайте слово solid.

Если отображение в мини-браузере сильно отличается от образца, то используйте вкладку «Различия», в которой отображается то, как академия видит ваш HTML-код.

table/table9.html

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Простая, но аккуратная таблица</title>

<style rel="stylesheet">

body {

width: 350px;

margin: 0;

padding: 0 10px;

font-size: 14px;

font-family: Arial, sans-serif;

}

table {

border-collapse: collapse;

border-spacing: 5px;

}

td {

padding: 10px;

border-bottom: 2px solid lightgray;

}

</style>

</head>

<body>

<h1>Посещения по городам</h1>

<table>

<tr>

<td>Город</td>

<td>Посещения</td>

<td>Страниц</td>

<td>Время</td>

</tr>

<tr>

<td>СПб</td>

<td>199</td>

<td>18,02</td>

<td>00:13:45</td>

</tr>

<tr>

<td>Москва</td>

<td>69</td>

<td>1,48</td>

<td>00:00:44</td>

</tr>

<tr>

<td>Киев</td>

<td>5</td>

<td>13,43</td>

<td>00:18:07</td>

</tr>

</table>

</body>

</html>