Результат:

Значения задаются в пикселях (px) или в процентах (%)

○ Выравнивание содержимого в таблице HTML

Чтобы выровнять содержимое в таблице HTML, используют к тегу атрибут «align» и «valign» :

ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:

• left - прижать содержимое к левой части (по умолчанию) ;
• center – установить по центру;
• right - прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:

• top – прижать содержимое к верху;
• bottom – прижать содержимое к низу;
• middle – установить содержимое посередине

Результат:

○ Как выровнять таблице HTML по центру

Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом

Дополнительные и основные теги к таблице

Результат:

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

Предыдущая запись
Следующая запись

В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег

), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек

 

 
Таблица
 
 

 

 
Если в таблице два
 тега TR, то в ней две строки.
 
 

 
Если в строке три тега TD,
 
то в ней
 
три столбца.
 
 
 


 
Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

 

 

 

 
Заголовок центрирован по умолчанию
 
 
Заголовок может объединять
 столбцы
 
 

 
Заголовок может быть расположен
 перед столбцами
 
Текст или данные
 
Текст или данные
 
 

 
Заголовок может объединять
 строки
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 


Использование заголовков таблицы - тег <САРТIОN>
Тег  позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

 

 

 
Заголовок над таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 
Заголовок под таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

 

 

 

 

 
Если вы хотите сделать какую-нибудь
 ячейку шире, чем верхняя или нижняя,
 
 
можно воспользоваться атрибутом
 СОLSPAN=2, 
 
 

 
чтобы
 растянуть ее над любым количеством
 обычных ячеек.
 
 
 


Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

 

 

 

 
Текст или данные -
 ширина 100%
 
 
или

 

 

 
Текст или данные -
 ширина 50%
 
 
или

 

 

 
Текст или данные -
 ширина 200 пикселов
 
 
или

 

 

 
Текст или данные -
 ширина 100 пикселов
 
 


Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 


Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft
 прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left
 выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter
 располагает содержимое ячейки по центру.
АLIGN=right
 выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top
 выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle
 центрирует содержимое ячейки по вертикали.
VALIGN=bottom
 выравнивает содержимое ячейки по ее нижней границе.

 

 

 

 

 
Атрибут VALIGN осуществляет
 выравнивание текста и графики внутри
 ячейки по вертикали.
 
верх,
 
середина,
 
низ.
 
 

 
 VALIGN=top Выравнивает содержимое
 ячейки по ее верхней границе.
 
верх,
 
верх,
 
верх.
 
 

 
VALIGN=middle Центрирует содержимое
 ячейки по вертикали.
 
середина,
 
середина,
 
середина.
 
 

 
VALIGN=bottom Выравнивает содержимое
 ячейки по ее нижней границе.
 
низ,
 
низ,
 
низ.
 
 
 


Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 

 
Текст или данные
 
 
 


Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 
 


Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью

 

 

 

 

 

 
Уральский государственный
 педагогический университет
 
Добро пожаловать!
 

 

 
Учебный курс
 "Основы WEB-мастеринга"
 
 
 
 
 
 


 
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

 
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.

Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу
?

Для постройки таблицы необходимо использовать три тега:
TABLE

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

Закрывающий тег 

 обязателен.
Таблица состоит из ряда
 ряд 1

 ряд 1

 ряд 2

 ряд 2

 ряд 3

 ряд 3

 ячейка 1

 ячейка 2

 ячейка 1

 ячейка 2

 ячейка 1

 ячейка 2

TR
 –

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

 обязателен.
TD
 –

 создает новую ячейку в ряду. Закрывающий тег 

 обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:

 







ряд 1 ячейка1
 
ряд1 ячейка2


ряд 2 ячейка 1
 
ряд 2 ячейка 2


ряд 3 ячейка 1
 
ряд 3 ячейка 2




Вот результат:
ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

ряд 3 ячейка 1

ряд 3 ячейка 2

Давайте все объясню.

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

Дальше, размещаем в середине контейнера 
 тег 
, что говорит о начале нового ряда.

В этом ряду вставляем две ячейки с содержанием при помощи тега


Закрываем ряд тегом 
.

Открываем другой ряд тегом 

Закрываем ряд тегом 
.

Открываем третий ряд тегом 
 и вставляем в него снова две ячейки.

Закрываем ряд тегом 
.

Закрываем таблицу тегом 




ряд 1 ячейка1
 


ряд1 ячейка2









.

Я думаю, разобрались? Если кто-то забыл, что такое атрибут border

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

 будет установлено значение «0»
, тогда границы таблицы будут невидимые.
Посмотрите парочку примеров созданных таблиц
 и можно идти дальше:

 







ряд 1 ячейка 1


ряд 2 ячейка 1




Результат:
Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в . Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:
в строку между тегами  

 вставить изображение.

 







ряд 1 ячейка 1
ряд 1 ячейка 2





Результат:
ряд 1 ячейка 1

ряд 1 ячейка 2



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

Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN

 – определяет количество столбцов.

По умолчанию значение 1.
ROWSPAN

 – определяет количество рядов.

По умолчанию значение 1.

объединяем ячейки
 в верхнем ряду с помощью атрибута colspan

:

 







ряд 1 ячейка 1+2


ряд 2 ячейка 1
 
ряд 2 ячейка 2




Результат:
Как установить размер таблицы?

Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:
WIDTH

 – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT

 – высота таблицы. Размер задается в пикселях или в процентах.

 







ряд 1 ячейка1
ряд1 ячейка2


ряд 2 ячейка 1
 
ряд 2 ячейка 2




Результат:

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

Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:
ALIGN

 – горизонтальное выравнивание содержимого в таблице.

К атрибуту ALIGN

 присваивается значения: left
 (по умолчанию)
, center
,
 right

.

left
 -
прижать содержимое к левой части;
center
 –
установить по центру;
right
 -
прижать содержимое к правой части
VALIGN

 – вертикальное выравнивание содержимого в таблице.

К атрибуту VALIGN

 присваивается значения: top
, bottom
, middle

.

top

 –
прижать содержимое к верху;
bottom

 –
прижать содержимое к низу; 
middle

 –
установить содержимое посередине

 








ряд 1 ячейка1

ряд1 ячейка2



ряд 2 ячейка 1

ряд 2 ячейка 2




Результат:

Как сделать фон таблицы?

Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута:
BGCOLOR

 – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND

 –фон в таблице заполняется рисунком.
Внимание:

 если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге 
. А если только к определенной ячейке, тогда в тег  задает строки, а  точно так же, как и данные таблицы. Для строки могут задаваться следующие переменные:
1. Уже известные вам border, bordercolor и bgcolor.
2. Align - выравнивание текста в строке. Может принимать значения left, center и right.
3. Valign - данный тэг выравнивает текст по вертикали. Принимает следующие значения:
top - текст выравнивается по верхней границе;
middle - по центру;
bottom - по нижней границе.
Пример оформления строки:
;
;
;
.
Параметры ячеек
И последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML - параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента:
1. Colspan - данный параметр указывает количество столбцов, на которые может простираться ячейка.
2. Rowspan - указывает уже количество строк, которое занимает данная ячейка.
Так как оформление ничем не отличается от прописывания строки, то не будем приводить пример кода.
Выводы
Сделать таблицу не так сложно, как может показаться на первый взгляд. Главное при написании ее кода - усидчивость и внимание.
Что касается того, как вставить таблицу в HTML, то ее шифр достаточно скопировать и вставить именно в то место вашей страницы, в котором она, по вашему мнению, должна располагаться.
Не бойтесь экспериментировать, и вскоре вы в совершенстве овладеете техникой создания таблиц. Успехов!

Таблица c рамками



.


Для лучшего понимания посмотрите пример:

 







ряд 1 ячейка1

ряд1 ячейка2



ряд 2 ячейка 1

ряд 2 ячейка 2




