Главная / Верстка / Html / Таблицы в HTML +

Таблицы в HTML +


08.07.2015 13:371014

После покорения ссылок переходим к таблицам.

Таблицы в HTML — это очень важная тема. Таблицы с невидимой границей долгое время использовались для верстки сайтов, позволяя разделять документ на модульные блоки. Сейчас все больше применяется дивный способ верстки (теги <div> + CSS), однако таблицы в той или иной степени все равно применяются очень широко.

Теги TABLE, TR и TD

Самый главный элемент для создания таблицы — это тег <table>. Но таблица — это совокупность строк и ячеек. Поэтому для создания любой таблицы нужны как минимум три тега:
<table> — является контейнером для других элементов, определяющих содержимое таблицы;
<tr> — создает строку таблицы;
<td> — создает ячейку таблицы.
Для все трех закрывающий тег обязателен.

Содержимое таблицы нужно писать внутри тега <td>.

По умолчанию браузеры показывают таблицы без рамок. Для того, чтобы видеть саму таблицу, пропишем таблице атрибут border со значением 1. Это означает, что рамка нашей таблицы будет толщиной в один пиксель.

Давайте создадим таблицу с двумя рядами (или строками) по две ячейки в каждом. В контейнере <table> создаем два контейнера, определяющих строки (<tr>), внутри которых создаем по две ячейки (<td>):

<table border="1">
<tr>
<td>
Строка 1, ячейка 1.</td><td>Строка 1, ячейка 2.</td>
</tr>
<tr>
<td>
Строка 2, ячейка 1.</td><td>Строка 2, ячейка 2.</td>
</tr>
</table>

Не забывайте закрывать теги. Не забывайте сохранять документ и обновлять страницу в браузере. И вот как таблица должна выглядеть:

Строка 1, ячейка 1 Строка 1, ячейка 2
Строка 2, ячейка 1 Строка 2, ячейка 2

В начале это кажется сложным, но, немного потренировавшись изменяя количество строк и ячеек, Вы быстро поймете, что все довольно просто и очень логично.

Атрибуты тега TABLE

Атрибут, задающий толщину рамки, мы уже знаем. Цвет рамки задается при помощи атрибута bordercolor.

Чтобы выровнять таблицу по горизонтали, применяется знакомый атрибут align. Возможные значения: left, center, right.

Ширина таблицы определяется атрибутом width. Задается либо в пикселях, либо в процентах по отношению к ширине окно браузера.

cellpadding — определяет отступ от рамки до содержимого ячейки. Задается в пикселях.

cellspacing — определяет отступ между соседними ячейками (так же в пикселях).

А теперь подкорректируем нашу таблицу. Сделаем красную рамку, зададим ширину в 500 пикселей и выровняем по центру. Расстояние от рамки ячеек сделаем 10 пикселей, а расстояние между ячейками пусть будет 15 пикселей. Содержимое первой строки выровняем по середине:

<table border="1" bordercolor="red" width="500" align="center" cellpadding="10" cellspacing="15">
<tr align="center">
<td>
Строка 1, ячейка 1.</td><td>Строка 1, ячейка2.</td>
</tr>
<tr>
<td>
Строка 2, ячейка 1.</td><td>Строка 2, ячейка2.</td>
</tr>
</table>

В браузере должно получиться:

Строка 1, ячейка 1. Строка 1, ячейка2.
Строка 2, ячейка 1. Строка 2, ячейка2.

 

Как видите мы придали первой строке (первый тег <tr>) атрибут выравнивания по центру и содержимое всей первой строки выровнялось соответственно. Очень полезно, т.к. первая строка часто бывает заголовком таблицы. Если придать атрибут выравнивания конкретной ячейке (тег <td>), то соответствующее выравнивание будет только в этой ячейке.

Опять кажется не совсем понятным. Но главное действовать. Меняйте количество строк и столбцов, меняйте значения атрибутов.

Атрибуты тега TD

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

valign — определяет способ вертикального выравнивания содержимого ячейки. Возможные значения:
top — по верхнему краю;
middle — по середине;
bottom — по нижнему краю. По умолчанию middle.

bgcolor — задает цвет фона. Указывается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Таблица основных цветов находится здесь.

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

Пример:

<table width="500" align="center" border="1" cellspacing="5" cellpadding="5" bordercolor="#006600">
<tr bordercolor="#FF0000">
<td valign="top">
Строка 1, ячейка 1.</td>
<td>
Строка 1, ячейка2.<br>Строка 1, ячейка2.<br>Строка 1, ячейка2.<br>Строка 1, ячейка2.</td>
</tr>
<tr>
<td bgcolor="#FFCC00" valign="bottom">
Строка 2, ячейка 1.</td>
<td background="../images/visitka.jpg"><strong>
Строка 2, ячейка2.<br>Строка 2, ячейка2.<br>Строка 2, ячейка2.<br>Строка 2, ячейка2.</strong></td>
</tr>
</table>

Результат в браузере:

