«Единственный способ творить великие дела – это любить то, что ты делаешь»
HTML
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг. Создание сайтов Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Выбрать тему для сайта! Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Таблицы довольно широко применяются при создании веб-страниц: они служат не только способом представления и упорядочения данных, но и являются инструментом форматирования страниц - их используют для создания каркаса страницы - применяют табличную верстку.

Определение в Википедии: Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег <table>).

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



Создание таблицы: строки и ячейки. Заголовок таблицы

Таблица создается с помощью тега <table> - он открывает таблицу. Обязательный тег </table> информирует браузер о завершении таблицы.

Любая таблица состоит из столбцов и строк.

Тег <tr> создает строку, а тег <td> ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Тег <th> также создает ячейку. Его отличие от тега <td> в том, что ячейка созданная тегом <th> является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.

Содержимое ячейки, созданной тегом <td> по умолчанию располагается в ее левой чаcти.

Тег <caption> создает заголовок таблицы, он располагается внутри тега <table> - сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.

Фрагмент кода
<table border="1" width="700px">
<caption> Заголовок таблицы </caption>
<tr>
<td>
1-я ячейка 1-ой строки </td>
<td>
2-я ячейка 1-ой строки </td>
</tr>
<tr>
<th>
1-я ячейка 2-ой строки </th>
<th>
2-я ячейка 2-ой строки </th>
</tr>
<tr>
<td>
<img src="img/peng_32.gif"> </td>
<td> <img src="img/peng_32.gif"> </td>
</tr>
</table>
Результат

Выравнивание таблицы. Выравнивание содержимого ячеек

Для выравнивания таблицы используется атрибут align тега <table>.

При помощи атрибут align Вы можете разместить таблицу в левой или правой (align="left" и align="right") части окна браузера (родительского элемента) или по его центру (align="center").

Выравнивание содержимого строк (тег <tr>) и ячеек (тег <td>) по горизонтали также осуществляется при помощи атрибута align, а по вертикали при помощи атрибута valign:

- атрибут align принимает значения left, right, center и justify, которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;

- атрибут valign, принимающий значения top, bottom и middle, задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.

Атрибут align служит также для выравнивания заголовка (тег <caption>) по горизонтали и определения его расположения - над таблицей или под ней.

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

Фрагмент кода
Результат

Высота и ширина таблицы и ячеек

По умолчанию размеры (высота и ширина) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.

Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght и width соответственно.

Тег <tr>, создающий строку таблицы не имеет атрибутов hieght и width. Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.

Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:

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

- указывается целое положительное число с символом %.

Если содержимое таблицы или ячейки превышает заданные размеры - они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.

Фрагмент кода
<table border="1" width="600px" align="center">
<tr>
<td height=
"150px"> <img src="img/peng_64.gif"> </td>
<td valign="top"> <img src="img/peng_64.gif"> </td>
</tr>
<tr>
<td width=
"250px" valign="bottom"> <img src="img/peng_64.gif"> </td>
<td height="150px" align="right"> <img src="img/peng_64.gif"> </td>
</tr>
<tr align="center">
<td
> <img src="img/peng_32.gif"> </td>
<td height="100px"> <img src="img/peng_32.gif"> </td>
</tr>
</table>
Результат

Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

Границы таблицы и ячеек

Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.

Атрибут border тега <table> позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.

Толщина границы (или рамки) задается в пикселях. В качестве значения атрибута border указывается целое положительное число. Если атрибут border указан без значения, толщина рамки составит 1 пиксель.

Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).

По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.

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

Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).

Фрагмент кода
<table width="500px">
<tr>
<td>
Атрибут border не указан. </td>
<td>
Поэтому границы отсутствуют. </td>
</tr>
<tr>
<td>
<img src="img/peng_32.gif"> </td>
<td>
<img src="img/peng_32.gif"> </td>
</tr>
</table>

<table width="500px" border="3px">
<tr>
<td>
Толщина границы таблицы составляет 3 пикселя. </td>
<td>
Ячейки имеют границы толщиной 1 пиксель! </td>
</tr>
<tr>
<td><img src="img/peng_32.gif"> </td>
<td><img src="img/peng_32.gif"> </td>
</tr>
</table>
Результат

