HTML тег <table>
С недавнего времени тег <table> стал заметно сдавать свои позиции по популярности другому тегу <div>, поскольку у него больше возможностей в плане дизайна. Однако человек, который разбирается в html, просто обязан хорошо разбираться в таблицах 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">. Специальный атрибут colspan предназначен для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег <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 - граница рисуется между строками таблицы, созданными через тег <tr>.
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 - выравнивание по базовой линии.
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.
Ссылка на следующий урок: Урок 7. HTML тег img - подробное описание с примерами
← Перейти в каталог html уроков и советов
|
