Среда, 13.11.2019, 23:42
ЗАРАБОТОК В СЕТИ
WWW.ZARABOTKII.RU
Главная Регистрация Вход
Приветствую Вас, Гость · RSS
...
Меню сайта
вечная ссылка
Статьи
Вебмастеру
Форма входа
Мини чат
200
Новости сайта
Block content
Помощь сайту
Помогите сайту!
ЯндексЯндекс. ДеньгиХочу такую же кнопку
Наш опрос
Оцените мой сайт
Всего ответов: 62
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс.Метрика
Рейтинг@Mail.ru
Поиск
 HTML тег <table>

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 уроков и советов

 

Copyright MyCorp © 2019
Календарь
«  Ноябрь 2019  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
252627282930
Архив записей
Валюта

Яндекс кошелек
Если не видно картинку, то включите ява скрипт и обновите страницу код с картинки →

Обмен валют currex.ru и spasibo.kz

...
Друзья сайта
Модная - женская одежда Заработок в интернете
Бесплатные программы ПК Гороскоп на сегодня
Заработок на рекламе
Заработок в сети
Гламур
Салон красоты
Работа на себя
Работа на дому
Мои услуги
BitCoin
вечная ссылка
Купить ссылку здесь за руб.
Поставить к себе на сайт
Так.ру
Сайт создан в системе uCoz