наверх





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

table, tr, td, th { /* перечисляем элементы, которым хотим указать свойства */
border: 1px solid #787B8E; /* толщина, стиль, цвет рамки */
border-collapse: collapse; /* устанавливаем в стыках рамок одиночную линию  */
font: 11pt Verdana; /* размер, семейство шрифта, сокращенная запись font-size font-family  */
padding: 3px; /* количество полей элемента до контента */
}


border-collapse - это свойство, которое задает вид, как отображать границу между стыками рамок элементов. Имеет два значения.
По умолчанию стоит separate - давать каждой ячейки свою линию границу.
Значение collapse устанавливает между стыками элементов лишь одну линию, если, например, у обоих было установлено свойство border.

Следующим шагом укажем стили для элемента <th> — заголовки таблицы.

th {
background: #465774; /* указываем фон */
color: #fff; /* указываем цвет текста - белый */
text-align: center; /* выравниваем текст по центру */
font-weight: bold; /* насыщенность текста */
}


Мы уже указали в первом селекторе стилей свойства для элемента <th>, перечислив его через запятую рядом с остальными. Здесь же мы добавили еще 2 свойства, то есть приплюсовали к данному элементу новые свойства.

Следующее, что будет сделано, так это установка вторичного фона для элемента <tr>, повторяющегося через строку. Для этого случая мы используем псевдокласс :nth-child со значением even, означающие, что стили будут заданы лишь четным элементам. Более подробно про :nth-child вы можете узнать в библиотеке.

tr:nth-child(even) {
background: #B7BACC;  /* указываем фон */
}


Так же, можно установить событийный псевдокласс :hover на <tr>, который установит селектору правило, что указанные стили нужно активировать лишь в момент наведения курсора на элемент:

tr:hover {
background: #8A8FAC; /* указываем фон */
color: #fff; /* указываем цвет текста - белый */
}


HTML структура таблицы следующая:

<table>
<tr><th>№</th> <th>Страна</th> <th>Население(тыс. человек)</th></tr>
<tr><td>1</td> <td>Китай</td> <td>1 338 613,0</td></tr>
<tr><td>2</td> <td>Индия</td> <td>1 166 079,2</td></tr>
<tr><td>3</td> <td>США</td> <td>307 212.1</td></tr>
<tr><td>4</td> <td>Индонезия</td> <td>240 271.5</td></tr>
<tr><td>5</td> <td>Бразилия</td> <td>198 739.3</td></tr>
</table>


Результат примера вы можете увидеть по данной ссылке.







Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.