УРОК 11. ТАБЛИЦЫ

Для создания таблиц используют тег <table>, а также

<th> — тэг первой (заголовочной строки)

<tr> — тэг строки

<td> — тэг ячейки

Добавим код (&lt; символ <, &gt; символ >):

 

<center><h2>Основные теги html 5</h2></center>

<table>

<tr>

<th>Тег</th>

<th>Описание</th>

</tr>

<tr>

<td>&lt;article&gt;</td>

<td>Определяет статью</td>

</tr>

<tr>

<td>&lt;aside&gt;</td>

<td>Определяет контент в стороне от основного контента страницы</td>

</tr>

<tr>

<td>&lt;audio&gt;</td>

<td>Определяет аудио контент</td>

</tr>

<tr>

<td>&lt;canvas&gt;</td>

<td>Определяет графику</td>

</tr>

<tr>

<td>&lt;datagrid&gt;</td>

<td>Определяет данные в упорядоченный список</td>

</tr>

<tr>

<td>&lt;datalist&gt;</td>

<td>Определяет выпадающий список</td>

</tr>

<tr>

<td>&lt;details&gt;</td>

<td>Определяет детали элемента</td>

</tr>

<tr>

<td>&lt;dialog&gt;</td>

<td>Определяет диалог (разговор)</td>

</tr>

<tr>

<td>&lt;figure&gt;</td>

<td>Определяет группу медиа-контента, и их подписи</td>

</tr>

<tr>

<td>&lt;footer&gt;</td>

<td>Определяет нижний колонтитул для раздела или страницы</td>

</tr>

<tr>

<td>&lt;header&gt;</td>

<td>Определяет область заголовка раздела или страницы</td>

</tr>

<tr>

<td>&lt;mark&gt;</td>

<td>Определяет выделенный текст</td>

</tr>

<tr>

<td>&lt;nav&gt;</td>

<td>Определяет навигационные ссылки</td>

</tr>

<tr>

<td>&lt;output&gt;</td>

<td>Определяет некоторые виды результата</td>

</tr>

<tr>

<td>&lt;progress&gt;</td>

<td>Определяет ход выполнения задачи любого рода</td>

</tr>

<tr>

<td>&lt;section&gt;</td>

<td>Определяет раздел (секцию)</td>

</tr>

<tr>

<td>&lt;source&gt;</td>

<td>Определяет медиа-ресурсы</td>

</tr>

<tr>

<td>&lt;time&gt;</td>

<td>Определяет дату/время</td>

</tr>

<tr>

<td>&lt;video&gt;</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;

}

 

ЧЕРЕДОВАНИЕ ЦВЕТА СТРОК (селектор :nthoftype)

Используем код

 

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;

}

// задаем размер шрифта для ячейки в правом нижнем углу

 

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

Получаем:

пример использования таблицы сайта

Добавить комментарий