Основы HTML
 Структура документов
 Создание web-страницы
 Задаем стили текста
 Вставляем картинку
 Гиперссылки
 Таблицы
 Списки
 Теги HTML
 Специальные символы
Основы CSS
 Свойства CSS
Технология Ajax
 Основы AJAX
 Изучаем AJAX на примере
SEO
 SEO учебники
 ТИЦ и как его повысить
Заработок в интернете
 Заработок в интернете для новичков
 Заработок в соц. сетях с помощью Prospero
 GetGoodLinks – заработок на продаже ссылок.
Реклама

Таблицы в HTML.

Одним из самых необходимых элементов в HTML являются таблицы. В таблицах на WEB-странице можно размещать текстовые и числовые данные, вставлять изображения и гиперссылки. Но основным достоинством HTML-таблиц является возможность форматирования изображений и текста на основе заданной табличной структуры.

Таблицы в HTML строятся по принципу вложения элементов. Сначала задается родительский элемент Table, определяющий таблицу, и в него вкладываются строки - TR, а в строки столбцы - TD.

Давайте создадим простейшую таблицу. Вот код, который вы должны внести в свою страницу внутрь элемента body для создания таблицы 2x2 ячеек:

<table width="200" border="1"> <!--таблица-->
  <tr> <!-- 1-ая строка -->
    <td> 1 </td> <!-- 1-ая ячейка -->
    <td> 2 </td> <!-- 2-ая ячейка -->
  </tr> <!-- 1-ая строка заканчивается -->
  <tr> <!-- 2-ая строка -->
    <td> 3 </td> <!-- 3-ая ячейка -->
    <td> 4 </td> <!-- 4-ая ячейка -->
  </tr> <!-- 2-ая строка заканчивается -->
</table> <!-- таблица заканчивается -->

А вот как будет выглядеть результат:

1 2
3 4
В данном примере тег <table> содержит некоторые атрибуты: width - ширина таблицы и border - толщина рамки таблицы в пикселях. Кроме этих свойств элемент таблица может включать следующие атрибуты:
  • align - определяет выравнивание таблицы;
  • background - задает фоновый рисунок в таблице;
  • bgcolor - цвет фона таблицы;
  • bordercolor - цвет рамки;
  • cellpadding - отступ от рамки до содержимого ячейки;
  • cellspacing - расстояние между ячейками;
  • height - высота таблицы.

Иногда бывает нужно создавать таблицы, в которых смежные ячейки должны быть объеденены. Объеденить ячеки можно с помощью атрибутов тега <TD>: colspan и rowspan.

Атрибут colspan указывает число ячеек объединенных по горизонтали:

<table width="200" border="1">
  <tr>
    <td colspan="2"> 1 </td> <!-- объеденены две горизонтальные ячейки -->
  </tr>
  <tr>
    <td> 2 </td>
    <td> 3 </td>
  </tr>
</table>
В приведенном примере таблица содержат две строки и две колонки, причем верхние горизонтальные ячейки объединены с помощью параметра colspan:
1
2 3

Атрибут rowspan указывает число ячеек объединенных по вертикали. Вот пример использования:

<table width="200" border="1">
  <tr>
    <td rowspan="2"> 1 </td> <!-- объеденены две вертикальные ячейки -->
    <td> 2 </td>
  </tr>
  <tr>
    <td> 3 </td>
  </tr>
</table>
А вот как будет выглядеть:
1 2
3

Подписка на новости
Теги HTML
 A
 ABBR
 ACRONYM
 ADDRESS
 B
 BIG
 BLOCKQUOTE
 BODY
 BR
 BUTTON
 CENTER
 CITE
 CODE
 DD
 DFN
 DL
 DT
 EM
 FONT
 H1-H6
 HEAD
 HR
 HTML
 I
 IMG
 KBD
 LI
 LINK
 MARQUEE
 META
 NOBR
 OL
 OPTION