Атрибуты table – Атрибуты тега | htmlbook.ru

Атрибуты тега | htmlbook.ru

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

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

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

cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.

cols

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

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.

width

Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, атрибут width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

htmlbook.ru

Тег table — таблица на HTML

Тег table создает таблицу. Используется совместно с тегами tr, td, th. Тег tr создает ряд таблицы, а теги td и th создают ячейки этой таблицы. Разница между td и th: первый — это обычная ячейка, а второй — это ячейка-заголовок.

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

См. также теги thead, tbody и tfoot, которые группируют ряды таблицы (отделяют верхнюю часть, основную часть и нижнюю часть таблицы).

См. также тег caption, который задает заголовок всей таблицы.

См. также полезные CSS свойства для таблиц border-collapse, border-spacing, empty-cells, table-layout.

См. также CSS свойство vertical-align, которое задает выравнивание текста в ячейках таблицы по вертикали (оно работает не только для таблиц).

См. также атрибуты rowspan и colspan, которые объединяют ряды и столбцы таблицы.

Атрибуты

Примеры

Пример

В данном примере создана таблица с ячейками th и td. Также добавлен атрибут border

<table border="1">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Посмотреть пример.

Пример

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

<table border="1" cellspacing="0">
	<tr>
		<th>Имя</th>
		<th>Фамилия</th>
		<th>Зарплата</th>
	</tr>
	<tr>
		<td>Иван</td>
		<td>Иванов</td>
		<td>200$</td>
	</tr>
	<tr>
		<td>Николай</td>
		<td>Сидоров</td>
		<td>1000$</td>
	</tr>
</table>

Посмотреть пример.

Атрибуты для таблиц HTML.

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

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

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

Этот атрибут является универсальным, поэтому мы его будем использовать и в таблицах. Это атрибут Align. И так мы хотим содержимое ячеек выровнять по центру, соответственно атрибуту указываем значение center align=«center». Данный атрибут мы можем вставить в тег формирующий ячейку <td> </td>. Содержимое выровняется по центру только у одной ячейки. Если же нужно выровнять всю строку по центру, то атрибут Align

И еще маленький момент, если присмотрится на таблицу, то заголовки у таблицы уже расположены по центру, то есть тег <th> </th> автоматически выравнивает контент по центру.

Ну, и последнее про этот атрибут, это ситуация, когда нужно выровнять всю таблицу по центру. Для этого прописываем атрибут в сам тег <table align=«center»></table> и вся таблица выровняется по центру.

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

4. И рассмотрим последний атрибут для таблицы, с помощью которого можно увеличить расстояние между ячейками. Это похожий атрибут и он так же вставляется в тег <table> </table> — это атрибут cellspacing=

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

• width= «750» — задать ширину таблице
• colspan = «3» — объедениеть три ячейки по горизонтали
• rowspan = «2» — объядение по вертикали
• cellpadding = «10» — задает отступы внутри ячеек в таблице на 10 px
• cellspacing = «5» — расстояние между ячейками размеры рамки
• border «1» — создается толщину рамки вокруг таблицы
• align = «center» — все элементы выровнять по центру

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

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Первая HTML страница</title>
</head>
<body>
  

На этом урок завершим. Результат работы можно посмотреть в Демо-версии и сравнить с тем, что у Вас получилось, а мы идем дальше и переходим к формам.

webteoretik.ru

HTML тег table

Тег <table> определяет HTML таблицу для представления табличных данных.

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

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

Более сложные HTML таблицы также могут содержать элементы <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Разница между HTML 4.01 и HTML5

Атрибуты тега <table>

Общие атрибуты

Тег <table> поддерживает общие атрибуты и атрибуты-события.

HTML пример

Простая HTML таблица с двумя строками и двумя столбцами:

<table>
  <tr>
    <th>Месяц</th>
    <th>Сэкономлено</th>
  </tr>
  <tr>
    <td>Январь</td>
    <td>$100</td>
  </tr>
