Основы html. Часть 3. Таблицы

В этой статье речь пойдет о таблицах. Это не так сложно, как может показаться на первый раз. При верстке таблицы применяются не только для удобного представления данных, но и используются в качестве модульной сетки при табличной верстке.

В этой статье речь пойдет о таблицах. Это не так сложно, как может показаться на первый раз. При верстке таблицы применяются не только для удобного представления данных, но и используются в качестве модульной сетки при табличной верстке.

В html таблицы строятся по рядам, которые в свою очередь делятся на ячейки. За построение таблиц отвечают специальные теги: <table> </table> — внутри этого тега размещается таблица, <tr> </tr> — внутри этого тега размещаются содержание ряда, <td> </td> — определяет содержимое одной ячейки (или клеточки таблицы, если Вам так понятнее. Например для такой таблицы

html-код таблицы

будет соответствовать вот такой html-код

<table border=»1″ >
<tr>
<td>ячейка 11 </td>
<td>ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr>
<td>ячейка 21 </td>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>

Видите, что тег <tr> открывает первый ряд, затем идут три тега <td> </td> — ячейки первого ряда, и тег </tr> закрывает ряд. Потом эта комбинация повторяется для второго ряда. Обратите внимание на параметр border в теге <table>. Он определяет толщину рамки таблицы в пикселях.

С тегом <table> так же можно применить следующие параметры:

  • align — задает выравнивание таблицы (left- по левому краю, center — по центру, right — по правому краю).
  • background — определяет фоновый рисунок в таблице. Его действие рассмотрен во втором уроке на примере тега <body >.
  • bgcolor — устанавливает цвет фона таблицы. Для этого используйте таблицу основных веб-цветов.
  • bordercolor — цвет рамки.
  • border — толщина рамки в пикселах.
  • cellpadding — определяет отступ от рамки до содержимого ячейки.
  • cellspacing — расстояние между ячейками.
  • cols — число колонок в таблице.
  • height — устанавливает высоту таблицы (в пикселях или процентах).
  • width — ширина таблицы (в пикселях или процентах).

Ячейку можно объединить с соседней, причем как по вертикали, так и по горизонтали. Внимательно смотрим пример:

объединяем ячейки по горизонтали

будет соответствовать вот такой html-код

<table border=»1″ >
<tr>
<td>ячейка 11 </td>
<td>ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr>
<td>ячейка 21 </td>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>

Видите, что тег <tr> открывает первый ряд, затем идут три тега <td> </td> — ячейки первого ряда, и тег </tr> закрывает ряд. Потом эта комбинация повторяется для второго ряда. Обратите внимание на параметр border в теге <table>. Он определяет толщину рамки таблицы в пикселях.

С тегом <table> так же можно применить следующие параметры:

  • align — задает выравнивание таблицы (left- по левому краю, center — по центру, right — по правому краю).
  • background — определяет фоновый рисунок в таблице. Его действие рассмотрен во втором уроке на примере тега <body >.
  • bgcolor — устанавливает цвет фона таблицы. Для этого используйте таблицу основных веб-цветов.
  • bordercolor — цвет рамки.
  • border — толщина рамки в пикселах.
  • cellpadding — определяет отступ от рамки до содержимого ячейки.
  • cellspacing — расстояние между ячейками.
  • cols — число колонок в таблице.
  • height — устанавливает высоту таблицы (в пикселях или процентах).
  • width — ширина таблицы (в пикселях или процентах).

Ячейку можно объединить с соседней, причем как по вертикали, так и по горизонтали. Внимательно смотрим пример:

объединяем ячейки по горизонтали

<table border=»1″ >
<tr>
<td colspan=»2″>ячейка 11 ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr>
<td>ячейка 21 </td>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>
<table border=»1″ >
<tr>
<td rowspan=»2″>ячейка 11
ячейка 21 </td>
<td>ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>

Здесь мы знакомимся с атрибутами тега <td> colspan — определяет число ячеек, которые должны быть объединены по горизонтали, а rowspan — определяет число ячеек, которые должны быть объединены по вертикали. Эти параметры должны иметь положительные значения больше 1.

Раз уж коснулись параметров тега <td>, то полностью раскроем эту тему. К этому тегу так же применяются такие параметры:

  • align — устанавливает выравнивание содержимого ячейки по горизонтали (left- по левому краю, center — по центру, right — по правому краю, justify — по ширине) .
  • background — устанавливает фоновый рисунок в ячейке.
  • bgcolor — задает цвет фона ячейки.
  • bordercolor — цвет рамки.
  • width — устанавливает ширину ячейки.
  • height — высота ячейки.
  • nowrap — запрещает перенос строк внутри ячейки.
  • valign — выравнивание содержимого ячейки по вертикали (top — по верхнему краю, middle — по середине, bottom — по нижнему краю, baseline — по базовой линии, при этом происходит привязка содержимого ячейки к одной линии).
  • rowspan — объединяет вертикальные ячейки.
  • colspan — объединяет горизонтальные ячейки.

К тегу <tr>можно применить следующие параметры:

  • align — ячеек по горизонтали.
  • bgcolor — цвет фона ячеек.
  • bordercolor — цвет рамки.
  • valign — выравнивание содержимого ячеек по вертикали.

Давайте разберемся как влияют одни и те же параметры на разные теги. Так Вы наверное заметили, параметры bgcolor и bordercolor можно применить к тегам <table >, <tr > и <td >. Рассмотрим вот такой код:

<table border=»1″ bordercolor=»#0000FF» bgcolor=»#FFFF99″ >
<tr bgcolor=»#FFCCFF»>
<td bgcolor=»#CCFFFF»>ячейка 11 </td>
<td >ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr bordercolor=»#FF0000″>
<td> ячейка 21</td>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>

как влияют одни и те же параметры на разные теги

<table border=»1″ >
<tr>
<td colspan=»2″>ячейка 11 ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr>
<td>ячейка 21 </td>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>
<table border=»1″ >
<tr>
<td rowspan=»2″>ячейка 11
ячейка 21 </td>
<td>ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>

Здесь мы знакомимся с атрибутами тега <td> colspan — определяет число ячеек, которые должны быть объединены по горизонтали, а rowspan — определяет число ячеек, которые должны быть объединены по вертикали. Эти параметры должны иметь положительные значения больше 1.

Раз уж коснулись параметров тега <td>, то полностью раскроем эту тему. К этому тегу так же применяются такие параметры:

  • align — устанавливает выравнивание содержимого ячейки по горизонтали (left- по левому краю, center — по центру, right — по правому краю, justify — по ширине) .
  • background — устанавливает фоновый рисунок в ячейке.
  • bgcolor — задает цвет фона ячейки.
  • bordercolor — цвет рамки.
  • width — устанавливает ширину ячейки.
  • height — высота ячейки.
  • nowrap — запрещает перенос строк внутри ячейки.
  • valign — выравнивание содержимого ячейки по вертикали (top — по верхнему краю, middle — по середине, bottom — по нижнему краю, baseline — по базовой линии, при этом происходит привязка содержимого ячейки к одной линии).
  • rowspan — объединяет вертикальные ячейки.
  • colspan — объединяет горизонтальные ячейки.

К тегу <tr>можно применить следующие параметры:

  • align — ячеек по горизонтали.
  • bgcolor — цвет фона ячеек.
  • bordercolor — цвет рамки.
  • valign — выравнивание содержимого ячеек по вертикали.

Давайте разберемся как влияют одни и те же параметры на разные теги. Так Вы наверное заметили, параметры bgcolor и bordercolor можно применить к тегам <table >, <tr > и <td >. Рассмотрим вот такой код:

<table border=»1″ bordercolor=»#0000FF» bgcolor=»#FFFF99″ >
<tr bgcolor=»#FFCCFF»>
<td bgcolor=»#CCFFFF»>ячейка 11 </td>
<td >ячейка 12</td>
<td>ячейка 13</td>
</tr>
<tr bordercolor=»#FF0000″>
<td> ячейка 21</td>
<td>ячейка 22 </td>
<td>ячейка 23</td>
</tr>
</table>

как влияют одни и те же параметры на разные теги

В теге <table > определены для всей таблицы желтый фон и синий цвет рамки. В теге <tr > первого ряда установлен розовый цвет фона, поэтому все ячейки этого ряда имеют такой фон, кроме первой, у нее в теге <td > установлен зеленоватый фоновый цвет. В теге <tr > второго ряда определен красный цвет рамки. Теперь можете сами поэкспериментировать с параметрами тегов.

Можно вместо тега <td > использовать тег <th >. В такой ячейке текст отображается жирным шрифтом и выравнивается по центру.

Долгое время таблицы с невидимой границей применялись для верстки веб-страниц в качестве модульной сетки. Такой способ верстки применялся на многих сайтах, пока на смену ему не пришел более современный способ верстки с помощью слоев.

Вы можете задать вопрос: «Зачем мучится и изучать html, если сейчас есть много различных специальных программ, которые умеют сами составлять html — код?» Да, действительно, есть такие программы, одна из которых Adobe Dreamweaver. Это очень хороший помощник для верстальщика, но не зная основ html Вы не сможете успользовать все возможности этой программы. Согласитесь, купив себе крутую машину Вы не станете крутым водителем, если до этого ни разу не сидели за рулем.

Я Вам показал лишь малую часть возможностей языка html. Изучить его в совершенстве Вам поможет Базовый курс по обучению языку HTML и CSS

Наверх

Понравилась статья? Поделиться с друзьями:

Отправить ответ

Оставьте первый комментарий!

Уведомить
avatar
wpDiscuz