Опубликован: 28.11.2008 | Доступ: свободный | Студентов: 7969 / 742 | Оценка: 4.49 / 4.28 | Длительность: 37:04:00
Лекция 33:

Оформление таблиц

Неполные сетки

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

 Таблица со светло-серыми границами только на внешних краях и по  нижнему краю каждой ячейки

Рис. 33.14. Таблица со светло-серыми границами только на внешних краях и по нижнему краю каждой ячейки

Код CSS для этого представления имеет вид:

table {
  width: 100%;
  border: 1px solid #999;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

th, td {
  border-bottom: 1px solid #999;
  width: 25%;
}

caption {
  font-weight: bold;
  font-style: italic;
}

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

Таблица с границами только по верху и низу тела таблицы

Рис. 33.15. Таблица с границами только по верху и низу тела таблицы

Код CSS для такой таблицы будет следующим:

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

tbody {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

tbody th, tfoot th {
  border: 0;
}

th.name {
  width: 25%;
}

th.location {
  width: 20%;
}

th.lasteruption {
  width: 30%;
}

th.eruptiontype {
  width: 25%;
}

tfoot {
  text-align: center;
  color: #555;
  font-size: 0.8em;
}

Внутренние границы

Иногда желательно удалить внешнюю границу, но сохранить внутреннюю сетку границ, как на рис. 33.16:

Таблица с внутренней сеткой

Рис. 33.16. Таблица с внутренней сеткой

Чтобы реализовать это для всех современных браузеров, необходимо добавить класс в ячейки th и td, которые появляются последними в каждой строке, следующим образом:

...
<tr>
  <th scope="col">Volcano Name</th>
  <th scope="col">Location</th>
  <th scope="col">Last Major Eruption</th>
  <th scope="col" class="last">Type of Eruption</th>
</tr>
  ...

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

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

th, td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

th.last, td.last {
  border-right: 0;
}

tfoot th, tfoot td {
  border-bottom: 0;
  text-align: center;
}

th {
  width: 25%;
}

Внутренние сетки использующие :lastchild

Когда поддержка в браузерах улучшится, мы сможем использовать псевдо-селектор :lastchild для достижения этого результата без классов. Код CSS будет следующим:

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

th, td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

th:lastchild, td:lastchild {
  border-right: 0;
}

th {
  width: 25%;
}

Это работает в настоящее время в последних версиях браузеров Opera, Firefox и Safari.

Марина Медведева
Марина Медведева

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

Кристина Семенова
Кристина Семенова

Здравствуйте,подскажите,можно ли оплатить курс частями?

Марина Дайнеко
Марина Дайнеко
Россия, Moscow, Nope, 2008
Анатолий Федоров
Анатолий Федоров
Россия, Москва, Московский государственный университет им. М. В. Ломоносова, 1989