Примеры таблиц

Табличные дескрипторы:

  • < table > —   раздел описания таблицы;
  • < caption > —   задание названия таблицы;
  • < th > —   заголовочные ячейки;
  • < tr > —   строка таблицы, содержащая ячейки;
  • < td > —   ячейка таблицы;
  • < col > —   описание столбцов;
  • < colgroup > —   описание групп столбцов;
  • < tbody > —   описание групп строк таблицы;
  • < tfoot > —   строка ячеек, содержащая итоги по столбцам;
  • < thead > —   группа заголовочных строк таблицы.

Простые примеры

Для создания таблицы необходимо три дескриптора: < table > , < tr > и < td >. Ниже приведен пример такой таблицы.

Первая ячейкаВторая ячейка
Третья ячейкаЧетвертая ячейка

Использование заголовка таблицы < caption > и заголовков столбцов < th >.

Заголовок таблицы, определенный дескриптором <caption>
Заголовочные ячейки,определенные дескриптором<th>
ячейки,определенные дескрипторами<td>
которые группируютсяв строки дескрипторами<tr>

Рамки, поля, отступы

Рассмотрим результат использования атрибутов border, cellspacing и cellpadding:

border="10"cellspacing="10"cellpadding="10"border="10" cellspacing="10" cellpadding="10"
123
456
789
123
456
789
123
456
789
123
456
789

Раскрасим таблицу

Фон ячейки задается с помощью атрибута bgcolor:

Использование bgcolor в дескрипторе <table>Использование bgcolor в дескрипторе <tr>Использование bgcolor в дескрипторе <td>Использование bgcolor в дескрипторе <tbody>
123
456
789
123
456
789
123
456
789
123
456
789

Цвет границы определяется атрибутом bordercolor:

Использование bordercolor в дескрипторе <table>Использование bordercolor в дескрипторе <tr>Использование bordercolor в дескрипторе <td>Использование bordercolor в дескрипторе <tbody>
123
456
789
123
456
789
123
456
789
123
456
789

Эффект выпуклой рамки создается атрибутами bordercolorlight и bordercolordark:

Использование bordercolorlight в дескрипторе <table>Использование bordercolorlight в дескрипторе <tr>Использование bordercolorlight и bordercolordark в дескрипторе <td>Использование bordercolorlight и bordercolordark в дескрипторе <table>
123
456
789
123
456
789
123
456
789
123
456
789

Структурирование таблицы

Для структурирования таблицы используются дескрипторы col, colgroup, tbody, tfoot и thead.

Между прочим, для проведения линий внутри таблицы используется атрибут rules. Сейчас его значение groups.

123456
789101112
131415161718
192021222324
252627282930
313233343536
373839404142
434445464748
495051525354

Очень интересно: дескриптор <colgroup> в каком-то смысле похож на дескриптор <br>. В смысле разбивки таблицы на блоки.

Между прочим, задание align="right" в дескрипторе <table> действительно задает не только положение таблицы справа, но и обтекание текста. Два в одном: и float и align!

Для того, чтобы это безобразие прекратилось, используется <br> с атрибутом clear.

А чтобы оно и не начиналось, выравнивать надо не таблицу, а объемлющий ее элемент <div>.

 

Таблицы и каскадные стили

С помощью таблиц каскадных стилей (CSS) можно управлять толщиной и видом рамки вокруг каждой ячейки.

ЗАМЕЧАНИЕ. Цвет фона с помощью таблиц каскадных стилей задается параметром background-color, в отличие от HTML, где используется атрибут bgcolor.

soliddoubledashed
grooveridgedotted
insetoutset↑groove 
← outset ♦ ridge →
inset ↓

А вот то же самое, только покрупнее:

soliddoubledashed
grooveridgedotted
insetoutsetВСЕ

Заметим, что в CSS есть и такое:

{border-сторона: width style color;}

Объединения ячеек таблицы

С помощью атрибутов rowspan и colspan можно объединить несколько ячеек в одну.

Пример объединения ячеекА вот так делать не надо
1234
567
8
910
111213
Ячейка 1Ячейка 2Ячейка 3, 
распространенная 
на три строчки
Ячейка 4Ячейка 5
Ячейка 6Ячейка 7, распространеная на два столбца

 

 

http://www.jwy.narod.ru/web/html_express/32_table_exmpl.html
Создать бесплатный сайт с uCoz