Главная » 2015 » Декабрь » 4 » Урок 6 - HTML тег <table>. Как сделать таблицу через html
03:56
Урок 6 - HTML тег <table>. Как сделать таблицу через html

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>. Таким образом, в разных ячейках выравнивание будет разное.

Пример

<table align="center">

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 - выравнивание по базовой линии

Примечание Для тега <tr> доступны такие же параметры, что и для <td>. Параметры для одного тега <tr> будут иерархично применены ко всем <td> внутри него

Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

Ссылка на следующий урок: Урок 7. HTML тег img - подробное описание с примерами

Категория: Все о сайтах | Просмотров: 305 |
Всего комментариев: 0
Войдите:
avatar