Результат:

Внимание:

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

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

 –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.

 







ряд 1 ячейка1
ряд1 ячейка2


ряд 2 ячейка 1
ряд 2 ячейка 2




Результат:
ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

CELLSPACING

 –расстояние между границами соседних ячеек.

 







ряд 1 ячейка1
ряд1 ячейка2


ряд 2 ячейка 1
ряд 2 ячейка 2




Результат:
ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

Фух, рассказал!

Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы
. А вам, рекомендую хорошо закрепить материал.

Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.

Всего вам хорошего!

Спасибо, что посетили мой блог 
Таблицы - одни из наиболее важных, но в тоже время сложных элементов, которые должны присутствовать на веб-страницах. С их помощью удобно подавать важную и полезную информацию в довольно сжатой форме. Конечно, большинство редакторов в шаблонах, работающих на различных движках, позволяют автоматически вставлять таблицу на страницу сайта или отдельной публикации, но что, если дизайн веб-ресурса, его страницы создаются с нуля? Тогда перед начинающим мастером может встать проблема: как сделать Давайте разберемся, как же правильно и быстро создать данный элемент.
Выбираем редактор
В первую очередь, приступая к созданию таблицы, следует определиться с редактором, в котором вы будете работать. Конечно, проще всего выбрать ту программу, в которой вы создаете основной код сайта. Но лучше всего использовать для этих целей старый добрый блокнот.
Вы можете спросить, для чего усложнять себе жизнь, ведь если делать все сразу в редакторе, то и результат можно увидеть тоже сразу, еще и подсказки программы использовать.
Да, это действительно так, но, создавая таблицу с чистого листа, вы не только сможете досконально изучить сам принцип ее создания, но и не допустить досадных опечаток и ошибок в основном коде. Иногда случается так, что курсор случайно перемещается вниз, и в процессе написания в код закрадывается ошибка, которую порой сложно найти. Создав таблицу в блокноте, вы сможете скопировать ее шифр и вставить в нужное вам место.
Алгоритм создания таблицы
Для начала составим краткий алгоритм, как сделать таблицу в HTML. Это нужно для того, чтобы вы понимали последовательность каждого шага. Затем разберем, как именно выполнять каждый из пунктов.
Начнем с подготовительных действий.
1. Рисуем на листе бумаги схематическое изображение таблицы.
2. Подсчитываем количество строк и ячеек. Если количество последних разное - считаем для каждого рядочка отдельно.
3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.).
4. Записываем основные параметры таблицы - цвет, высоту и ширину, выравнивание текста - в общем, все, что вам покажется нужным.
1. Вставляем тэги таблицы.
2. Вставляем тэги строк исходя из того количества, которое вам нужно.
3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге.
4. Задаем параметры для таблицы в целом.
5. При надобности задаем показатели для отдельных ячеек.
6. Заполняем наши ячейки текстом.
Создаем таблицу
Итак, вы выбрали редактор, теперь давайте разберемся, как создать таблицу в HTML. Тэг, с помощью которого в код страницы вставляется таблица (
), является парным, то есть начинается наша конструкция с данного тэга, а заканчивается .
Вставив тэги таблицы, переходим к созданию строк и ячеек.
Сразу отметим, что данные элементы также являются парными. Тэг 
 - ячейки.
Для заглавных ячеек следует использовать парный элемент 
.
Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу "Tab".
Как это может выглядеть? Примерно так:
;
;
;
;
;
;
;
;
 № п/п 
 Фамилия 
