УРОК 11. ТАБЛИЦЫ
Для создания таблиц используют тег <table>, а также
<th> — тэг первой (заголовочной строки)
<tr> — тэг строки
<td> — тэг ячейки
Добавим код (< символ <, > символ >):
<center><h2>Основные теги html 5</h2></center>
<table>
<tr>
<th>Тег</th>
<th>Описание</th>
</tr>
<tr>
<td><article></td>
<td>Определяет статью</td>
</tr>
<tr>
<td><aside></td>
<td>Определяет контент в стороне от основного контента страницы</td>
</tr>
<tr>
<td><audio></td>
<td>Определяет аудио контент</td>
</tr>
<tr>
<td><canvas></td>
<td>Определяет графику</td>
</tr>
<tr>
<td><datagrid></td>
<td>Определяет данные в упорядоченный список</td>
</tr>
<tr>
<td><datalist></td>
<td>Определяет выпадающий список</td>
</tr>
<tr>
<td><details></td>
<td>Определяет детали элемента</td>
</tr>
<tr>
<td><dialog></td>
<td>Определяет диалог (разговор)</td>
</tr>
<tr>
<td><figure></td>
<td>Определяет группу медиа-контента, и их подписи</td>
</tr>
<tr>
<td><footer></td>
<td>Определяет нижний колонтитул для раздела или страницы</td>
</tr>
<tr>
<td><header></td>
<td>Определяет область заголовка раздела или страницы</td>
</tr>
<tr>
<td><mark></td>
<td>Определяет выделенный текст</td>
</tr>
<tr>
<td><nav></td>
<td>Определяет навигационные ссылки</td>
</tr>
<tr>
<td><output></td>
<td>Определяет некоторые виды результата</td>
</tr>
<tr>
<td><progress></td>
<td>Определяет ход выполнения задачи любого рода</td>
</tr>
<tr>
<td><section></td>
<td>Определяет раздел (секцию)</td>
</tr>
<tr>
<td><source></td>
<td>Определяет медиа-ресурсы</td>
</tr>
<tr>
<td><time></td>
<td>Определяет дату/время</td>
</tr>
<tr>
<td><video></td>
<td>Определяет видео</td>
</tr>
</table>
В файле стилей пропишем:
table {
margin:0 auto;
border-collapse: collapse;
width: 700px;
}
border-collapse задает отображение границ вокруг ячеек
Значение параметра border-collapse:
collapse — Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate — Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.
Конструкция
<table cellspacing=»2″ cellpadding=»5″ border=»1″ >
Задает расстояние между внешними границами ячеек. Атрибут border – толщину границ.
Далее пропишем
th, td {
border:1pxsolid #000; // толщина рамки в пикселах
padding:5px;
}
th {
background-color: #24b5fe;
color: #fff;
}
ЧЕРЕДОВАНИЕ ЦВЕТА СТРОК (селектор :nth—of—type)
Используем код
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd) {
background-color:#cdcbcb;
}
Заливкачетныхстрокзадаетсясловом even, нечетных odd
ВЫРАВНИВАНИЕ ТЕКСТА (селектор :nth-child)
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю.
Все строки таблицы, кроме первой, выбираются при помощи селектора со смещением:
table tr:nth-child(n+2)
Для выбора каждой второй строки таблицы используется множитель 2:
table tr:nth-child(2n)
Для выравнивания всех столбцов, кроме первого, используется следующая запись:
td:nth-child(n+2), th:nth-child(n+2) {
text-align:center
}
ВЫДЕЛЕНИЕ ПОСЛЕДНЕЙ СТРОКИ (селектор :last-child)
tr:last-child {
font-weight: bold;
}
// жирный шрифт последней строки
tr:last-child td:last-child {
font-size:20px;
}
// задаем размер шрифта для ячейки в правом нижнем углу
Наиболее логично использовать данную конструкцию в таблице с цифрами, где последняя строка Итого
Получаем:
