Профессиональный веб-дизайн

:

Введение в стандарты Web
[+]
Опубликован: 28.11.2008 | Уровень: для всех | Доступ: платный
Лекция 33:

Оформление таблиц
A
|
версия для печати
< Лекция 32 || Лекция 33: 123456 || Лекция 34 >

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

Для некоторых решений хорошо подходят менее структурированные, более открытые сетки. Простым вариантом является удаление вертикальных границ и удаление заливки фона заголовка таблицы, как показано на рис. 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.

Дальше >>
< Лекция 32 || Лекция 33: 123456 || Лекция 34 >

Вопросы и ответы

вопросов: 27
Марина Походаева
Марина Походаева

Помогите мне. Я ничего не понимаю в курсе ((((((   (от слова "совсем") и мне от этого очень грустно. Есть ли какие-нибудь курсы для "чайников", самые простые в объяснении. ПАМАГИТЕ!!!

ответить
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

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

ответить