Строка 1, ячейка 1. Строка 1, ячейка2.
Строка 1, ячейка2.
Строка 1, ячейка2.
Строка 1, ячейка2.
Строка 2, ячейка 1. Строка 2, ячейка2.
Строка 2, ячейка2.
Строка 2, ячейка2.
Строка 2, ячейка2.

Как ведите, моя картинка меньшего размера, чем получилась ячейка. Изображение стало просто дублироваться. А если картинка будет больше ячейки, то отобразится только то, что поместится.

Еще раз повторю, что для лучшего усвоения необходимо экспериментировать с атрибутами и их значениями. Не забывайте сохранять документ и обновлять окно в браузере.

 

Все основные элементы для создания таблиц мы уже знаем. Теперь научимся объединять ячейки и встраивать таблицу в таблицу.

Атрибуты COLSPAN и ROWSPAN

Очень полезные атрибуты. С их помощью можно объединять ячейки по вертикали или по горизонтали. Придаются эти атрибуты тегу <td>.

colspan — определяет количество столбцов которое объединено в одной ячейке. Значение по умолчанию = 1.

rowspan — определяет количество строк которое объединено в одной ячейке. Значение по умолчанию = 1.

Давайте создадим таблицу из трех столбцов и трех строк. Верхние ячейки объединим. Часто верхняя строка является заголовком таблицы. Во второй строке объединим две ячейки и обратите внимание на ширину третьей ячейки (атрибут width).

<table align="center" width="500" border="1" cellspacing="5" cellpadding="5">
<tr>
<td colspan="3" align="center">
Заголовок таблицы</td>
</tr>
<tr align="center">
<td colspan="2">
Значения X и Y</td>
<td width="33%">
Значения Z</td>
</tr>
<tr align="center">
<td>
X</td>
<td>
Y</td>
<td>
Z</td>
</tr>
</table>

Результат в браузере:

Заголовок таблицы
Значения X и Y Значения Z
X Y Z

А теперь пример объединения строк:

<table align="center" width="500" border="1" cellspacing="5" cellpadding="5">
<tr align="center">
<td colspan="3">
Заголовок таблицы</td>
</tr>
<tr>
<td rowspan="2">
Строка 2 + строка 3.</td>
<td>
Строка 2, ячейка 2.</td>
<td>
Строка 2, ячейка 3.</td>
</tr>
<tr>
<td>С
трока 3, ячейка 2.</td>
<td>
Строка 3, ячейка 3.</td>
</tr>
</table>

Результат в браузере:

Заголовок таблицы
Строка 2 + строка 3. Строка 2, ячейка 2. Строка 2, ячейка 3.
Строка 3, ячейка 2. Строка 3, ячейка 3.

Обратите внимание, что в внутри последней пары тегов <tr> отсутствует последняя пара тегов <td>. Попробуйте ее не убирать и посмотрите что получится. Станет намного понятнее.

Не забывайте сохранять документ и обновлять страницу в браузере.

Вставить одну таблицу в другую таблицу

При создании сайта довольно часто нужно одну таблицу поместить в другую. Сделать это довольно просто.

Помещаемая таблица должна располагаться между тегами <td>.

Давайте в нашу вышеприведенную таблицу, в объединенную ячейку, поместим еще одну таблицу. Сделаем цвет рамки красным, чтобы было нагляднее. А объединенной ячеке зададим ширину 50%.

<table align="center" width="500" border="1" cellspacing="5" cellpadding="5">
<tr align="center">
<td colspan="3">
Заголовок таблицы</td>
</tr>
<tr>
<td rowspan="2" width="50%">

<table border="1" bordercolor="red">
<tr>
<td>
Первая строка встроенной таблицы.</td>
</tr>
<tr>
<td>
Вторая строка встроенной таблицы.</td>
</tr>
</table>

</td>
<td>
Строка 2, ячейка 2.</td>
<td>
Строка 2, ячейка 3.</td>
</tr>
<tr>
<td>
Строка 3, ячейка 2.</td>
<td>
Строка 3, ячейка 3.</td>
</tr>
</table>

И вот как это должно выглядеть в браузере:

Заголовок таблицы
Первая строка встроенной таблицы.
Вторая строка встроенной таблицы.
Строка 2, ячейка 2. Строка 2, ячейка 3.
Строка 3, ячейка 2. Строка 3, ячейка 3.

Встраиваемая таблица ничем не отличается. К ней применимы все возможные атрибуты.

Ну вот и все, что я хотел рассказать о языке HTML. Надеюсь все понятно.

Здесь я ничего не рассказываю про формы. Для обработки формы необходим файл-обработчик, написанный на языке PHP.

 Вы можете посмотреть видео-урок по созданию и установке формы обратной связи на свой сайт.

 

 

Если Вы решили, что достаточно ознакомились с языком HTML,
переходите к изучению CSS >>


Html , Html Тбалицы



Верстка / Html PRoHtml


«Таблицы в HTML +» - Похожие страницы

Нет записей


Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям