среда, 27 июня 2012 г.

Списки и таблицы

СПИСКИ

В HTML определено 3 вида списков:
  • маркированные <ul></ul>
  • нумерованные <ol></ol>
  • списки определений <dl></dl>
Маркированные и нумерованные списки создаются следующим образом:
  1. создается контейнер соответствующего списка
  2. каждый элемент списка определяется парой тегов <li></li>
*Тип маркера можно задать атрибутом type. 
  • для маркированного списка он может иметь одно из следующих значений: disk, circle, square 
  • для нумерованного списка -- 1, I, i, A, a 
*Так же нумированный список может иметь атрибут start, указывающий номер/букву с которой ведётся отсчёт элементов.
Список определения создается так:
  1. создается контейнер <dl></dl>
  2. термины заключаются в тег <dt></dt>
  3. после каждого термина идёт определение, заключающееся в тег <dd></dd>

ТАБЛИЦЫ

Для вывода на странице таблицы нужно создать ее контейнер с помощью пары тегов <table></table>, между которыми вставляется описание таблицы. 
ВНИМАНИЕ! Все теги в таблице – парные, то есть обязательно наличие как открывающего, так и закрывающего тега! Чтобы показать таблицу с рамкой (по умолчанию она не выводится), нужно в открывающем теге указать толщину линии в пикселах, задав значение атрибута 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>.