Частичное отображение границ

Граница таблицы и рамка вокруг ячеек могут быть отображены частично.

Атрибут frame тега <table> указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек.

Фрагмент кода
<table height="100px" width="500px" frame="hsides" rules="cols">
<tr>
<td>
Установлены </td>
<td>
горизонтальные </td>
<td>
границы таблицы </td>
</tr>
<tr>
<td>
И </td>
<td>
отображены границы </td>
<td>
между колонками </td>
</tr>
</table>
Результат

Отступы внутри и снаружи ячеек

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

Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding тега <table>.

Внешние отступы - расстояние между границами соседних ячеек  и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing тега <table>.

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

Фрагмент кода
<table border="1px" width="500" cellpadding="10" cellspacing="25">
<tr>
<td>
Расстояние от содержимого ячеек </td>
<td>
до их границ составляет 10 пикселей </td>
</tr>
<tr>
<td>
Расстояние между ячейками и от ячеек </td>
<td>
до границы таблицы составляет 25 пикселей </td>
</tr>
</table>
Результат

Объединение ячеек

При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега <td>.

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

Оба атрибута имеют смысл, если таблица состоит из нескольких строк.

Фрагмент кода
<table border="1px" width="500">
<tr>
<td colspan=
"2"> 1 </td>
<td rowspan=
"2"> 2 </td>
</tr>
<tr>
<td>
3 </td>
<td>
4 </td>
</tr>
</table>
Результат

Фон таблицы. Фон ячеек таблицы

В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.

Атрибут background тега <table> задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу (подробнее здесь...).

Атрибут bgcolor тега <table> задает цвет фона таблицы. Цвет можно задать двумя способами (подробнее здесь...)

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

Фрагмент кода
<table width="100%" border="1" bgcolor="#FF6666">
<tr>
<td width=
"63%" height="200" background = "img/img.gif"> </td>
<td width=
"37%"> Темно-розовый - цвет фона таблицы. </td>
</tr>
<tr>
<td>
Фоновый рисунок отдельной ячейки - небо! </td>
<td></td>
</tr>
</table>
Результат

Напомним также о существовании атрибута cols тега <table>, который указывает браузеру количество столбцов в таблице.

Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.

Редактирование таблицы

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

К первой группе относятся теги <col> и <colgroup>. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.

Один из этих тегов располагают сразу после тега <table>. Допустим это тег <col>.

При помощи атрибута span тега <col> указывают количество колонок, к которым будут применены атрибуты align, valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок).

Если атрибут span в теге <col> отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега <col> задаются свойства для следующих (следующей - если атрибут span отсутствует) колонок таблицы и т.д.

Фрагмент кода
<table width="700px" border="1">
<col width="250px">
<col span="2" width=
"70px">
<tr>
<td>
1 </td>
<td>
2 </td>
<td>
3 </td>
<td>
4 </td>
<td>
5 </td>
</tr>
</table>
Результат

Ко второй группе тегов относятся также практически идентичные между собой теги <thead>, <tbody> и <tfoot>.

Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor.

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

Теги <thead> и <tfoot> должны быть расположены перед тегом <tbody>, сразу после открывающего таблицу тега <table>. Строки, помещенные в тег <thead> представлены вверху таблицы, а строки заключенные в тег <tfoot> будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.

Тег <tbody> допускается использовать несколько раз внутри тега <table>.

Фрагмент кода
<table width="600" border="1">

<thead bgcolor=
"#99FFFF" align="center">
<tr> <td width=
"350"> 1 </td> <td> 2 </td> </tr>
</thead>

<tfoot bgcolor=
"red">
<tr> <td>
3 </td> <td> 4 </td> </tr>
<tr> <td>
5 </td> <td> 6 </td> </tr>
</tfoot>

<tbody bgcolor=
"#00FFFF">
<tr> <td>
7 </td> <td> 8 </td> </tr>
</tbody>
<tbody align=
"right" bgcolor="#00FF33">
<tr> <td>
9 </td> <td> 10 </td> </tr>
</tbody>

</table>
Результат

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

HTML по шагам

Все теги HTML
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта