Содержание

Тег table

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯


Пример

Простая HTML-таблица, содержащая два столбца и две строки:

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Подробнее примеры ниже.


Определение и использование

Тег <table> определяет таблицу HTML.

Таблица HTML состоит из элемента <table> и одного или нескольких <tr>, <th>, и <td> элементов.

Элемент <tr> определяет строку таблицы, элемент <th> определяет заголовок таблицы, а элемент <td> определяет ячейку таблицы.

Более сложная HTML-таблица может также включать <caption>, <col>, <colgroup>, <thead>, <tfoot>, и <tbody> элементы.

Примечание: Таблицы не должны использоваться для макета страницы! Исторически сложилось так, что некоторые веб-авторы имеют неиспользуемые таблицы в HTML как способ управления их макета страницы. Однако существуют различные альтернативы использованию HTML-таблиц для макета, в первую очередь с использованием CSS.


Поддержка браузера

Элемент
<table> Да Да Да Да Да


Различия между HTML 4,01 и HTML5

Атрибуты «align», «bgcolor», «border», «cellpadding», «cellspacing», «frame», «rules», «summary», and «width» не поддерживается в HTML5.


Атрибуты

Атрибут Значение Описание
align left
center
right
Не поддерживается в HTML5.
Задает выравнивание таблицы в соответствии с окружающим текстом
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Не поддерживается в HTML5.
Задает цвет фона для таблицы
border 1
0
Не поддерживается в HTML5.
Указывает, используется ли таблица для целей компоновки
cellpadding pixels Не поддерживается в HTML5.
Определяет расстояние между стеной ячейки и содержимым ячейки
cellspacing pixels Не поддерживается в HTML5.
Задает пространство между ячейками
frame void
above
below
hsides
lhs
rhs
vsides
box
border
Не поддерживается в HTML5.
Определяет, какие части внешних границ, которые должны быть видимы
rules none
groups
rows
cols
all
Не поддерживается в HTML5.
Определяет, какие части внутренней границы должны быть видимы
summary
text Не поддерживается в HTML5.
Задает сводку содержимого таблицы
width pixels
%
Не поддерживается в HTML5.
Задает ширину таблицы

Глобальные атрибуты

Тег <table> также поддерживает Глобальные атрибуты в HTML.


Атрибуты события

Тег <table> также поддерживает Атрибуты событий в HTML.


Попробуйте примеры

Заголовки таблицТаблица с подписью
Создание заголовков таблиц.

Таблица с подписью
Таблица HTML с подписью.

Теги внутри таблицы
Отображение элементов внутри других элементов.

Ячейки, которые охватывают более одной строки/столбца
Определение ячеек таблицы, охватывающих более одной строки или одного столбца.


Похожие страницы

HTML Учебник: HTML Tables

HTML DOM Ссылки: Table Object

CSS Учебник: Styling Tables


Параметры CSS по умолчанию

В большинстве обозревателей элемент <table> будет отображаться со следующими значениями по умолчанию:

Пример

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы



Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

HTML тег

❮ Назад Вперед ❯

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

Строки в таблице задаются парным блочным тегом <tr>. Каждая строка в таблице записывается в отдельный тег <tr>.

В тег <tr> записываются ячейки таблицы, которые добавляются при помощи тега <td> . Каждая ячейка записывается в отдельный тег <td>. В ячейках записывается содержимое таблицы (числа, текст и т.д.).

Заголовок строки или столбца таблицы задается при помощи тега <th>. Тег <th> размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.

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

Для создания более сложных таблиц используются теги <caption>, <col>, <colgroup>, <tbody>, <thead> и <tfoot>, которые вкладываются в тег <table>.

