HTML таблицы|теги html — table, tr, td
Доброго времени уважаемые подписчики!
Сегодняшний урок посветим использованию html таблиц.
В WEB таблицы это не только какие-то отчетные данные, не только расписание или еще что-нибудь в этом стиле. В WEB таблицей можно задать целую структуру сайта.
Сколько вы таких страниц видели в Internet?
Тысячи и тысячи. Но если разобраться, то это вот такая таблица.
Спросите вы, а как располагаются элементы на странице, ровно? А они заключаются в свои таблицы и выравниваются нужным образом.
Благодаря тому, что в каждую ячейку одной таблицы, мы можем поместить новую таблицу любой структуры (или даже несколько таблиц), можно добиться требуемого результата.
Тегом таблицы является тег <table></table>,
строкой таблицы является тег <tr></tr>, и столбцом таблицы – тег <td></td>.
Таблица заполняется по строкам сверху вниз, а по столбцам слева на права. Количество столбцов в строке должно быть одинаково для всех строк.
Давайте рассмотрим пример, и вы сразу все поймете.
Сделаем такую таблицу:
Сделаем это следующим образом:
Ставим тег <table> и начинаем формировать первую строку, пишем:
<tr>
<td>Ячейка 1 строка 1</td>
<td>Ячейка 2 строка 1</td>
<td>Ячейка 3 строка 1</td>
</tr>
У нас получилась первая строка таблицы с тремя столбцами. Аналогично формируем вторую строку:
<tr> <td>Ячейка 1 строка 2</td> <td>Ячейка 2 строка 2</td> <td>Ячейка 3 строка 2</td> </tr>
И третью:
<tr>
<td>Ячейка 1 строка 3</td>
<td>Ячейка 2 строка 3</td>
<td>Ячейка 3 строка 3</td>
</tr>
Наши три строки сформированы, осталось закрыть тег </table>.
Наша таблица готова.
Если таблице нужно дать заголовок, то за это отвечает тег <caption> Заголовок таблицы </caption> .
По умолчанию он располагается по центру, над таблицей. Тег заголовка таблицы необходимо размещать между тегом
В принципе заголовок можно сделать, поставив тег <h4> Заголовок таблицы </h4>перед тегом <table>.
Если столбцу нужно дать заголовок, то для этого предусмотрен тег <th> Заголовок столбца </th>.
Тег <th> – то же что и тэг <td>, но его содержимое отображается полужирным шрифтом с выравниванием по центру, а содержимое <td>, как вы уже увидели, с выравниванием по левому краю, со шрифтом по умолчанию.
С тегами, касающихся таблиц, пожалуй, все.
Теперь рассмотрим параметры этих тегов.
Тег <table> имеет следующие параметры:
width=число – ширина таблицы в пикселях или в % относительно ширины окна браузера.
height=число — высота таблицы в пикселях или в % относительно ширины окна браузера (высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).
align = left – выравнивание таблицы по левому краю.
right
center – выравнивание таблицы по центру.
border= число – толщина рамки таблицы в пикселях.
cellspacing=число — расстояние между смежными ячейками в пикселях (по умолчанию = 2).
cellpadding=число – расстояние между содержимым ячейки и ее границей в пикселях (по умолчанию =1).
bgcolor= цвет – фоновый цвет таблицы.
background=url — фоновое изображение для таблицы.
bordercolor=цвет — цвет всех линий рамки таблицы.
Рассмотрим параметры тегов <tr>, <td>, <th>:
width=число – ширина ячейки в пикселях или в % относительно ширины окна браузера (для <tr>не применяется).
height=число — высота ячейки в пикселях или в % относительно ширины окна браузера (для <tr> не применяется).
(высота обычно рассчитывается автоматически, поэтому менять ее не рекомендую).
align = left – выравнивание в ячейке по левому краю.
right – выравнивание в ячейке по правому краю.
center – выравнивание в ячейке по центру.
top — выравнивание по верхнему краю ячейки.
bottom – выравнивание по нижнему краю ячейки.
middle – выравнивание по середине ячейки.
bgcolor= цве – фоновый цвет ячейки.
background=url – фоновое изображение для ячейки.
bordercolor=цвет – цвет всех линий рамки ячейки.
colspan=число — количество объединяемых ячеек по столбцам (для <tr> не применяется).
rowspan=число— количество объединяемых ячеек по строкам (для<tr> не применяется).
Давайте подробнее остановимся на параметрах colspan и rowspan.
Вы наверное заметили, что количество ячеек в каждой строке таблицы одно и тоже. Да, так и должно быть, но как же тогда сделать таблицу подобную на эту?
Для этого нам понадобятся параметры тега <td> colspan и rowspan..
Итак:
<table border="1" cellspacing="0" cellpadding="0">
Формируем первую строку: так как в первой строке у нас одна ячейка, и она объединяет три ячейки второй строки, то для одной ячейки первой строки укажем параметр
<tr>
<td colspan="3" align="center">1</td>
</tr>
Вторая строка это просто три ячейки:
<tr> <td align="center">2</td> <td align="center">3</td> <td align="center">4</td> </tr>
Третья строка: пятая ячейка третьей строки объединяет две ячейки второй строки ( 2 и 3) и две строки (третью и четвертую).
Поэтому для нее зададим
<tr> <td colspan="2" rowspan="2" align="center">5</td> <td align="center">6</td> </tr>
Таким образом получается, что в четвертой строке должна быть одна ячейка ()
<tr>
<td align="center">7</td>
</tr>
</table>
Наша таблица построена.
Роль таблиц в WEB очень велика, поэтому рекомендую разобраться с построением таблиц.
Поупражняться можно на примерах.
Если возникнут вопросы, пишите или скачайте файл с готовыми таблицами из упражнения.
Ссылка на файл Архив 5 урока
Упражнение:
Таблица 1.
Таблица 2.
Если есть вопросы пишите на E-mail: contact@webformyself.com
Проект webformyself.com – основы самостоятельного сайтостроения
С уважением, Андрей Бернацкий.
Метки: caption, table, td, th, tr, таблицы
Запись опубликована 15.07.2009 в 02:53 и размещена в рубрике Базовый курс. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.
HTML5 | Таблицы
Последнее обновление: 08.04.2016
Для создания таблиц в html используется элемент table. Каждая таблица между тегами
<table> и
</table> содержит строки, который представлены элементом tr. А каждая строка между тегами <tr> и
</tr> содержит ячейки в виде элементов td.
Создадим простейшую таблицу:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблицы в HTML5</title> </head> <body> <table> <tr> <td>Модель</td> <td>Компания</td> <td>Цена</td> </tr> <tr> <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td> </tr> <tr> <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td> </tr> <tr> <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td> </tr> </table> </body> </html>
Здесь у нас в таблице 4 строки, и каждая строка имеет по три столбца.
При этом в данном случае первая строка выполняет роль заголовка, а остальные три строки собственно являются содержимым таблицы.
Разделения
заголовков, футера и тела таблицы в html предусмотрены соответственно элементы thead, tfoot и tbody. Для их применения
изменим таблицу следующим образом:
<table> <caption><b>Популярные смартфоны 2015</b></caption> <thead> <tr> <th>Модель</th> <th>Компания</th> <th>Цена</th> </tr> </thead> <tbody> <tr> <td>Nexus 6P</td> <td>Huawei</td> <td>49000</td> </tr> <tr> <td>iPhone 6S PLus</td> <td>Apple</td> <td>62000</td> </tr> <tr> <td>Lumia 950 XL</td> <td>Microsoft</td> <td>35000</td> </tr> </tbody> <tfoot> <tr> <th colspan="3">Информация по состоянию на 17 марта</th> </tr> </tfoot> </table>
В элемент thead заключается строка заголовков.
Для ячеек заголовок используется не элемент td, а th. Элемент
th выделяет заголовок жирным. А все остальные строки заключаются в tbody
Элемент tfoot определяет подвал таблицы или футер. Здесь обычно выводится некоторая вспомогательная информация по отношению к таблице.
Кроме собственно заголовоков столбцов с помощью элемента caption мы можем задать общий заголовок для таблицы.
Также стоит отметить, что футер таблицы содержит только один столбец, который раздвигается по ширине трех столбцов с помощью атрибута colspan="3".
Атрибут colspan указывает на какое количество столбцов раздвигается данная ячейка. Также с помощью атрибута rowspan мы можем раздвигать ячейку на определенное количество строк. Например:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблицы в HTML5</title>
<style>
td{
width: 60px;
height:60px;
border: solid 1px silver;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td colspan="2">7</td>
</tr>
</table>
</body>
</html>
НазадСодержаниеВперед
ARIA: роль таблицы — Доступность
Значение таблицы атрибута роли ARIA идентифицирует элемент, содержащий роль, как имеющий неинтерактивную табличную структуру, содержащую данные, расположенные в строках и столбцах, аналогичную исходной
HTML-элемент.
<дел
роль = "таблица"
aria-label="Семантические элементы"
aria-describedby="semantic_elements_table_desc"
ария-строка = "81">
<дел>
Семантические элементы для использования вместо ролей ARIA
<дел роль = "строка">
Роль ARIA
Семантический элемент
заголовок
h2
заголовок
h6
группа строк
голова
термин
дт
Элемент с role="table" представляет собой статическую табличную структуру со строками, содержащими ячейки. Ячейки нельзя сфокусировать или выбрать, хотя виджеты в отдельных ячейках таблицы могут быть интерактивными. По возможности настоятельно рекомендуется использовать нативный элемент HTML
Ячейки нельзя сфокусировать или выбрать, хотя виджеты в отдельных ячейках таблицы могут быть интерактивными. По возможности настоятельно рекомендуется использовать нативный элемент HTML . Предупреждение: Если таблица поддерживает состояние выбора, имеет двухмерную навигацию или позволяет пользователю изменять порядок ячеек, используйте сетку . или 9Вместо 0003 древовидной сетки
Чтобы создать таблицу ARIA, добавьте role="table" к элементу контейнера. В этом контейнере каждая строка имеет набор role="row" и содержит дочерние ячейки. Каждая ячейка имеет роль заголовка столбца , заголовка строки или ячейки . Строки могут быть дочерними элементами таблицы или внутри группы строк .
Заголовок таблицы может быть определен с помощью aria-labeledby или aria-label . Все остальные элементы семантической таблицы, такие как
и | , необходимо добавить через связанные роли, например rowgroup , 33 row ,3 row , aria-sort следует добавить к элементу ячейки заголовка (а не к самой таблице). Если какие-либо строки или столбцы скрыты, aria-colcount или aria-rowcount должны быть включены, указывая общее количество столбцов или строк, соответственно, вместе с aria-colindex или aria-rowindex в каждой ячейке. aria-colindex или aria-rowindex устанавливается на позицию ячейки в строке или столбце соответственно. Если таблица включает ячейки, которые охватывают несколько строк или несколько столбцов, то также следует включить aria-rowspan или aria-colspan . Поймите, гораздо проще использовать сетки . Если взаимодействие предусматривает состояние выбора отдельных ячеек, если предоставляется навигация слева направо и сверху вниз или если пользовательский интерфейс позволяет изменять порядок ячеек или иным образом изменять порядок отдельных ячеек, например, путем перетаскивания, используйте сетка или древовидная сетка вместо. role="rowgroup" Необязательный дочерний элемент таблицы, группа строк инкапсулирует группу строк, аналогичную
<дел роль = "строка">
Роль ARIA
Семантический элемент
заголовок
h2
заголовок
h6
группа строк
голова
термин
дт
 Хотя полная таблица содержит 81 запись, как указано в свойстве aria-rowcount , в настоящее время видны только четыре. Столбцы можно сортировать, но в настоящее время они не отсортированы, на что указывает свойство aria-sort в заголовках столбцов. , | и т. д. для структуры таблицы данных. Вы можете добавить эти роли ARIA, чтобы обеспечить доступность в случае удаления собственной семантики таблицы, например, с помощью CSS. Соответствующий вариант использования роли таблицы ARIA — это когда свойство отображения CSS переопределяет собственную семантику таблицы, например, на | дисплей: сетка . В этом случае вы можете использовать роли таблицы ARIA для повторного добавления семантики.Added benefitsnone
Обнаружили проблему с содержанием этой страницы?
Хотите принять участие? Узнайте, как внести свой вклад. Последний раз эта страница была изменена участниками MDN. : Элемент Table Body — HTML: Язык гипертекстовой разметки Категории контента | Нет. | Разрешенный контент | Ноль или более | Отсутствие тега | Начальный тег элемента | Разрешенные родители | В требуемом родительском элементе | ,
элемент border-collapse , чтобы гарантировать, что линии границ являются общими для соседних ячеек, а не имеют свои собственные границы. с пробелом между ними. Шрифт используется для установки начального шрифта для таблицы. элементовИдентификатор учащегося |
Имя |
Основной |
3741255 |
Джонс, Марта |
Информатика |
Ним, Виктор |
Русская литература |
4100332 |
Петров, Александра |
Астрофизика |
и | ячейки. Ячейкам придается светло-серый контур толщиной в один пиксель, отступы настраиваются, и все ячейки выравниваются по левому краю с помощью | text-align thead > tr > th {
цвет фона: #cce;
размер шрифта: 18px;
нижняя граница: 2px сплошная #999;
}
Наконец, ячейки заголовков, содержащиеся в элементе , для создания заголовков внутри каждого | Блок | |||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Идентификатор учащегося | Имя | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Информатика | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 3741255 | Джонс, Марта | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4077830 | Пирс, Бенджамин | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 5151701 | Кирк, Джеймс | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Русская литература | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Ним, Виктор | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Астрофизика | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 4100332 | Петров, Александра | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 8892377 | Тойота, Хироко | |||||||||||||||||||||||||||||||||||||||||||||||||||||||
с атрибутом colspan , охватывающим всю ширину таблицы. В этом заголовке указано имя мажора, содержащегося в | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Спецификация | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HTML Standard # the-tbody-element | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Установите значение на общее количество строк в полной таблице. Если неизвестно, установите 
можно опустить, если первым внутри элемента 
Типичные значения для этого включают точку ( 
в примерах для 
Каждый потенциально может иметь свою собственную строку или строки заголовка; однако может быть только один