Использование HTML в таблице

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

Раньше практически все веб-мастера использовали таблицы именно для верстки сайтов. Изначально таблицы для этого не придумывались. Поэтому для разметки сайта нужно использовать блочный элемент div.

Если вы не хотите всегда оставаться новичком, привыкайте сразу всё делать правильно. Это очень важно в языке HTML. В таблице нужно размещать только обычную информацию (текст, ссылки, списки, изображения и т. п.), а не весь сайт целиком.

Как сделать таблицу HTML?

Таблица - это сложный элемент, который состоит из большого числа других элементов. Запомните, что при создании ячеек или строк всегда сразу нужно ставить закрывающийся тег. Иначе всё слетит. Обработчик в браузере будет искать конец элемента и, пока не найдет его, всё дальнейшее будет включать в таблицу. Результатом будет каша.

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

Пример таблицы 2 на 2.

<table width="100%" border="1">

<tr>

<td>текст первой ячейки первой строки</td>

<td>текст второй ячейки первой строки</td>

</tr>

<tr>

<td>текст первой ячейки второй строки</td>

<td>текст второй ячейки второй строки</td>

</tr>

</table>

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

Главное правило: количество ячеек в каждой строке должно быть одинаковым. Это ведь таблица.

html в таблице

Но, как и в редакторе Word и Excel, ячейки можно объединять между собой.

Как объединять ячейки в таблице?

Для объединения используют атрибуты Colspan и Rowspan. Span переводится как "охватывать" или "перекрывать". Дословный смысл - охватить/перекрыть ячейки/строки.

Как объединять ячейки в таблице

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

теги html таблица

В данном примере в первой строке объединили 3 ячейки при помощи атрибута colspan="3". Затем первую ячейку второй строки растянули на четыре строки. Запомните, что растягиваем/объединяем только в первой ячейке. Ее свойство распространятся далее. Всё, что идет раньше, затронуто не будет.

Если у вас есть 5 ячеек и вы хотите объединить со 2 по 4, то нужно именно у ячейки под номером 2 указать атрибут colspan="3".

Обратите внимание на ячейку под номером 9 на рисунке выше. Там объединили сразу и ячейки и строки. Такие действия не запрещаются.

Посмотрите еще один пример для закрепления информации. Поскольку некоторые путают атрибуты и вместо ячеек порой объединяют строки.

Объединение строк html

Оформление таблиц

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

теги html таблица

Результат кода будет следующим.

таблица в html

Как видите, никаких эффектов нет. Можно добавить рамку, указать ширину и высоту.

атрибуты таблицы html

Также можно поиграть с выравниванием. Можно выравнивать как по высоте, так и по ширине.

выравнивание в таблице

Align для выравнивания по горизонтали, а valign - по вертикали. Вот такой результат.

пример создания таблиц в html

Атрибуты align и valign можно применять ко всей строке. Тогда все ячейки, которые находятся в ней, будут подчиняться этим атрибутам.

Кроме тегов <td> и <tr>, есть дополнительный тег <th>. На самом деле это аналог <td>, но используется он только в первой строке и служит заголовком. По умолчанию текст в <th> выравнивается по центру и выделяется жирным.

Как подключать стили к таблице?

Как и любые теги HTML, таблица может преобразовываться посредством стилей. Вам нужно указать файл стилей в области head <link rel = “stylesheet” href = “style.css” type = “text/css”> или готовый стиль (указывается также в head).

<head>

...

<style type="text/css">

table {

font-family: Verdana, Arial, Helvetica, sans-serif;

color: #000000;

}

.my_class

{

color: #666666;

}

</style>

...

</head>

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

<table class="my_class">

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

<table class="style_table" width="100%" border="1">

<tr class="style_row1">

<td class="style_td1"> текст первой ячейки первой строки</td>

<td class="style_td2"> текст второй ячейки первой строки</td>

</tr>

<tr class="style_row2">

<td>текст первой ячейки второй строки</td>

<td>текст второй ячейки второй строки</td>

</tr>

</table>

Если в названии стиля где-нибудь допущена ошибка, то результата не увидите. Если же в самом стиле есть ошибки, но при этом названия совпадают, эффекта не будет. Каждая запятая или двоеточие играет большую роль.

Дополнительные атрибуты у таблиц

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

align

Выравнивание по горизонтали

valign

Выравнивание по вертикали

background

Фоновое изображение в ячейке/таблице

bgcolor

Цвет фона в ячейке

bordercolor

Цвет рамки таблицы/ячейки

height

Высота ячейки

nowrap

Запрет переноса текста в строке.

width

Ширина ячейки/таблицы

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

примеры таблиц html

Красивые созданные с помощью HTML таблицы. Примеры

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

html таблицы примеры
Это как в приготовлении блюд. Ингредиенты те же, а вариантов рецептов большое множество.

как сделать таблицу html

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

Статья закончилась. Вопросы остались?
Комментарии 0
Подписаться
Я хочу получать
Правила публикации
Редактирование комментария возможно в течении пяти минут после его создания, либо до момента появления ответа на данный комментарий.