Тег <table> парный, содержимое записывается между открывающим (<table>) и закрывающим (</table>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <table  border="1">
      <tr>
        <th>Месяц</th>
        <th>Число</th>
      </tr>
      <tr>
        <td>Июнь</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>Июль</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>

Попробуйте сами!

Результат

Атрибуты тега <table> не поддерживаются в HTML5. Для стилизации таблиц используйте CSS стили.

Тег <table> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <table> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <table>:

  • CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
  • CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
  • CSS свойство font-size задает размер щрифта.
  • CSS свойство font-weight устанавливает насыщенность шрифта.
  • CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
  • CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега <table>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <table>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <table>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Тег HTML

❮ Пред. Следующий ❯

Тег

определяет HTML-таблицу. Он содержит другие элементы HTML, определяющие структуру таблицы.

Тег

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

Не рекомендуется использовать таблицы для верстки. Иногда таблицы неправильно используются в HTML для управления макетом страницы. Для этого вы можете использовать CSS в качестве альтернативы HTML-таблицам.

Тег

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

Тег

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

Тег

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

Более сложная таблица может также включать элементы

,
идет парами. Содержимое записывается между открывающим (
) и закрывающим (
) тегами.

Пример тега HTML

:
 

  <голова>
    Название документа
    <стиль>
      стол {
        ширина: 80%;
        поле: 30px авто;
        граница коллапса: коллапс;
      }
      й,
      тд {
        отступ: 10 пикселей;
        граница: 1px сплошная #666;
      }
    
  
  <тело>
    <таблица>
      

Попробуй сам »

Результат

Атрибуты тега

Месяц Дата
Июнь 10.06.2018
Июль 15.07.2018
не поддерживаются в HTML5. Для таблиц стилей используйте свойства CSS, перечисленные ниже.

Таблица

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

Как оформить тег

?

Общие свойства для изменения визуального веса/выделения/размера текста в теге

:
  • Свойство CSS font-style устанавливает стиль шрифта. нормальный | курсив | наклонный | начальная | наследовать.
  • Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
  • Свойство CSS font-size устанавливает размер шрифта.
  • Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
  • Свойство CSS text-transform управляет регистром и регистром текста.
  • Свойство CSS text-decoration определяет украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Раскрашивание текста в теге

:
  • Свойство CSS color описывает цвет текстового содержимого и оформления текста.
  • Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега

:
  • Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
  • Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
  • Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
  • Свойство CSS word-break указывает, где строки должны быть разорваны.

Другие свойства тега

, на которые стоит обратить внимание:
  • Свойство CSS text-shadow добавляет тень к тексту.
  • Свойство CSS text-align-last задает выравнивание последней строки текста.
  • Свойство CSS line-height определяет высоту строки.
  • Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
  • Свойство CSS word-spacing задает расстояние между словами.

Форматирование страниц с помощью таблиц HTML

Форматирование страниц с помощью HTML-таблиц

Дональда В. Хаятта

Теги базовой таблицы

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

Во-первых, давайте взглянем на некоторые из основных тегов, связанных с таблицами:

Открывающий ярлык
Закрывающий тег
<ТАБЛИЦА> Начало таблицы Конец таблицы
Начало строки в таблице
Конец ряда
Начало ячейки данных таблицы Завершить ячейку данных
Начало ячейки заголовка таблицы Завершить ячейку заголовка

Модификаторы табличных тегов

Существует ряд модификаций, которые могут быть включены в теги таблицы для указания параметров или предоставления дополнительных функциональность. Некоторые из них:
ГРАНИЦА = n Наличие и размер рамки вокруг ячеек таблицы.
ШИРИНА = n Ширина таблицы или ячейки данных
CELLPADDING = n Объем пространства вокруг данных в ячейке. (по умолчанию 1)
ПРОСТРАНСТВО ЯЧЕЙКИ = n Расстояние между ячейками. (по умолчанию 2)
КОЛСПАН = н Количество столбцов, охватываемых ячейкой данных.
ПРОЛЕТ = n Количество строк, охваченных ячейкой данных.
ВАЛИГН = позиция Выравнивание данных внутри ячейки таблицы (ВЕРХ, НИЗ, ВПРАВО, ВЛЕВО)


В следующем примере создается таблица из 4 ячеек в матрице 2 на 2. Каждый ячейка содержит слово «Ячейка» и число.

Пример:   table1.html

       
       
        

Простая таблица

<ТАБЛИЦА> Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4
Посмотреть веб-страницу

Пробуем несколько простых модификаций

  1. Таблица по умолчанию без границ, поэтому сделать их видимый, включать ГРАНИЦА = 1 внутри тега таблицы.
    <ГРАММА ТАБЛИЦЫ = 1>
    Посмотреть результаты
  2. Чтобы добавить отступ вокруг элементов ячейки, включите ЗАПОЛНЕНИЕ КЛЕТКИ = 10 внутри тега таблицы.
    <ГРАММА ТАБЛИЦЫ = 1 CELLPADDING = 10>
    Посмотреть результаты
  3. Чтобы указать абсолютную ширину ячейки в 100 пикселей, включите WIDTH = 100 внутри одного из тегов ячейки данных. Ширина также может быть указана с использованием процентов для относительных размеров.
    <ШИРИНА ТД = 100>
    Посмотреть результаты
  4. Чтобы ячейка занимала два столбца, вставьте ROWSPAN = 2 внутри тега ячейки данных.

    Посмотреть результаты: С границами Без ограничений
  5. Чтобы выровнять данные по верхнему краю ячейки, вставьте VALIGN = TOP внутри тега ячейки данных.

    Посмотреть результаты: С границами Без ограничений
  6. Чтобы покрасить ячейку данных в красный цвет, вставьте BGCOLOR = «#FF0000» внутри тега ячейки данных.

    Посмотреть результаты: С границами Без ограничений
  7. Чтобы добавить ячейку, охватывающую два столбца, вставьте COLSPAN = 2 внутри тега ячейки данных.

    Посмотреть результаты: С границами Без ограничений

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

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

Использование таблиц для определения общего формата веб-сайта

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

Как только эта структура формата установлена, веб-автор может импортировать блоки текста в различные области, чтобы дать каждой странице то же самое общее ощущение. В приведенном ниже примере каждой области таблицы присваивается другой цвет, чтобы показать части. Чтобы увидеть, как оформлена страница, просто нажмите «Просмотр», а затем «Источник» в навигации браузера.