вРазные полезности

HTML тег table — подробное описание

HTML тег table - подробное описание

С недавнего времени тег table стал уступать тегу div, поскольку он ещё проще. Однако человек, который разбирается в html, просто обязан хорошо разбираться в таблицах. Синтаксис тега table:

<table>
<tr>
<td>

</td>

</tr>

</table>

Между открывающим тегом <table> и закрывающим тегом </table>прописывается тело таблицы. Это тело разделяется на строки и столбцы. Таблица заполняется построчно. Приведем пример. Html код:

<body> <table align=center width=100% border=1> <tr> <td colspan=2> Пример таблицы </td> </tr> <tr> <td> Столбец 1 </td> <td> Столбец 2 </td> </tr> </table> </body>

Преобразуется на странице в следующее:

Пример таблицы
Столбец 1 Столбец 2

Обратите внимание на <td colspan=2> (объединить две ячейки по горизонтали) можно было вместо этого тега написать <th>. Эффект был бы таким же.

Теперь рассмотрим подробно все атрибуты тега table. К открывающему тегу <table> можно прописывать различные атрибуты.

 

Атрибуты table

1) Атрибут align — задает выравнивание таблицы. Может принимать следующие значения:
→ left — выравнивание по левому краю,
→ center — выравнивание по центру,
→ right — выравнивание по правому краю.

В разобранном выше примере мы выравнивали таблицу по центруalign=center.

Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы <td>. Таким образом, в разных ячейках выравнивание будет разное.

2) Атрибут background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Приведем пример

<table background=img/fon.gif align=center width=100% border=1 style=»color:white;»> <tr> <td colspan=2> Пример таблицы </td> </tr> <tr> <td> Столбец 1 </td> <td> Столбец 2 </td> </tr> </table> </body>

Преобразуется на странице в следующее:

Пример таблицы
Столбец 1 Столбец 2

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif. Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

3) Атрибут bgcolor=»цвет» — задает цвет фона таблицы.

4) Атрибут border=ЧИСЛО — задает толщину рамки таблицы. В предыдущих примерах мы указазывали border=1, что означает толщина рамки — 1 пиксель.

5) Атрибут bordercolor=»цвет» — задает цвет рамки. Еслиborder=0, то рамки не будет и цвет рамки не будет иметь смысла.

6) Атрибут cellpadding=ЧИСЛО — отступ от рамки до содержимого ячейки.

7) Атрибут cellspacing=ЧИСЛО — расстояние между ячейками.

8) Атрибут cols=ЧИСЛО — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9) Атрибут frame — как отображать границы вокруг таблицы. Может принимать следующие значения:
→ void — не отрисовывать границы,
→ border — граница вокруг таблицы,
→ above — граница по верхнему краю таблицы,
→ below — граница снизу таблицы,
→ hsides — добавить только горизонтальные границы (сверху и снизу таблицы),
→ vsides — рисовать только вертикальные границы (слева и справа от таблицы),
→ rhs — граница только на правой стороне таблицы,
→ lhs — граница только на левой стороне таблицы.

10) Атрибут height=ЧИСЛО — задает высоту таблицы: либо в пикселях, либо в процентах %.

11) Атрибут rules — где отображать границы между ячейками. Может принимать следующие значения:
→ all — линия рисуется вокруг каждой ячейки таблицы,
→ groups — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>,
→ cols — линия отображается между колонками,
→ none — все границы скрываются,
→ rows — граница рисуется между строками таблицы, созданными через тег .

12) Атрибут width=ЧИСЛО — задает ширину таблицы: либо в пикселях, либо в процентах %.

13) Атрибут class=имя_класса — можно указать имя класса, которому принадлежит таблица.

14) Атрибут style=СТИЛИ — стили можно задать индивидуально для каждой таблицы.


Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге <td>.

 

Атрибуты td

1) Атрибут align — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:
→ left — выравнивание по левому краю,
→ center — выравнивание по центру,
→ right — выравнивание по правому краю.

2) Атрибут background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3) Атрибут bgcolor=»цвет» — задает цвет фона ячейки.

4) Атрибут bordercolor=»цвет» — задает цвет рамки ячейки.

5) Атрибут char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6) Атрибут colspan=ЧИСЛО — задает число объединяемых горизонтальных ячеек.

7) Атрибут height=ЧИСЛО — задает высоту таблицы: либо в пикселях, либо в процентах %.

8) Атрибут width=ЧИСЛО — задает ширину таблицы: либо в пикселях, либо в процентах %.

9) Атрибут rowspan=ЧИСЛО — задает число объединяемых вертикальных ячеек.

10) Атрибут valign — выравнивание содержимого ячейки по вертикали.
→ top — выравнивание содержимого ячейки по верхнему краю строки,
→ middle — выравнивание по середине,
→ bottom — выравнивание по нижнему краю,
→ baseline — выравнивание по базовой линии.

Похожие посты