Time to site

Здесь можно заказать сайт и продвижение в сети

телефоны: +3 8 (095) 818 40 61 или +3 8 (063) 135 02 90

Вы здесь: Главная / Статьи / Создание сайта / Таблицы в HTML. Создание и форматирование (часть 1)

Таблицы в HTML. Создание и форматирование (часть 1)

Таблицы в HTML. Создание и форматирование (часть 1)

Таблицы в HTML практически ничем не отличаются от стандартных таблиц в Word'e. Про их создание и форматирование мы расскажем в текущей статье.

Введение

Раньше, когда HTML не был так развит, таблицы использовались для верстки макета сайта. Такой способ верстки так и назвался - табличная верстка. Но верстать сайты с помощью таблиц было крайне неудобно. Представьте себе, как это выглядело - таблицы в таблице, все это в ещё одной таблице, потом смотришь - вылезла одна ячейка, и нужно её найти, а чтобы её найти - надо перерыть весь код. С приходом тега <div> и атрибутом "inline-block" эра табличной верстки закончилась. Теперь у таблиц в HTML есть одно назначение - стандартная группировка данных, как в любом текстовом редакторе.

Создание таблицы

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

<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Обрамление таблицы

К таблицам можно применять различные атрибуты. Только стоит помнить одно правило - если мы применяем атрибут для самого тэга <table>, то он применяется для самой таблицы. Не для данных, находящихся в ячейках, а для таблицы. Самые основные атрибуты, применяемые для обрамления таблицы - это "border", "cellspacing" и "bordercolor". Border - показывает границу таблицы. К данному атрибуту подходят цифровые значения. К примеру - <table border="2">. Мы увидим границу таблицы толщиной в 2 пикселя. Cellspacing показывает разграничивающие линии внутри таблицы. Так же, как и тег "border", этот имеет цифровые значения. Пример: <table cellspacing="5">. По умолчанию браузер делает цвет границ таблицы серым. Для изменения цвета границы существует атрибут bordercolor. Цвета задаются как и в заливке, то есть с помощью RGB, названия цвета на англ., CMYK, или с помощью знака решетки "#". Пишется это примерно так: <table bordercolor="#0ff00f">. Чтобы получить таблицу с зелеными границами, и разделениями, то нужно написать такой код: 

<table border="2" cellspacing="5" bordercolor="#0ff00f">

Заголовок таблицы

Иногда, для более точного обозначения таблицы нам приходится делать заголовок. Как сделать заголовок в таблице?
Для этого существует специальный тэг <caption></caption>. Внутри этого тэга пишут само название таблицы. Расположение этого тэга идет после начального табличного тэга <table>.
Для большего юзабилити сайта заголовок таблицы обычно размещается по центру таблицы, сверху или снизу от неё. По умолчанию браузеры размещают заголовок сверху таблицы и по центру, и ширина заголовка не превышает ширины самой таблицы, а в случае, если превышает - то происходит перенос слов на новую строку. Если вы хотите сделать расположение заголовка по своему, то к тегу <caption> применяется атрибут align, в котором допускаются такие значения:

  • left — расположение заголовка в левом краю таблицы.
  • right — расположение заголовка в правом краю таблицы
  • center — название располагается сверху таблицы, в центре. Это и есть расположение, которое задается в браузерах по умолчанию.
  • top — аналогично атрибуту center. Единственное отличие состоит в том, что значение top входит в спецификацию HTML4 и понимается всеми браузерами.
  • bottom — заголовок размещается внизу таблицы по ее центру.

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

Прочитано 198 раз Последнее изменение Четверг, 16 Январь 2014 12:19
Оцените материал
(1 Голосовать)

Комментарии  

0 # Александр 15.01.2014 14:17
Все доступно объяснил! Как раз парился сегодня с таблицами :sigh:Спасибо!
Ответить | Ответить с цитатой | Цитировать
0 # Админ 16.01.2014 09:16
Всегда рады помочь! :lol:
Ответить | Ответить с цитатой | Цитировать
0 # Евгений 11.02.2014 11:41
Спасибо автору!!! :lol:
Ответить | Ответить с цитатой | Цитировать
0 # Арсен 30.04.2014 07:51
:DПолезно и доступно!!!
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить

Мы в социальных сетях

Связаться с нами

Веб студия Time To Site
г. Донецк, бул. Шевченко, д. 133
Телефон: +3 (8095) 818-40-61
Мы работаем с 10:00 до 18:00

QR - код