Ячейки-заголовки в таблице HTML


Оглавление (нажмите, чтобы открыть):

Тег th

Тег th задает ячейку-заголовок HTML таблицы. Существует также тег td, который задает обычную ячейку таблицы.

Разница между td и th: первый — это обычная ячейка, а второй — это ячейка-заголовок. Пример: Иванов, Петров, Сидоров — это обычные ячейки, а фамилия — это ячейка-заголовок.

По умолчанию текст в ячейке-заголовке стоит по центру и жирный. Это поведение можно поменять с помощью CSS свойств text-align и font-weight.

Для выравнивания можно также воспользоваться атрибутом align. Он считается устаревшим, однако до сих пор работает во всех браузерах (лучше, конечно же, пользоваться CSS).

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

Пример

Давайте создадим таблицу с ячейками th и td:

HTML Таблицы

Пример таблицы HTML

Компании Контакты Страны
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Определение таблицы HTML

Таблица HTML определяется тегом

.

Каждая строка таблицы определяется тегом

. Заголовок таблицы определяется с помощью тега

создает новую строку. Далее во вложенных

, ,

, или
  • cols — линия отображается между колонками
  • none — все границы скрываются
  • rows — граница рисуется между строками таблицы, созданными через тег
  • 12. Свойство w — задает ширину таблицы: либо в пикселях, либо в процентах.

    13. Свойство — можно указать имя класса, которому принадлежит таблица.

    14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

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

    и

    1. Свойство align=»параметр» — задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

    • left — выравнивание по левому краю
    • center — выравнивание по центру
    • right — выравнивание по правому краю

    2. Свойство background=»URL» — задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

    3. Свойство bgcolor=»цвет» — задает цвет фона ячейки.

    4. Свойство bordercolor=»цвет» — задает цвет рамки ячейки.

    5. Свойство char=»буква» — задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

    6. Свойство colspan=»число» — задает число объединяемых горизонтальных ячеек.

    7. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах %.

    8. Свойство w — задает ширину таблицы: либо в пикселях, либо в процентах %.

    9. Свойство rowspan=»число» — задает число объединяемых вертикальных ячеек.

    10. Свойство valign=»параметр» — выравнивание содержимого ячейки по вертикали.

    • top — выравнивание содержимого ячейки по верхнему краю строки
    • middle — выравнивание по середине
    • bottom — выравнивание по нижнему краю
    • baseline — выравнивание по базовой линии

    Примечание 1

    Для тега

    доступны такие же параметры, что и для

    будут иерархично применены ко всем

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

    тега.

    Пример

    Firstname Lastname Age
    Jill Smith 50
    Eve Jackson 94

    Примечание: Элементы

    являются контейнерами данных таблицы.
    Они могут содержать все виды HTML-элементов; текст, изображения, списки, другие таблицы, etc.

    Таблица HTML-Добавление границы

    Если граница для таблицы не указана, она будет отображаться без границ.

    Граница задается с помощью свойства CSS border :

    Пример

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

    Таблица HTML-свернутые границы

    Если требуется свернуть границы в одну границу, добавьте свойство CSS border-collapse :

    Пример

    Таблица HTML-Добавление заполнения ячеек

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

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

    Чтобы задать заполнение, используйте свойство CSS padding :

    Пример

    Таблица HTML-заголовки по левому краю

    По умолчанию заголовки таблиц являются полужирными и центрированными.

    Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :

    Пример

    Таблица HTML-Добавление интервала границы

    Интервал между границами определяет расстояние между ячейками.

    Чтобы задать интервал границы для таблицы, используйте свойство CSS border-spacing :

    Пример

    Примечание: Если таблица имеет свернутые границы, border-spacing не имеет эффекта.

    Таблицы HTML-ячейки, охватывающие множество столбцов

    Чтобы сделать ячейку, охватывающую более одного столбца, используйте атрибут colspan :

    Пример

    Name Telephone
    Bill Gates 55577854 55577855

    Таблицы HTML-ячеек, которые охватывают много строк

    Чтобы сделать ячейку, охватывающую более одной строки, используйте атрибут rowspan :

    Пример

    Name: Bill Gates
    Telephone: 55577854
    55577855

    Таблица HTML-Добавление заголовка

    Чтобы добавить подпись к таблице, используйте тег :

    Пример

    Monthly savings

    Month Savings
    January $100
    February $50

    Примечание: Тег должен быть вставлен сразу после тега

    .

    Особый стиль для одного стола

    Чтобы определить специальный стиль для специальной таблицы, добавьте в таблицу атрибут id :

    HTML Таблицы

    Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.

    Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .

    Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.


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

    Пример: Простая HTML-таблица

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Граница таблицы

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

    Пример: Применение свойства border

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3
    Свойство border следует устанавливать как для самой таблицы так и для её ячеек и .

    Одинарная рамка для таблицы

    По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

    Пример: Применение свойства border-collapse

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Поля и интервалы таблицы

    По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.

    Пример использования padding и border-spacing:

    Пример: Применение свойств padding и border-spacing

    padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4
    border-spacing — это расстояние между ячейками (зеленый цвет)

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4
    Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

    Ширина таблицы

    Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
    Вот пример использования свойства width:

    Пример: Применение свойства width

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Объединение ячеек (colspan и rowspan)

    Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

    Объединение столбцов

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

    Пример: Применение атрибута colspan

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

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

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

    Пример: Применение атрибута rowspan

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

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

    Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.

    Пример: Применение тега

    Это заголовок таблицы

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Теги группирования элементов таблиц

    Для группирования элементов таблиц служат теги , и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:

    Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.

    Пример: Теги , и

    Это подвал таблицы
    Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4

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

    Объединение столбцов

    Напиште разметку для таблицы, изображенной на рис.1.

    Реши сам »

    Ячейка на два столбца
    Ячейка 1 Ячейка 2

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

    Напиште разметку для таблицы, изображенной на рис.1.

    Реши сам »

    Ячейка на три строки Ячейка 1
    Ячейка 2
    Ячейка 3

    Убрать двойную рамку таблицы

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

    Широкая таблица

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

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

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

    Поле внутри ячеек

    Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

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

    Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.


    HTML тег

    С недавнего времени тег

    стал заметно сдавать свои позиции по популярности другому тегу

    Синтаксис тега

    Между открывающим тегом

    и закрывающим тегом

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

    Каждый тег

    создаются столбцы. Можно создавать множество столбцов. При этом нужно следить за количеством столбцов в каждой строке. Например, если в первой строке было 5 столбцов, то и в следующих строках должно быть 5 столбцов. Иначе таблица поплывет. Есть возможность объединять ячейки.

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

    Приведем пример, html код:

    Преобразуется на странице в следующее:

    Пример таблицы
    Столбец 1 Столбец 2

    Обратите внимание на ячейку

    . Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег

    (заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

    Теперь рассмотрим подробно все атрибуты тега

    .

    Атрибуты и свойства тега

    К открывающему тегу

    можно прописывать различные атрибуты.

    1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

    • left — выравнивание по левому краю
    • center — выравнивание по центру
    • right — выравнивание по правому краю

    В разобранном выше примере мы выравнивали таблицу по центру align=»center» .

    Этот атрибут можно применять не только к таблице, но и к отдельным ячейкам таблицы

    . Таким образом, в разных ячейках выравнивание будет разное.

    2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

    Преобразуется на странице в следующее:

    или строкам

    Пример таблицы
    Столбец 1 Столбец 2

    В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style=»color:white;» . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

    Более подробно про фон читайте в статье: как сделать фон для сайта

    3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

    4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″ , что означает толщина рамки — 1 пиксель.

    5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″ , то рамки не будет и цвет рамки не будет иметь смысла.

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

    7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

    8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

    9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

    • void — не отрисовывать границы
    • border — граница вокруг таблицы
    • above — граница по верхнему краю таблицы
    • below — граница снизу таблицы
    • hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
    • vsides — рисовать только вертикальные границы (слева и справа от таблицы)
    • rhs — граница только на правой стороне таблицы
    • lhs — граница только на левой стороне таблицы

    10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

    11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

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

    Атрибуты и свойства

    . Параметры для одного тега

    внутри него

    Как сделать, чтобы границы ячеек в таблице не склеивались

    В случае использования border (граница ячеек) и нулевых отступов между ячейками, они все равно склеиваются и получается удвоенный border. Чтобы это избежать нужно прописать в стилях таблице border-collapse: collapse :


    Более подробно про это свойство читайте в специальной статье border-collapse CSS

    Уважаемый читатель, теперь Вы узнали гораздо больше о html теге table. Теперь советую перейти к следующему уроку.

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

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

    Необходимые знания: Базовый HTML (Введение в HTML).
    Цель: Изучить более продвинутые возможности HTML таблиц и их доступность.

    «>Добавление заголовка к таблице с помощью

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

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

    .

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

    Заголовок помещают сразу после тега

    .

    Примечание: Атрибут summary также может быть использован в

    элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать элемент, так как summary deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

    Упражнение: Добавление заголовка

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

    1. Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
    2. Добвьте подходящий заголовок к таблице.
    3. Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

    Примечание: Этот пример можно также найти на GitHub по ссылке timetable-caption.html (see it live also).

    _ _и_

    «>Добавление структуры с помощью

    , и

    Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя , ) определяющий набор строк суммирующих столбцы таблицы.»> и , которые позволяют вам разметить header, footer и body секции таблицы.

    Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отбражаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

    Ячейки-заголовки в таблице HTML

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

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

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

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

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

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

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

    Атрибут NOWRAP

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

    Атрибут СОLSPAN

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

    Атрибут ROWSPAN

    Атрибут ROWSPAN, используемый в тегах и , подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.

    Атрибут WIDТН

    Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег , чтобы дать ширину всей таблицы, а можно использовать в тегах или , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге W > таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

    Применение пустых ячеек

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

    Атрибут СЕLLРАDDING

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

    Атрибуты АLIGN и VALIGN

    Теги , и можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:

    ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.

    ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

    АLIGN=сеnter располагает содержимое ячейки по центру.

    АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

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

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

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

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

    Атрибут BORDER

    В теге часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав . Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.

    Атрибут CELLSPACING

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

    Атрибут BGCOLOR

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

    Атрибут BACKGROUND

    Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.

    Использование таблиц в дизайне страницы


    Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега красиво размещать на странице текст и графику. Пока тег остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования «пустого пространства», что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.

    Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью

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

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

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

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

    Вы создали двойной фон — GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях ( ). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.

    Web Press

    Статьи Вебмастеру

    Web Press

    Создание и оформление таблиц. HTML + CSS

    Категория

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

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

    Основа таблицы

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

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

    • — парный тег создает ячейку, которая служит заголовком столбца, данный тег является не обязательным;
    • — обязательный парный тег создает ячейки — основу таблицы;

    Как видно из кода расположенного выше, таблица содержит четыре строки (

    ) и пять столбцов. Ячейки первой строки — заголовки столбцов (
    ). Со второй строки по четвертую ячейки содержат основные данные таблицы( ). Теги , универсальны, и могут содержать в себе не только обычный текст, но и всевозможные теги, вплоть до других таблиц!

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

    • Парный тег основа таблицы, все остальные теги вложены в него;
    • Парный тег
    • второй уровень таблицы или ее строка, должен быть вложен в тег
      ;
    • Парные теги
    • и содержат табличные данные;
    • Если поместить любой другой тег или текст вне парного тега
    • и третий уровень таблицы или ее ячейки, должны быть вложены в тег
      , то эти данные будут проигнорированы и никак не отобразится на веб-странице;

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

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

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

      Рис. 2. Таблица с заголовком.

      Секции таблицы

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

      • — Секция заголовков столбцов;
      • — Секция основы таблицы;
      • — Секция итоговых данных, резюмирующая всю таблицу;

      , , , помещаются внутрь таблицы
      , и должны содержать теги :

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

      Выше была рассмотрена таблица с простой структурой, а что если необходимо ее усложнить, к примеру, объединить несколько ячеек в одну. Для этого случая существуют специальные атрибуты COLSPAN и ROWSPAN тегов

      ), воспользуйтесь атрибутом ROWSPAN со значением 2:

      Обратите внимание, если объединять ячейки атрибутами COLSPAN или ROWSPAN, необходимо убрать из кода объединенные ячейки, кроме той с которой начинается объединение, их количество будет зависеть от значения атрибута COLSPAN, ROWSPAN.

      То есть, в примере 1, объединяются четыре ячейки, начиная с первой, которой назначается атрибут COLSPAN=4 (т.к. с нее начинается объединения), остальные три необходимо удалить (т.к. они считаются объединенными). В коде останется только пятая ячейка (т.к. она не входит в объединение).

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

      Рис. 4. Объединение ячеек таблицы с помощью атрибутов COLSPAN, ROWSPAN.

      Оформление таблиц CSS свойствами

      После создания таблицы средствами HTML, переходим к следующему этапу, оформление таблицы с помощью стилей CSS, которые применим к тегам

      и . Первый служит для объединения по горизонтали, второй по вертикали. Значением для атрибута случит число объединяемых ячеек:

      1. Для объединения по горизонтали первых четырех ячеек последней строки таблицы, необходимо атрибуту COLSPAN тега

      (в котором содержится текст “Итог 1”) присвоить значение 4:

      2. Для объединения ячеек по вертикали основной части документа (часть

      ,
      , , .

      Рамки для ячеек

      Рамку вокруг ячеек можно рисовать с помощью CSS свойства border, со следующим синтаксисом:

      • толщина линии – может задаваться в пикселях (px), а также с помощью специальных зарезервированных слов: thin (2 px), medium (4 px) и thick (6 px);
      • тип начертания – значения атрибута специальные слова: dotted (точечный пунктир), dashed(пунктирная линия), solid (линия), double (двойная линия) и т.д.

      Рис 5. Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой.

      Если необходимо, чтобы рамка была только между ячейками, а не обрамляла каждую в отдельности, необходимо воспользоваться стилевым свойством border-collapse, принимающее значение:

      • collapse — рамка между ячейками только одна;
      • separate – каждая ячейка обрамляется собственной рамкой;

      Рис 6. Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой.

      Размеры ячеек

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

      Рис 7. Применение свойства width и height, для задания ширины и высоты ячеек.

      Отступы в ячейках

      Существует два вида отступов внешние и внутренние, первый вид отступа задается между границами соседних ячеек, второй от границ ячеек до их содержимого. CSS свойства создающие отступы указаны ниже:

      • padding – внутренний отступ, значение устанавливается в пикселях (px);
      • border-spacing – внешний отступ, значение устанавливается также в пикселях (px). Данный параметр не следует употреблять, если , т.к. отступ устанавливается между границами соседних ячеек, а при наличие указанного свойства соседние ячейки отделены лишь одной рамкой;

      Рис. 8. Применение к таблице свойства padding, для задания отступов.


      Расположение заголовка

      По умолчанию заголовок таблицы располагается над ней, однако место положение можно менять с помощью стилевого свойства caption-side, которые принимает значения:

      • top – заголовок располагается над таблицей;
      • bottom – заголовок располагается под таблицей;

      Цвет ячеек

      Для закрашивания ячейки определенным цветом необходимо воспользоваться свойством background-color:

      Рис. 10. Выравнивание содержимого ячеек свойствами text-align и vertical-align.

      Оформление содержимого ячейки

      Под оформление содержимого понимается форматирование текста находящегося в ячейках. Основное CSS свойство, применяемое для этой цели является font:

      Рис. 11. Оформление содержимого ячейки свойством font.

      Подробнее о свойстве font, а также других стилевых свойств для оформления текста читайте в статье Оформление текста с помощью CSS

      HTML: Добавление рамки и заголовка к таблице

      Рамка таблицы

      Тег

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

      По стандарту HTML5 значением атрибута border может быть либо 1, либо пустая строка (обозначается как пара двойных кавычек «»). Не важно, какое значение атрибута вы зададите, если он присутствует, то рамка будет отображаться:

      Если вам не нравится вид рамки у таблицы, заданный по умолчанию, т.е. двойные рамки, вы можете воспользоваться атрибутом style, прописав в нем CSS свойство border-collapse со значением collapse, это придаст рамке стандартный вид:

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

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

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

      Тег заголовка может содержать в себе любые элементы, которые можно использовать в теле HTML-документа. По умолчанию содержимое тега отображается над таблицей и выравнивается по ее центру. Расположение заголовка можно изменить применив к нему CSS свойство caption-side:

      Таблицы документа html (ч.1)

      Переходим к изучению таблиц. Таблицы играют огромную роль в создании html-страниц сайта. С их помощью можно придать странице сколь угодно сложную компоновку. Поэтому советую досконально изучить этот мощный инструмент создания сайта.

      Создание таблицы документа html

      Для создания таблицы служит тэг

      . Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг , для создания ячеек —
      , .

      Тэг

      используется для создания ячеек с заголовками.

      Тэг

      — для обыкновенных ячеек с данными.

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

      В чем же «прелесть» таблиц и почему они нашли такое широкое применение в сайтостроении? Дело в том, что, используя таблицы, можно сделать аккуратную компоновку информации в пределах Вэб-страницы, добиться точного расположения того или иного фрагмента страницы, будь то текст, графика или гиперссылка. Например, используя таблицу, можно легко добиться отображения текста в нескольких колонках, подобно газетной публикации.

      Урок 8. Таблицы в html

      Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

      Таблица в html состоит из строк и ячеек в этих строках. Это не опечатка, не из строк и столбцов, а именно из строк и ячеек. Считывание информации по таблице в html идёт построчно.

      Проще говоря смысл написанного кода такой:
      Первая строка — 1-ая, 2-ая . ячейки, Вторая строка — 1-ая, 2-ая . ячейки, Третья строка. и так далее.

      Теги, используемые для построения таблицы в html

      table — обязательный тег, открывающий и закрывающий таблицу
      caption — необязательный тег, обозначающий заголовок таблицы
      th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
      tr — обязательный тег, с которого открывается и закрывается строка
      td — обязательный тег, обозначающий открытие и закрытие ячейки в строке

      Пример кода простой таблицы

      В браузере отобразится

      Внимательно просмотрите таблицу и прочитайте комментарий к каждому тегу. Очень важно понять принцип построения таблицы.
      Во-первых, в ней все теги парные (не забывайте закрывать их), во-вторых, следует внимательно включать внутрь одних тегов другие, чтобы таблица отобразилась корректно, в-третьих, старайтесь делать отступы перед каждой строкой, ячейкой, чтобы Код был Читаемым и в случае ошибки можно было легко её найти.

      Назначение таблиц в html

      Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
      На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой.

      Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

      У тега table есть следующие атрибуты:

      width — ширина таблицы. может быть в пикселях или % от ширины экрана.
      bgcolor — цвет фона ячеек таблицы
      background — заливает фон таблицы рисунком
      border — рамка и границы в таблице. Толщина указывается в пикселях
      cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
      Как и ранее, значение атрибута прописываем в кавычках.

      Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

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

      frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

      void — рамки нет,
      above — только верхняя рамка,
      below — только нижняя рамка,
      hsides — только верхняя и нижняя рамки,
      vsides — только левая и правая рамки,
      lhs — только левая рамка,
      rhs — только правая рамка,
      box — все четыре части рамки.

      rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

      none — между ячейками нет границ,
      groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
      rows — границы только между строками,
      cols — границы только между стобцами,
      all — отображать все границы.

      Рассмотрим пример кода

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

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

      align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
      cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
      cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
      Рассмотрим пример

      В браузере отобразится выравненная по центру таблица следующего вида

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

      Строки tr и ячейки td в таблицах HTML

      Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.

      Для тегов tr и td есть следующие

      align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
      valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
      bgcolor — задает цвет строки
      width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
      height — высота ячейки (все ячейки в строке примут данный параметр)

      Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

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

      Спасибо за внимание! Надеюсь материал был полезен!

      Мастер Йода рекомендует:  Программист разработал язык программирования под стиль песен 80-х
      Добавить комментарий