</table>

CSS стили по умолчанию

Большинство браузеров будут отображать тег <table> со следующими стилями

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

msiter.ru

Html таблицы

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

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

Таблица:<TABLE>…</TABLE>

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

Строка таблицы:<TR>…</TR>

Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы:<TD>…</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отстутствует одна или несколько ячеек для некоторых колонок, то броузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы: <TH>…</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись:<CAPTION>…</CAPTION>

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>…</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где — сверху или снизу таблицы — будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

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

BORDER

Данный атрибут используется в тэге TABLE. Если данный атрибут присутствует, граница таблицы прорисовывается для всех ячеек и для таблицы вцелом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

ALIGN

Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN

Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP

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

COLSPAN

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании — 1.

ROWSPAN

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании — 1.

COLSPEC

Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC=»20%».

studfiles.net

Тег | HTML справочник

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

Описание

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

Основным тегом-контейнером для HTML-таблицы является тег <table>, который требует обязательного присутствия закрывающего тега. Любая таблица состоит из строк (определяются тегом <tr>), содержащих любое количество как заголовочных ячеек (определяются тегом th), так и ячеек с любыми данными (определяются тегом <td>). Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> — обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

Примечание: по стандарту HTML5 все ранее используемые атрибуты таблицы, такие как align, bgcolor, border и т.д. больше не поддерживаются и их использование валидатор будет считать за ошибки в коде. Поэтому для стилизации таблиц нужно использовать CSS, с помощью которого можно заменить все атрибуты. Например, чтобы добавить рамку для таблицы используется свойство border, для изменения заднего фона — свойство background, а для выравнивания строчного содержимого в ячейках таблицы — свойства text-align и vertical-aling.

Атрибуты

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

Стиль по умолчанию

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

Пример

<table>
  <tr>
    <th>Месяц</th>
    <th>Денег на счету</th>
  </tr>
  <tr>
    <td>Декабрь</td>
    <td>100р</td>
  </tr>
</table> 

Результат данного примера в окне браузера:

puzzleweb.ru

| Справочник HTML

Элемент <table> (от англ. «table» ‒ «таблица») определяет таблицу HTML.

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

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

Примечание: Тег <th>, отличается от <td> визуальным представлением данных внутри таблицы: по умолчанию, текст, размещенный в теге <th>, отображается жирным начертанием с выравниванием текста по центру, а текст тега <td> ‒ обычным начертанием с выравниванием по левому краю.

Более сложные таблицы могут содержать такие элементы как, <caption>, <col>, <colgroup>, <thead>, <tfoot> и <tbody>.

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

Синтаксис

<table>
  <tr>
    <td>...</td>
  </tr>
</table>

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

Обязателен.

Атрибуты

alignУстарел в HTML5

Определяет выравнивание таблицы в соответствии с окружающим её текстом.

---

backgroundУстарел в HTML5

Задаёт фоновый рисунок в таблице.

---

bgcolorУстарел в HTML5

Задает цвет фона для таблицы.

---

borderУстарел в HTML5

Толщина рамки в пикселях.

---

bordercolorУстарел в HTML5

Задает цвет рамки.

---

cellpaddingУстарел в HTML5

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

---

cellspacingУстарел в HTML5

Указывает расстояние между ячейками.

colsУстарел в HTML5

Число колонок в таблице.

---

frameУстарел в HTML5

Сообщает браузеру, как отображать границы вокруг таблицы.

---

rulesУстарел в HTML5

Сообщает браузеру, где отображать границы между ячеек.

---

summaryУстарел в HTML5

Краткое описание таблицы.

---

widthУстарел в HTML5

Определяет ширину таблицы.

---

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

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

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

Различия между HTML 4.01 и HTML5

В HTML 5 была прекращена поддержка 12 атрибутов.

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

Пример HTML:

  <table>
    <tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>
    <tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>
    <tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>
  </table>