1
;
Иванов
.
Как видите, ничего сложного в этом нет. Главное - не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить.
Мы с вами разобрали создание таблицы в HTML, теперь можем переходить к параметрам как самой матрицы, так и ее строк и ячеек.
Параметры таблицы
Когда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее.
Параметры таблицы задаются в тэге 
. К ним относятся:
1. Border - ширина границ. Задается целым числом. По умолчанию границы любой таблицы равны нулю.
2. Bordercolor - цвет границы. Может задаваться как шестнадцатеричным кодом цвета (#00008B), так и его названием на английком (DarkBlue). По умолчанию он всегда серый.
3. Bgcolor - Также задается с помощью кода или названия.
4. Align - выравнивание текста за таблицей. По умолчанию - по левому краю. Есть следующие варианты данного параметра:
left - обтекание справа;
right -обтекание слева;
center - вывод таблицы по центру без обтекания.
5. Width и height - ширина и высота таблицы. Может задаваться как в пикселях, так и в процентах (относительно размера браузера окна).
Прописывая тот или иной показатель, следует обратить особое внимание на оформление. После указания параметра должен идти знак "равно", после которого в кавычках указывается заданное значение.
Что касается цвета текста, то его оформляют так же, как и обычный текст в формате HTML.
Пример оформления таблицы:
;
;
;
;
;
;
;
;
№ п/п
Фамилия
1
;
Иванов
.
Параметры строк
Итак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы?
Параметры строки прописываются в тэге 
№ п/п
Фамилия

 

 
Имя
 
Фамилия
 
 

 
Лариса
 
Исаева
 
 

 
Дмитрий
 
Колесников
 

РЕЗУЛЬТАТ:
 
Таблица без рамок
 
Таблица c рамками
Атрибуты тегов  и  для объединения ячеек
Пример
 

 

 

 
хорьки
 
 

 
вес
 
размер
 
 

 
самцы
 
1.2 – 2.5 кг
 
до 70см
 
 

 
самки
 
0.7 – 1.0 кг
 
до 40см
 

РЕЗУЛЬТАТ:
 


 
хорьки

вес

 
размер

самцы

 
1.2 – 2.5 кг

 
до 70см

самки

 
0.7 – 1.0 кг

 
до 40см


По стандарту HTML5 все ранее используемые атрибуты таблицы, такие как border
, cellspacing
, cellpadding
 и др. больше не поддерживаются и их использование
 валидатор считает ошибками в коде. Для оформления таблиц нужно использовать CSS-стили, с помощью которых можно заменить все устаревшие атрибуты таблиц .
 Например, вместо атрибута cellspacing
 для изменения расстояния между ячейками таблицы используется свойство border-spacing
, а для выравнивания
 содержимого в ячейках таблицы – свойства text-align
 и vertical-aling
. CSS-стили для оформления таблиц
Теги группирования строк html таблицы
Для создания более сложных таблиц можно использовать теги:
Пример
 

 
Потребление пива
 

 

 
Ф.И.О.
 
литров
 
 
 

 

 
Итого
 
250
 
 
 

 

 
Иванов Иван Иванович
 
133
 
 

 
Петров Петр Петрович
 
117
 
 

РЕЗУЛЬТАТ:
Теги группирования столбцов html таблицы
Атрибут тегов  и 

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

Тег col устанавливает параметры отдельно для каждого столбца. При этом неважно, как написать в исходном коде:

  или 
Пример
 

 
 
 

 
желтый
 
красный
 
 

 

 

 


РЕЗУЛЬТАТ:

Не пытайтесь установить стиль text-align
 для тегов  и . Текст, размещенный между тегами ..., не наследует этот стиль,
 поскольку тег  не является потомком ни тега , ни тега .
Горизонтальное выравнивание текста в определенном столбце таблицы можно изменить, указав стиль text-align
 для псевдокласса
 td:nth-child(n)
 ,
 где n – номер столбца. Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan
.
Пример
 

 

 
Наименование
 
Цена (руб.)
 
 

 
Поминутная оплата солярия (от 4 минут)
15
 
 

 
50 минут солярия (14 руб/мин, 1 мес.)
700
 
 

 
100 минут солярия (13 руб/мин, 2 мес.)
1300
 
 

 
200 минут солярия (12 руб/мин, 3 мес.)
2400
 

РЕЗУЛЬТАТ:

Однако, этот метод не сработает, если среди ячеек таблицы присутствует атрибут colspan
.