Списки и таблицы
СПИСКИ
В HTML определено 3 вида списков:
Маркированные и нумерованные списки создаются следующим образом:
- создается контейнер соответствующего списка
- каждый элемент списка определяется парой тегов <li></li>
*Тип маркера можно задать атрибутом type.
- для маркированного списка он может иметь одно из следующих значений: disk, circle, square
- для нумерованного списка -- 1, I, i, A, a
*Так же нумированный список может иметь атрибут start, указывающий номер/букву с которой ведётся отсчёт элементов.
Список определения создается так:
- создается контейнер <dl></dl>
- термины заключаются в тег <dt></dt>
- после каждого термина идёт определение, заключающееся в тег <dd></dd>
ТАБЛИЦЫ
Для вывода на странице таблицы нужно создать ее контейнер с помощью пары тегов <table></table>, между которыми вставляется описание таблицы.
ВНИМАНИЕ! Все теги в таблице – парные, то есть обязательно наличие как открывающего, так и закрывающего тега! Чтобы показать таблицу с рамкой (по умолчанию она не выводится), нужно в открывающем теге указать толщину линии в пикселах, задав значение атрибута border. Описание таблицы делается с помощью тега строки <tr></tr> и вставленных в него тегов ячеек <td></td>.
Атрибуты:
align - определяет выравнивание таблицы
background - задает фоновый рисунок в таблице
bgcolor - цвет фона таблицы
border - толщина рамки в пикселах
bordercolor - цвет рамки
cellpadding - отступ от рамки до содержимого ячейки
cellspacing - расстояние между ячейками
cols - число колонок в таблице
frame - сообщает браузеру, как отображать границы вокруг таблицы
height - высота таблицы
rules - сообщает браузеру, где отображать границы между ячейками
summary - краткое описание таблицы
width - ширина таблицы
ВНИМАНИЕ! Все теги в таблице – парные, то есть обязательно наличие как открывающего, так и закрывающего тега! Чтобы показать таблицу с рамкой (по умолчанию она не выводится), нужно в открывающем теге указать толщину линии в пикселах, задав значение атрибута border. Описание таблицы делается с помощью тега строки <tr></tr> и вставленных в него тегов ячеек <td></td>.
Атрибуты:
align - определяет выравнивание таблицы
background - задает фоновый рисунок в таблице
bgcolor - цвет фона таблицы
border - толщина рамки в пикселах
bordercolor - цвет рамки
cellpadding - отступ от рамки до содержимого ячейки
cellspacing - расстояние между ячейками
cols - число колонок в таблице
frame - сообщает браузеру, как отображать границы вокруг таблицы
height - высота таблицы
rules - сообщает браузеру, где отображать границы между ячейками
summary - краткое описание таблицы
width - ширина таблицы
Стили таблицы: <thead>, <tbody>, и <tfoot>
Чтобы сделать хороший дизайн таблиц, нужно использовать теги, указанные в подзаголовке. Они все влияют на строки таблицы и можно легко задать для них стили.
<thead>
Оборачиваем строки таблицы в <thead></thead>. Таким образом формируется заголовок таблицы.
<tfoot>
Обернув строки в <tfoot></tfoot> формируем итоговые строки внизу таблицы. Строки <tfoot> должны определяться до строк <tbody>, таким образом, итоговые строки выводятся на экран до остальных строк таблицы.
<tbody>
Строки с данными оборачиваем в <tbody></tbody>.
Comments
Post a Comment