Разметка таблицы в html: Как создать таблицу в HTML5 и указать её параметры через стили?

Содержание

HTML таблицы основы — Изучение веб-разработки

Обзор: Tables
Далее

Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия — строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.

Начальные условия:	Знание основ HTML (читайте Введение в HTML — Introduction to HTML).
Цель:	Общее знакомство с таблицами HTML.

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

Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

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

Как работает таблица?

Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.

Personal pronouns
			Субъект	Объект
Единствен. числ.	1 Лицо		Я	меня
	2 Лицо		ты	тебя
	3 Лицо	♂	он	его
		♀	она	её
		o	оно	его
Множ. числ.	1 Лицо		мы	нас
	2 Лицо		вы	вас
	2 Лицо		они	их

Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.

Оформление таблиц

Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

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

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

Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.

Когда не надо использовать таблицы HTML?

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

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

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

Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров (например, <header>, <section>, <article>, или <div>) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.

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

Прежде всего, создайте локальную копию blank-template.html и minimal-table.css в новой папке на вашем компьютере.
Содержимое любой таблицы заключается между двумя тегами : <table></table>. Добавьте их в тело HTML.
Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <td> (‘td’ — сокращение от ‘table data’). Введите внутри тегов table следующее:
```
 <td>Hi, I'm your first cell.</td>
```

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

<td>Hi, I'm your first cell. </td>
<td>I'm your second cell.</td>
<td>I'm your third cell.</td>
<td>I'm your fourth cell.</td>

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

<td> создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.

Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <tr> (‘tr’ — сокращение от ‘table row’). Попробуем, как это получится.

Поместите четыре уже созданных ячейки между тегами <tr> как здесь показано:
```
<tr>
  <td>Hi, I'm your first cell.</td>
  <td>I'm your second cell.</td>
  <td>I'm your third cell.</td>
  <td>I'm your fourth cell.</td>
</tr>
```
Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <tr>, а каждая ячейка должна быть внутри элемента <td>.

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

Hi, I’m your first cell.	I’m your second cell.	I’m your third cell.	I’m your fourth cell.
Second row, first cell.	Cell 2.	Cell 3.	Cell 4.

Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

<table>
  <tr>
    <td>&nbsp;</td>
    <td>Knocky</td>
    <td>Flor</td>
    <td>Ella</td>
    <td>Juan</td>
  </tr>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
  <tr>
    <td>Age</td>
    <td>16</td>
    <td>9</td>
    <td>10</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Owner</td>
    <td>Mother-in-law</td>
    <td>Me</td>
    <td>Me</td>
    <td>Sister-in-law</td>
  </tr>
  <tr>
    <td>Eating Habits</td>
    <td>Eats everyone's leftovers</td>
    <td>Nibbles at food</td>
    <td>Hearty eater</td>
    <td>Will eat till he explodes</td>
  </tr>
</table>

Теперь как выглядит таблица:

	Knocky	Flor	Ella	Juan
Breed	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Owner	Mother-in-law	Me	Me	Sister-in-law
Eating Habits	Eats everyone’s leftovers	Nibbles at food	Hearty eater	Will eat till he explodes

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

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

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

Попробуем улучшить эту таблицу.

Сначала создайте локальную копию dogs-table.html и minimal-table.css в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <th> (‘th’ сокращение от ‘table header’). Он работает в точности как <td>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <td>, содержащие заголовки, на элементы <th>.
Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.

Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

Для чего нужны заголовки?

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

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

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

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

Исходная разметка выглядит так:

<table>
  <tr>
    <th>Animals</th>
  </tr>
  <tr>
    <th>Hippopotamus</th>
  </tr>
  <tr>
    <th>Horse</th>
    <td>Mare</td>
  </tr>
  <tr>
    <td>Stallion</td>
  </tr>
  <tr>
    <th>Crocodile</th>
  </tr>
  <tr>
    <th>Chicken</th>
    <td>Cock</td>
  </tr>
  <tr>
    <td>Rooster</td>
  </tr>
</table>

Но результат не такой, как хотелось бы:

Animals
Hippopotamus
Horse	Mare
Stallion
Crocodile
Chicken	Cock
Rooster

Нужно, чтобы «Animals», «Hippopotamus» и «Crocodile» распространялись на два столбца, а «Horse» и «Chicken» — на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты colspan и rowspan, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, colspan="2" распространяет ячейку на два столбца.

Воспользуемся colspan и rowspan чтобы улучшить таблицу.

Сначала создайте локальную копию animals-table.html и minimal-table.css в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
Затем используйте атрибут colspan чтобы распространить «Animals», «Hippopotamus» и «Crocodile» на два столбца.
Наконец, используйте атрибут rowspan чтобы распространить «Horse» и «Chicken» на две строки.
Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

Примечание: Законченный пример можно посмотреть в animals-table-fixed. html на GitHub (живой пример).

И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы <col> и <colgroup>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде :nth-child() (en-US) было бы слишком утомительно.

Возьмём простой пример:

<table>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Что даёт нам:

Data 1	Data 2
Calcutta	Orange
Robots	Jazz

Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить class на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <col>. Элемент <col> задаётся в контейнере <colgroup> сразу же за открывающим тегом <table>. Эффект, который мы видели выше, можно задать так:

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент <col> ввести необходимо — иначе к первому столбцу не будет применён стиль.

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <col> с атрибутом span, таким образом:

<colgroup>
  <col span="2">
</colgroup>

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

Упражнение: colgroup и col

Теперь попробуйте сами.

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.

	Mon	Tues	Wed	Thurs	Fri	Sat	Sun
1st period	English			German	Dutch
2nd period	English	English		German	Dutch
3rd period		German		German	Dutch
4th period		English		English	Dutch

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

Сначала создайте локальную копию файла timetable.html в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
Добавьте элемент <colgroup> вверху таблицы, сразу же под тегом <table>, куда вы сможете вставлять элементы <col>.
Первые два столбца надо оставить без стиля..
Добавьте цвет фона для третьего столбца. Значением атрибута style будет background-color:#97DB9A;
Задайте ширину для четвёртого столбца. Значением атрибута style будет width: 42px;
Добавьте цвет фона для пятого столбца. Значением атрибута style будет background-color: #97DB9A;
Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута style будут: background-color:#DCC48E; border:4px solid #C1437A;
Последние два дня выходные; значением атрибута style будет width: 42px;

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

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

Обзор: Tables
Далее

Last modified: 4 авг. 2022 г., by MDN contributors

Таблицы в HTML • Vertex Academy

17 августа, 201617 января, 2018 Vertex Academy html-таблицы,html5,верстка,как создать таблицу в html,создание таблиц в html,таблицы в html,тег table,теги для таблиц

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Сегодня в вёрстке сайтов таблицы имеют не такое большое значение, как несколько лет назад. Раньше сайты создавались с помощью так называемой табличной верстки, и таблицы были основой, скелетом сайта. Позже, с развитием HTML, а также по мере появления всё большего количества портативных устройств для выхода в интернет (планшеты, смартфоны) сайты, сверстанные с помощью таблиц, «ехали», не помещались на экране, отображались коряво, и возникла потребность в резиновой, адаптивной и отзывчивой верстке.
Поэтому сейчас таблицы используются по прямому назначению — для структурированной подачи информации, будь то меню, прайс-лист или ведомость по сдавшим летнюю сессию.

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

Таблица состоит из нескольких обязательных тегов:

тег <table > (по англ. таблица) — это тег, который говорит браузеру, что внутри него будет таблица
тег <tr> (от англ. table row — строка таблицы) обозначает строку
тег <td> (от англ. table data — данные таблицы) обозначает ячейку. Именно в этот тег мы закладываем всё, из чего будет состоять таблица — текст, картинки, списки, кнопки или даже другие таблицы

Давайте посмотрим схематически, как это всё ложится в коде:

То есть, для того чтобы создать таблицу на 3 колонки и 4 строки нам нужно 4 раза прописать элемент <tr> и в каждом из них по три раза — элемент <td>. Проверим?

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

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

Оглавление таблиц

Чтобы как-то назвать таблицу, используется тег <caption>, по английски заголовок.

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

В HTML для этого есть специальный тег <th> (от англ. table header — заголовок таблицы). Он прописывается вместо <td> в первой строке. Давайте посмотрим на примере нашего мини-словарика, как это работает:

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

Иногда в таблицах нужно выделить не только первую строку, но и первый столбец. Например так:

Думаете, для этого тоже есть специальный тег? А нет 🙂 Используется по прежнему тот же <th>, только вставляется он не вместо <td> в первой строке, а вместо первого <td> в каждой строчке, вот так:

Внимательный читатель наверняка заметил, что первая ячейка в первой колонке пустая. Если вам нужна пустая ячейка в таблице — её все равно нужно создать, просто ничего не вписывать между тегами <th></th> или <td></td>. Если этого не сделать — браузер подвинет остальные ячейки, куда сочтет нужным и содержимое таблицы поплывет. Попробуйте сами в JSFiddle убрать элемент <th></th> и увидите, что произойдет.

Объединение ячеек по вертикали

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

Атрибут rowspan объединяет ячейки у соседних рядов (т.е. по вертикали).

Пример объединенных ячеек:

Давайте сверстаем такую таблицу. Чтобы нагляднее было видно объединение ячеек, все же нарисуем ей границы. Для этого применим устаревшие атрибуты, которые задаются для тега <table>:

border — отвечает за толщину границы, значение задается по умолчанию в пикселях

cellpadding — расстояние от контента ячейки до границ. Если оно =»0″ — значит текст (или любой другой контент) вплотную прилегает к границам ячейки. В случае с текстом это не очень красиво , поэтому мы зададим его равным 4 пикселям.

cellspacing — расстояние между ячейками. Если оно =»0″ — значит границы ячеек накладываются друг на дружку. Если оно больше — значит каждая ячейка отстоит от другой на заданное расстояние и получается как-бы двойная рамка. Выглядит на любителя:

Если мы задали атрибут border, то по умолчанию cellspasing равен 2 пикселям. Поэтому если мы хотим границы, но при этом не хотим разрывов между ними — нужно указывать, что cellspasing=»0″

Здесь же вы можете видеть, как тесно тексту в ячейках — это потому, что применен cellpadding=»0″

Итак, как же работает атрибут rowspan? Прежде, чем сверстать таблицу — нарисуйте её от руки на листке бумаги или создайте в экселе, так вам будет проще разобраться во всех этих строчках и колонках.

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

В ней есть 4 колонки и 4 строчки,

во второй колонке вторая и третья ячейки объединены — ставим кораблик.

В четвертой колонке совмещены третья и четвертая ячейка — и туда ставим кораблик.

Вот только в HTML мы пишем код не колонками, а строчками. Как же записать это в коде?

Очевидно, что первая строка без изменений — пишем <tr></tr> и в нём 4 элемента <th>.

Вторая строка: пишем <tr></tr>, и в нём 4 элемента <td>, только теперь второму из них прописываем атрибут rowspan=»2″ (это означает, что будут объединены 2 ячейки)

Третья строка: пишем <tr></tr>, и теперь у нас всего 3 элемента <td>, потому что один из них, который во второй колонке «отобрала» верхняя ячейка. Последнему элементу <td> также нужно прописать атрибут rowspan=»2″.

Четвертая строка: внутри элемента <tr> снова прописываем всего 3 элемента <td>, потому что в четвертой колонке его уже нет — он поглотился верхней ячейкой.

Еще раз посмотрим на нашу таблицу, но уже с тегами. Читать нужно, как книгу — слева направо, сверху вниз:

А теперь наконец проверим, как это работает в редакторе:

Объединение ячеек по горизонтали

Атрибут colspan объединяет ячейки у соседних колонок (т.е. по горизонтали). Принцип здесь тот же, что и с rowspan

К примеру нам нужно создать вот такую таблицу:

Давайте снова прочитаем её слева направо, сверху вниз:

строка 1: пять <th>, причем первый оставляем незаполненным
строка 2: один <th> и 3 <td>, вторая и третья ячейки объединены, т.е. для второго <td> прописываем colspan=»2″
строка 3: один <th> и 2 <td>, третья, четвертая и пятая ячейки объединились, т.е. для третьего <td> пишем colspan=»3″
строка 4: один <th> и 2 <td>. Вторая и третья, а также четвертая и пятая объединены — для каждого из двух <td> прописываем colspan=»2″

Схематично это можно отобразить так:

Теперь посмотрим на код и результат поближе:

Всё получилось 🙂

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

А пока всё. До встречи!

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Рамка таблицы
Размер таблицы
Выравнивание текста
Чередование фонового цвета строк таблицы
Изменение фона строки при наведении курсора
Выравнивание таблицы по центру

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

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

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

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }

Попробовать »

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

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Размер таблицы

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

th, td { padding: 7px; }

Попробовать »

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

table { width: 70%; }
th { height: 50px; }

Попробовать »

Выравнивание текста

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

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

top: текст выравнивается по верхней границе ячейки
middle: выравнивает текст по центру (значение по умолчанию)
bottom: текст выравнивается по нижней границе ячейки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      . test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Чередование фонового цвета строк таблицы

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      . alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

Изменение фона строки при наведении курсора

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

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover { background-color: #E0E0FF; }

Попробовать »

Выравнивание таблицы по центру

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin, задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

table { margin: 10px auto; }

Попробовать »

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

table { margin: 10px auto 30px; }

Как сделать таблицу в HTML — Журнал «Код»

В языке разметки HTML есть инструменты для укладывания материала в таблицы. Сейчас они используются ровно по назначению: если вам на странице нужна таблица с данными, вы ставите тег <table> и размечаете данные по смыслу. Но так было не всегда.

На заре интернета таблицы были инструментом вёрстки страниц: с их помощью люди создавали многоколоночные сайты, сложные композиции, вложенные меню и многие другие полезные штуки. Ранний интернет (где-то до года 2005–2007-го) в буквальном смысле держался на таблицах.

Потом в CSS появились параметры для позиционирования элементов, и началась эра вёрстки на <div>, потом придумали CSS Grid, и понеслось. Но начиналось всё именно с табличной вёрстки.

Прочитайте нашу подборку о CSS Grid

👉 Сегодня мы вспомним былые времена и погрузимся в магию создания таблиц в HTML. Возможно, когда-то в жизни вам придётся поддерживать сайт, который верстали в 2000 году на таблицах, и вы вспомните эту статью, и скупая слеза покатится по вашей щеке.

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

За таблицы в вёрстке отвечает такой набор тегов:

<!-- вся таблица хранится здесь -->
<table>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			<!-- первая ячейка в первой строке-->
		</td>
		<td>
			<!-- вторая ячейка в первой строке-->
		</td>
	</tr>
	<!-- закончилась первая строка -->
</table>

Теперь разберём каждый тег отдельно:

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

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

<table>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			Первая ячейка в первой строке
		</td>
		<td>
			Привет!
		</td>
		<td>
			Это журнал «Код».
		</td>
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<td>
			Первая ячейка во второй строке
		</td>
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

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

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

Настраиваем внешний вид

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

сделаем синие границы;
толщина границ — 2 пикселя;
расстояние между ячейками — 10 пикселей.

<table>

В этом примере мы прописали стили «инлайном», то есть прямо внутри кода. Но также можно было вынести эти же стили CSS-файл или в таблицу стилей в начале документа. Тогда это выглядело бы так:

<style> table{ border-spacing:10px; border-color:blue; border-style:solid; } </style>

Также можно было бы указать, что это оформление для какой-то конкретной таблицы на странице (а не для всех, как сейчас). Тогда можно было бы сказать таблице class="kakoi-to", а в стилях сказать table.kakoi-to {...} — и прописать в фигурных скобках все нужные параметры оформления.

Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон:

<!-- первая строка таблицы -->
<tr>
	<td>
		Первая ячейка в первой строке
	</td>
	<td>
		Привет!
	</td>
	<td>
		Это журнал «Код».
	</td>
</tr>

Или можно было бы сказать <td>, а в стилях прописать .highlighted{background-color:yellow;} — это имеет смысл делать, если у вас в таблице будет много выделенных ячеек или вы захотите потом обращаться к ним через JavaScript.

Чтобы сделать видимые границы у всех ячеек, добавим параметр border:

<table border = 1>

Сразу стали видны расстояния между ячейками, которые мы прописывали в стилях.

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

<style> table td{padding:5px;} </style>

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

За заголовок в таблице отвечает отдельный тег <th>:

<table>
	<th>
		Первый заголовок
	</th>
	<th>
		Второй
	</th>
	<th>
		И третий
	</th>
	<!-- первая строка таблицы -->
	<tr>
		<td>
			Первая ячейка в первой строке
		</td>
		<td>
			Привет!
		</td>
		<td>
			Это журнал «Код».
		</td>
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<td>
			Первая ячейка во второй строке
		</td>
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки.
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

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

<thead>
	<th>
		Первый заголовок
	</th>
	<th>
		Второй
	</th>
	<th>
		И третий
	</th>
</thead>

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

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

<!-- вся таблица хранится здесь -->
<table>
	<thead>
		<th>
			Первый заголовок
		</th>
		<th>
			Второй
		</th>
		<th>
			И третий
		</th>
	</thead>
	<!-- первая строка таблицы -->
	<tr>
		<td rowspan="2" >
			Объединили первые ячейки
		</td>
		<td colspan="2">
			Привет! 
		</td>
		<!-- здесь раньше была третья ячейка первой строки, но мы её убрали, чтобы объединить ячейки -->
		
	</tr>
	<!-- закончилась первая строка -->
	<!-- вторая строка таблицы -->
	<tr>
		<!-- здесь раньше была первая ячейка второй строки, но она тоже исчезла -->
		<td>
			Подписывайтесь,
		</td>
		<td>
			ставьте лайки. 
		</td>
	</tr>
	<!-- закончилась вторая строка -->
</table>

Что можно размещать в ячейках

Ячейки — это контейнеры для содержимого, куда можно класть всё:

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

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

<!-- вторая строка таблицы -->
<tr>
	<!-- здесь раньше была первая ячейка второй строки, но она тоже исчезла -->
	<td>
		Подписывайтесь,
	</td>
	<td>
		<img src="https://thecode.media/wp-content/uploads/2021/10/photo_2021-10-27_11-50-10.jpg">
	</td>
</tr>
<!-- закончилась вторая строка -->

Чтобы этого не было, можно задать общую ширину таблицы:

<table >

И после этого указать, что картинка может занимать 100% доступной ширины ячейки, а не всего экрана:

<img src="https://thecode. media/wp-content/uploads/2021/10/photo_2021-10-27_11-50-10.jpg">

Что дальше

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

Стей тюнед и всё такое.

А если хотите научиться верстать по-современному, почитайте вот этот цикл:

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

HTML :: Таблицы

Создание таблицы
Создание заголовка таблицы
Формирование строк и ячеек таблицы
Деление строк таблицы на логические секции
Объединение колонок в группы
Физическое объединение ячеек таблицы
Понятие табличной верстки

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

Информация, структурированная в виде таблиц, представляется в HTML 5 элементом «table», в дополнение к которому предоставляется целый набор тегов, позволяющих создать заголовок, разбить таблицу на логические секции, сформировать и, при необходимости, объединить строки, столбцы и отдельные ячейки. Давайте посмотрим на код простейшей таблицы, показанный в примере №1, а затем разберем все элементы по порядку.

HTML Результат okmysiteCodes

<html>
<head>
	<meta charset="utf-8">	
	<title>Структура таблицы</title>
</head>
<body>
	<table border="1">
		<caption>Я &ndash; заголовок таблицы</caption>
		<tr>
			<!-- 2 заголовочные ячейки -->
			<th>1-я колонка</th>
			<th>2-я колонка</th>
		</tr>
	
		<tr>
			<td>Я &ndash; первая ячейка второй строки  &nbsp; &nbsp;</td>
			<td>Я &ndash; вторая ячейка второй строки</td>
		</tr>
		
		<tr>
			<td>Я &ndash; первая ячейка третьей строки</td>
			<td>Я &ndash; вторая ячейка третьей строки</td>
		</tr>
	</table>
</body>
</html>

Пример №1. Использование элемента «table»

Итак, для формирования таблицы используется парный тег <table> (от англ. table – таблица). По умолчанию браузеры рисуют таблицу вообще без границ. Но если указать атрибут border, который в качестве равнозначных значений принимает пустую строку или «1», то будут нарисованы все границы ячеек и рамка вокруг таблицы.

Создание заголовка таблицы

Если у таблицы предполагается заголовок, то сразу же после открывающего тега <table> необходимо разместить элемент «caption», формирующийся парным тегом <caption> (от англ. caption – заголовок). По умолчанию браузеры отображают заголовок над таблицей с выравниванием по центру. Однако изменить внешний вид и расположение заголовка, опять же, весьма просто при помощи CSS.

Формирование строк и ячеек таблицы

После заголовка, если он есть, можно начинать располагать строки «tr», которые формируются парными тегами <tr> (от англ. table row – строка таблицы). Внутри строк располагаются ячейки «th» и «td», формирующиеся соответствующими парными тегами <th> (от англ. table header cell – заголовочная ячейка таблицы) и <td> (от англ. table data cell – табличная ячейка с данными). Заголовочные ячейки «th», если они используются, содержат заголовки столбцов или строк, которые по умолчанию отображаются браузерами полужирным шрифтом и центрируются. Данные в обычных ячейках отображаются обычным шрифтом и выравниваются по левому краю.

Деление строк таблицы на логические секции

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

Для группировки строк таблицы разбиваются элементами «thead», «tbody» и «tfoot» на логические секции (наподобие веб-страницы), которые формируются соответствующими парными тегами: <thead> (от англ. table head – шапка таблицы), <tbody> (от англ. table body – тело таблицы) и <tfoot> (от англ. table foot – подвал таблицы).

Элемент «thead» предназначен для группирования одной или нескольких строк вверху таблицы. По логике вещей в данной секции нужно размещать строки с заголовочными ячейками «th», однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента «thead» в пределах одной таблицы, который должен располагаться после элементов «caption» или «colgroup», если они конечно присутствуют, но перед элементами «tbody», «tfoot» или «tr». При чем секция может вообще не содержать строк и даже в некоторых случаях допускается отсутствие закрывающего тега. Но, как всегда, мы так поступать не будем, а, соответственно, и описывать такие ситуации не станем ни здесь, ни далее.

Элемент «tfoot» предназначен для группирования одной или нескольких строк внизу таблицы. Опять же, логика подсказывает, что в данной секции нужно размещать строки с итоговыми ячейками «td», однако в случае их отсутствия, можно просто группировать строки, применяя к ним общее форматирование через стили CSS. Допускается применение только одного элемента «tfoot» в пределах одной таблицы, который разрешается располагать, как непосредственно перед элементом «tbody», так и сразу же после него. Мы будем использовать второй вариант и всегда располагать «подвал» таблицы после ее «тела». Если итоговых ячеек нет, то элемент «tfoot» можно оставить пустым, но указывать его для сохранения логической разметки нужно, если мы указали элементы «thead» и «tbody».

Cекций «tbody» может быть несколько. Располагаются они друг за другом после секции «thead». Все они предназначены для размещения обычных строк с данными, как правило сгруппированных по каким-либо признакам, если секций несколько. Кроме того, допускается отсутствие строк в секциях «tbody», но если секции созданы, то использовать строки вне «thead», «tbody» и «tfoot» не разрешается. Короче, если мы решили использовать логическую разбивку таблицы на перечисленные разделы, то нужно соответствовать своим устремлениям до конца.

Теперь давайте рассмотрим простейшее деление таблицы на секции (см. пример №2).

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Логическая разметка таблицы</title>
</head>
<!-- Заголовок документа не показан на рисунке -->
<body>
	<table border="1">
	<caption>Деление на секции с выделением разным фоном</caption>
		
		<thead>
			<tr>
				<th>Я &ndash; первая заглавная ячейка </th>
				<th>А я &ndash; вторая заглавная ячейка</th>
			</tr>
		</thead>
		
		<tbody>
			<tr>
				<td>Я &ndash; первая ячейка в первой строке тела</td>
				<td>Я &ndash; вторая ячейка в первой строке тела</td>
			</tr>
			<tr>
				<td>Я &ndash; первая ячейка во второй строке тела</td>
				<td>Я &ndash; вторая ячейка во второй строке тела</td>
			</tr>
		</tbody>
		
		<tfoot>
			<tr>
				<td>Итог:</td>
				<td>использовано три фона</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

Пример №2. Разбиение таблицы на секции

Может показаться, что введение элементов «thead», «tbody» и «tfoot» излишне. Ведь можно было бы разрешить использовать для выделения и группировки строк универсальный элемент «div», применяя к нему нужные стили CSS. Однако давайте не будем забывать, что «div» – элемент физической разметки, а перечисленные элементы осуществляют логическую разметку. Конечно, без стилей CSS они, также как и «div» свое содержимое никак не изменяют, зато для поисковых машин, вне зависимости от применяемых к ним стилей, дают четкое представление о структуре таблицы, а также виде и степени важности данных, располагающихся в соответствующих разделах.

Объединение колонок в группы

Для объединения колонок по общему признаку применяются элементы «col» и «colgroup». Первый из них является пустым и формируется одиночным тегом <col> (от англ. column – колонка), второй формируется парным тегом <colgroup> (от англ. column group – группа колонок). Оба элемента должны располагаться сразу после элемента «caption» или, при его отсутствии, после открывающего тега <table>.

Каждый элемент «col» представляет одну или несколько колонок, отсчет которых происходит слева направо и соответствует порядку следования элементов «col» в коде. Если нужно, чтобы элемент представлял несколько колонок, то используется атрибут span, который в качестве значений принимает натуральные числа, указывающие требуемое количество колонок. Рассмотрим использование элемента «col» подробнее на примере №3.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Работа с колонками таблицы</title>
</head>
<body>
	<!-- Создадим таблицу с границами -->
	<table border="1">
		<caption>Таблица с 8 колонками</caption>
		
		<!-- Установим желтый фон первых двух колонок  -->
		<col  span="2">
		
		<!-- Фон третьей колонки сделаем красным  -->
		<col >
		
		<!-- Три колонки пропустим  -->
		<col span="3">
		
		<!-- Фон седьмой колонки сделаем серым  -->
		<col >
		
		<tr>
			<td>1. 1</td> <td>1.2</td> <td>1.3</td> <td>1.4</td> 
			<td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> 
		</tr>
		<tr>
			<td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> 
			<td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td>
		</tr>
	</table>
</body>
</html>

Пример №3. Использование элемента «col»

Таким образом, если мы, например, хотим применить общий стиль CSS для колонок с четвертой по восьмую включительно, то необходимо сперва создать элемент «col», указать в нем атрибут span=»3″, а затем сформировать еще один элемент «col» с атрибутом span=»5″, привязав к нему необходимые стили CSS.

Столбцы таблицы «col» могут также быть объединены в лексические группы при помощи элемента «colgroup». Если мы, например, хотим задать столбцам желтый цвет фона, то необходимо перечислить их внутри контейнера «colgroup», указав в его открывающем теге атрибут style=»background-color: yellow». В результате отпадает необходимость указывать этот атрибут во всех элементах «col». Кроме того, «colgroup» может использоваться аналогично элементу «col», и, следовательно, вперемешку с ним. В этом случае для выделения нескольких столбцов также используется атрибут span (см. пример №4).

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Использование элементов «col» и «colgroup»</title>
</head>
<body>
	<table border="1">
		<caption>Таблица с 8 колонками</caption>
		
		<!-- Первой колонке установим синий фон -->
		<col>
		
		<!-- Зададим колонкам ширину в 60 пикселей -->
		<colgroup>
			<col>
			<col>
			<col>
		</colgroup>
		
		<!-- А этим в 100 пикселей -->
		<colgroup>
			<col>
			<col>
		</colgroup>
				
		<tr>
			<td>1.1</td> <td>1. 2</td> <td>1.3</td> <td>1.4</td> 
			<td>1.5</td> <td>1.6</td> <td>1.7</td> <td>1.8</td> 
		</tr>
		
		<tr>
			<td>2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> 
			<td>2.5</td> <td>2.6</td> <td>2.7</td> <td>2.8</td>
		</tr>
	</table>
</body>
</html>

Пример №4. Использование элементов «col» и «colgroup»

Если к ячейкам и строкам таблицы, а также к элементам «thead», «tbody» и «tfoot» через атрибуты style, class или id без проблем применимы практически все свойства CSS, то с элементами «col» и «colgroup» дела обстоят как раз наоборот. Дело в том, что использование в этих элементах указанных атрибутов с целью применения к столбцам требуемых стилей CSS не принесет ожидаемого результата, так как практически ни одно свойство CSS просто напросто не будет применено. В итоге мы можем использовать данные элементы только лишь для определения фона и ширины колонок, что явно не соответствует предназначению этих элементов.

Физическое объединение ячеек таблицы

Итак, со строками и столбцами разобрались, теперь рассмотрим ячейки. На практике довольно часто возникает необходимость физического объединения сразу нескольких ячеек в одну. Для этих целей в тегах <th> и <td> предусмотрены атрибуты colspan (от англ. column span) и rowspan (от англ. row span), которые в качестве значений принимают, соответственно, число объединяемых ячеек по горизонтали и вертикали. Рассмотрим различные варианты объединения ячеек на примере №5.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Объединение ячеек</title>
</head>
<body>
	<table border="1">
	<caption>Таблица с объединенными ячейками</caption>
	<tr>
		<!-- Объединяем 2 горизонтальные ячейки 1. 1 и 1.2 -->
		<td colspan="2">1.1+1.2</td> 
		
		<td>1.3</td> <td>1.4</td> 
		
		<!-- Объединяем 6 ячеек -->
		<td  rowspan="3" colspan="2" >
			1.5+1.6+<br>2.5+2.6+<br>3.5+3.6
		</td> 
		
		<td>1.7</td> <td>1.8</td> 
	</tr>
	
	<tr>
		<td>2.1</td> 
		
		<!-- Объединяем 2 вертикальные ячейки 2.2 и 3.2 -->
		<td rowspan="2" >2.2+<br>3.2</td> 
		
		<td>2.3</td> <td>2.4</td> <td>2.7</td> <td>2.8</td>
	</tr>
	
	<tr>
		<td>3.1</td> <td>3.3</td> <td>3.4</td> 
		<td>3.7</td> <td>3.8</td>
	</tr>
	</table>
</body>
</html>

Пример №5. Использование атрибутов colspan и rowspan

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

Понятие табличной верстки

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

Быстрый переход к другим страницам

Списки в HTML
Таблицы в HTML
Гиперссылки в HTML
Вернуться к оглавлению учебника

теги вставки строк и столбцов

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

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

<table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
<caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
<tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
<th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
<td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
<colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
<col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
<thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
rowspan объединяет ячейки по столбцам.

Пример создания таблицы

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

В браузере документ будет выглядеть так:

Разберём, какие строчки кода за что отвечают.

<table border=»1″> — открыли таблицу, задав ей толщину рамок.
<caption> Инструменты создания сайтов </caption> — озаглавили её.
<tr> — открыли строку.
<th>Назначение</th> — создали ячейку с оформлением заголовка.
<th colspan=»2″>Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
</tr> — закрыли строку. Аналогично создали остальные строки.
<tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
</table> — закрыли таблицу.

Полезные ссылки:

Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
Вёрстка сайта с нуля 2. 0 — полноценный платный курс;
Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Скачать приложение

Смотрите также

Вставка изображения в HTML

Табличная HTML верстка сайта

HTML-таблицы

❮ Назад Далее ❯

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

Пример

Компания	Контакт	Страна
Альфред Футтеркисте	Мария Андерс	Германия
Торговый центр Моктесума	Франсиско Чанг	Мексика
Эрнст Гендель	Роланд Мендель	Австрия
Островная торговля	Хелен Беннет	Великобритания
Винные погреба Смеющегося Вакха	Йоши Таннамури	Канада
Магазин Алиментари Риунити	Джованни Ровелли	Италия

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

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

Таблица в HTML состоит из ячеек таблицы внутри строк и столбцов.

Пример

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

Компания	Контактное лицо	Страна
Альфред Футтеркисте	Мария Андерс	Германия
Центр коммерческий Moctezuma	Франсиско Чанг	Мексика

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

Ячейки таблицы

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

тд обозначает табличные данные.

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

Пример

<таблица>

Эмиль
Тобиас
Линус

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

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

Строки таблицы

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

т.р. обозначает строку таблицы.

Пример

<таблица>

Эмиль
   Тобиас
   Линус

16
   14
   10

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

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

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

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

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

Пример

Пусть первая строка будет заголовками таблицы:

<таблица>

Лицо 1
   Лицо 2
   Лицо 3

Эмиль
   Тобиас
   Линус

16
   14
   10

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

По умолчанию текст в элементов выделены жирным шрифтом и расположены по центру, но вы можете изменить это с помощью CSS.

HTML-упражнения

Проверьте себя с помощью упражнений

Упражнение:

Добавьте строку таблицы с двумя заголовками.

Два заголовка таблицы должны иметь значения «Имя» и «Возраст».

<таблица>





    Джилл Смит
    50

Начать упражнение

Теги таблицы HTML

Тег	Описание
<таблица>	Определяет таблицу
<й>	Определяет ячейку заголовка в таблице

Определяет строку в таблице
<тд>	Определяет ячейку в таблице
<заголовок>	Определяет заголовок таблицы

Указывает группу из одного или нескольких столбцов в таблице для форматирования
<столбец>	Указывает свойства столбца для каждого столбца в элементе
<заголовок>	Группирует содержимое заголовка в таблице
<тело>	Группирует содержимое тела в таблицу

Группирует содержимое нижнего колонтитула в таблице

Полный список всех доступных тегов HTML см. в нашем справочнике по тегам HTML.

❮ Предыдущий Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Основные ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

HTML-тег colgroup

❮ Назад Полный справочник HTML Далее ❯

Пример

Установите цвет фона трех столбцов с помощью тегов и:

ISBN	Название	Цена
3476896	Мой первый HTML	$53

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

Другие примеры «Попробуйте сами» ниже.

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

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

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

Примечание: Тег должен быть дочерним элементом элемента

, после любых элементов,, и элементы.

Совет: Для определения различных свойств столбца в пределах

, используйте тегвнутри тега .

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

Элемент

Да	Да	Да	Да	Да

Атрибуты

Атрибут	Значение	Описание
пролет	номер	Указывает количество столбцов, которые должна охватывать группа столбцов

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

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

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

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

Дополнительные примеры

Пример

Выровнять текст в столбцах таблицы (с помощью CSS):

ISBN	Название	Цена
3476896	Мой первый HTML	53 доллара США
2489604	Мой первый CSS	$47

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

Пример

Вертикальное выравнивание текста в столбцах таблицы (с помощью CSS):

Месяц	Сбережения
Январь	100$

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

Пример

Задать ширину столбца таблицы (с помощью CSS):

Месяц	Экономия
Январь	100 долларов США
Февраль	80$

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

Связанные страницы

HTML DOM Ссылка: ColumnGroup Object

Настройки CSS по умолчанию

Большинство браузеров будут отображать со следующими значениями:

Пример

Colgroup {
. столбец-группа;
}

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

❮ Предыдущая Полный справочник HTML Далее ❯

NEW

Мы только что запустили
видео W3Schools

Узнать

ПАЛЕТКА ЦВЕТОВ

КОД ИГРЫ

Играть в игру

Лучшие примеры

Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.

CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

HTML тег объявления

❮ Назад Полный справочник HTML Далее ❯

Пример

Таблица HTML с элементами, и:

0  8 <2 tr>

Месяц	Экономия
Январь	100 долларов США
Февраль	80 долларов США
180 долларов США

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

Ниже приведены дополнительные примеры из серии «Попробуйте сами».

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

9Тег 0106 используется для группировки содержимого заголовка в таблице HTML.

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

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

Примечание: Элемент должен иметь один или несколько Теги внутри.

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

 после любого
элементы

и перед любым,

 и
элементы

.
  Совет:  Элементы

, и

 не влияют на
макет таблицы по умолчанию. Однако вы можете использовать CSS для стилизации этих
элементы (см. пример ниже)!
 Поддержка браузера

Элемент
<заголовок>	Да	Да	Да	Да	Да

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

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

`Атрибуты событий`

9Тег 0106 также поддерживает атрибуты событий в HTML.

`Другие примеры`

`Пример`

Стиль, и с помощью CSS:

Месяц	Экономия
январь	100 долларов
Февраль	80$
Sum	180 долларов США

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

`Пример`

Как выровнять содержимое внутри (с помощью CSS):

Месяц	Экономия
Январь	100 долларов
Февраль	80 долларов США

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

`Пример`

Как выровнять содержимое внутри по вертикали (с помощью CSS):

Месяц	Экономия
Январь	100 долларов
Февраль	80 долларов США

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

`Настройки CSS по умолчанию`

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

thead { display: table-header-group; вертикальное выравнивание: посередине; цвет границы: наследовать; }

❮ Предыдущий Полный справочник HTML Далее ❯

 
 НОВИНКА
 Мы только что запустили 
 Видео W3Schools
 Узнать
 ВЫБОР ЦВЕТА 
 КОД ИГРЫ 
 Играть в игру
 Top Tutorials 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 Учебное пособие 
 Учебное пособие по SQL 
 Учебное пособие по Python 
 Учебное пособие по W3. CSS 
 Учебное пособие по Bootstrap 
 Учебное пособие по PHP 
 Учебное пособие по Java 
 Учебное пособие по C++ 
 Учебное пособие по jQuery 
 Справочник по HTML 

 Справочник по CSS 
 Справочник по JavaScript 
 Справочник по SQL 
 Справочник по Python 
 Справочник по W3.CSS 
 Справочник по Bootstrap 
 Справочник по PHP 
 Цвета HTML 
 Справочник по Java 
 Справочник по Angular 
 Справочник по jQuery 
 Основные примеры 
 Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2022 Refsnes Data. Все права защищены. 
 W3Schools использует W3.CSS.
 Тег таблицы HTML 
 ❮ Назад
Полный справочник HTML
Далее ❯
 
 Пример 
 Простая таблица HTML, содержащая два столбца и две строки:

 <тр> 



 <тр> 



 Месяц  Экономия  
 Январь  100 долларов США  
 
 Попробуйте сами »
 Другие примеры "Попробуйте сами" ниже.
 Определение и использование 
 Тег 
 определяет HTML-таблицу.
 Таблица HTML состоит из одного элемента 
  и одного или нескольких элементов,
элементы определяет строку таблицы, элемент,,
Элементы и.
 Поддержка браузера 
  и .
 Элемент
 определяет заголовок таблицы, а элемент
Элемент  определяет ячейку таблицы.
 Таблица HTML может также включать
,
 Элемент 
 <таблица>  Да  Да  Да  Да  Да
 Глобальные атрибуты 
  <таблица> 9Тег 0106 также поддерживает глобальные атрибуты в HTML.
 Атрибуты событий 
 Тег 
 также поддерживает атрибуты событий в HTML.
 Дополнительные примеры 
 Пример 
 Как добавить к таблице свернутые границы (с помощью CSS):
 
 
 
 
 

  

    
  

    

  
  

    
  
  Месяц  Экономия  
  Январь  100 долларов США  
  Февраль  80$  
 
  
 Попробуйте сами »
 Пример 
 Как выровнять таблицу по правому краю (с помощью CSS):

  

    
  

    

  
  

    
  
  Месяц  Экономия  
  Январь  100 долларов США  
  Февраль  80 долларов США  
 
 Попробуйте сами »
 Пример 
 Как выровнять таблицу по центру (с помощью CSS):
 
 
 
 

  

    
  

    

  
  

    
  
  Месяц  Экономия  
  Январь  100 долларов США  
  Февраль  80$  
 
 Попробуйте сами »
 Пример 
 Как добавить фоновый цвет к таблице (с помощью CSS ):
 <таблица> 
   
Месяц 
    Экономия 
   
 
    Январь 
100 долларов США 
   
   
Февраль 
    80$ 
   
 Попробуйте сами »
 Пример 
 Как добавить отступы к таблице (с помощью CSS):
 
 
 
 

  

    
  

    

  
  

    
  
  Месяц  Экономия  
  Январь  100 долларов США  
  Февраль  80 долларов США  
 
 
 
 Попробуйте сами »
 Пример 
 Как установить ширину таблицы (с помощью CSS):

  

    
  

    

  
  

    
  
  Месяц  Экономия  
  Январь  100 долларов США  
  Февраль  80$  
 
 Попробуйте сами »
 Пример 
 Как создать заголовки таблиц:  
Электронная почта 
    Телефон 
   
 
    Джон Доу 
john. [email protected] 
    123-45-678 
 
 Попробуйте сами »
 Пример 
 Как создать таблицу с заголовком:


  

    
  

    

  
  

    
  
 Ежемесячная экономия  Месяц  Экономия  
  Январь  100 долларов США  
  Февраль  80$  
 
 Попробуйте сами »
 Пример 
 Как определить ячейки таблицы, которые охватывают более одной строки или одного столбца:

  
    

    

  
    

    

  
  Имя  Электронная почта  Телефон  
  Джон Доу  [email protected]  123-45-678  212-00-546  
 
 Попробуйте сами »
 Связанные страницы 
 Учебник по HTML: Таблицы HTML
 Справочник по HTML DOM: Объект таблицы
 Учебное пособие по CSS: стилизация таблиц
 Настройки CSS по умолчанию 
 Большинство браузеров отображают элемент 
 со следующими значениями по умолчанию:
 Пример 
 таблица { 
   display: table; 
   граница-коллапс: раздельная; 
   интервал между границами: 2 пикселя; 
   цвет границы: серый; 
 }
 Попробуйте сами »
 ❮ Предыдущая
Полный справочник HTML
Далее ❯

 НОВИНКА
 Мы только что запустили 
 Видео W3Schools
 Узнать
 ВЫБОР ЦВЕТА 
 КОД ИГРЫ 
 Играть в игру
 Top Tutorials 
 Учебное пособие по HTML 
 Учебное пособие по CSS 
 Учебное пособие по JavaScript 
 How To Tutorial 
 Учебник по SQL 
 Учебник по Python 
 Учебник по W3. CSS 
 Учебник по Bootstrap 
 Учебник по PHP 
 Учебник по Java 
 Учебник по C++ 
 Учебник по jQuery 
 Основные ссылки 
 HTML Reference 
 CSS Reference 
 JavaScript Reference 
 SQL Reference 
 Python Reference 
 W3.CSS Reference 
 Bootstrap Reference 
 PHP Reference 
 HTML Colors 
 Java Reference 
 Angular Reference 
 jQuery Reference 
 Лучшие примеры 
 Примеры HTML 
 Примеры CSS 
 Примеры JavaScript 
 Примеры инструкций 
 Примеры SQL 
 Примеры Python 
 Примеры W3.CSS 
 Примеры Bootstrap 
 Примеры PHP 
 Примеры Java 
 Примеры XML 
 Примеры jQuery 
 FORUM |
 О
 W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
 Copyright 1999-2022 Refsnes Data. Все права защищены. 
 W3Schools использует W3.CSS.
 Основы HTML-таблиц — изучите веб-разработку 
 Обзор: таблицы
 Следующий
 Эта статья поможет вам начать работу с HTML-таблицами, охватывая самые основы, такие как строки, ячейки, заголовки, объединение ячеек в несколько столбцов и строк, а также способы группировки всех ячеек в столбце для целей стилизации.
  
 Предпосылки:  Основы HTML (см.
 Введение в HTML).
 Цель:  Чтобы получить базовые знания о таблицах HTML.
 Таблица — это структурированный набор данных, состоящий из строк и столбцов (  табличные данные  ). Таблица позволяет быстро и легко искать значения, указывающие на какую-то связь между различными типами данных, например, человек и его возраст, или день недели, или расписание местного плавательного бассейна.
 Таблицы очень широко используются в человеческом обществе и используются в течение длительного времени, о чем свидетельствует этот документ переписи населения США от 1800 года:
 Поэтому неудивительно, что создатели HTML предоставили средства для структурирования и представления табличных данных в Интернете.
 Как работает стол? 
 Смысл стола в том, что он жесткий. Информация легко интерпретируется путем создания визуальных ассоциаций между заголовками строк и столбцов. Например, посмотрите на таблицу ниже и найдите газового гиганта Юпитера с 62 лунами. Вы можете найти ответ, связав соответствующие заголовки строк и столбцов.
 <таблица>
 Данные о планетах Солнечной системы (Факты о планетах взяты из Информационного бюллетеня НАСА о планетах — Метрика) .
 
  
   <тд colspan="2">
   Имя
   Масса (10²⁴кг)
   Диаметр (км)
   Плотность (кг/м³)
   Гравитация (м/с²)
   Продолжительность дня (часы)
   Расстояние от Солнца (10⁶км)
   Средняя температура (°C)
   Количество лун
   Примечания
  
 
 
  
   Планеты земной группы
   Меркурий
   0,330
   <тд>4 879
   5427
   <тд>3. 7
   4222.6
   57,9
   167
   <тд>0
   Ближе всего к Солнцу
  
  
   Венера
   4.87
   12 104
   <тд>5243
   8.9
   2802.0
   108.2
   464
   <тд>0
   <тд>
  
  
   Земля
   <тд>5.97
   12 756
   5514
   9.8
   24,0
   149,6
   15
   <тд>1
   Наш мир
  
  
   Марс
   0,642
   6 792
   3933
   <тд>3.7
   24,7
   227,9
   -65
   2
   Красная планета
  
  
   Планеты Юпитера
   Газовые гиганты
   Юпитер
   <тд>1898
   142 984
   1326
   23.1
   9.9
   778,6
   -110
   67
   Самая большая планета
  
  
   Сатурн
   568
   120 536
   687
   9. 0
   10.7
   1433,5
   -140
   <тд>62
   <тд>
  
  
   Ледяные гиганты
   Уран
   86,8
   51 118
   1271
   8.7
   17.2
   2872,5
   <тд>-195
   27
   <тд>
  
  
   Нептун
   102
   49 528
   1638
   11.0
   16.1
   4495.1
   <тд>-200
   14
   <тд>
  
  
   Карликовые планеты
   Плутон
   0,0146
   2370
   <тд>2095
   0,7
   153,3
   5906.4
   -225
   <тд>5
   Рассекречена как планета в 2006 году, но остается спорный.
  
 

 
 таблица {
  граница коллапса: коллапс;
  граница: 2px сплошной черный;
}
й,
тд {
  отступ: 5px;
  граница: 1px сплошной черный;
}
 
 При правильной реализации HTML-таблицы хорошо обрабатываются специальными средствами, такими как программы чтения с экрана, поэтому успешная HTML-таблица должна в равной степени улучшить работу как зрячих, так и слабовидящих пользователей.
 Стиль таблицы 
 Вы также можете посмотреть живой пример на GitHub! Одна вещь, которую вы заметите, это то, что таблица выглядит немного более читабельной — это потому, что таблица, которую вы видите выше на этой странице, имеет минимальный стиль, тогда как версия GitHub использует более значительный CSS.
 Не питайте иллюзий; чтобы таблицы были эффективными в Интернете, вам необходимо предоставить некоторую информацию о стилях с помощью CSS, а также хорошую прочную структуру с помощью HTML. В этом модуле мы сосредоточимся на части HTML; чтобы узнать о части CSS, вы должны посетить нашу статью о таблицах стилей после того, как закончите здесь.
 В этом модуле мы не будем сосредотачиваться на CSS, но мы предоставили вам минимальную таблицу стилей CSS, которая сделает ваши таблицы более читабельными, чем стандартная, которую вы получаете без каких-либо стилей. Вы можете найти таблицу стилей здесь, а также шаблон HTML, который применяет таблицу стилей — вместе они дадут вам хорошую отправную точку для экспериментов с таблицами HTML.
 Когда НЕ следует использовать HTML-таблицы? 
 HTML-таблицы следует использовать для табличных данных — для этого они и предназначены. К сожалению, многие люди использовали HTML-таблицы для разметки веб-страниц, например. одна строка для верхнего колонтитула, одна строка для столбцов содержимого, одна строка для нижнего колонтитула и т. д. Дополнительные сведения и пример можно найти в разделе «Макеты страниц» в нашем модуле обучения специальным возможностям. Это обычно использовалось, потому что поддержка CSS в браузерах раньше была ужасной; макеты таблиц в настоящее время гораздо менее распространены, но вы все еще можете увидеть их в некоторых уголках сети.
 Короче говоря, использование таблиц для компоновки, а не методов компоновки CSS — плохая идея. Основные причины заключаются в следующем:
  Таблицы макетов уменьшают доступность для пользователей с ослабленным зрением  : программы чтения с экрана, используемые слепыми людьми, интерпретируют теги, существующие на HTML-странице, и считывают содержимое для пользователя. Поскольку таблицы не являются подходящим инструментом для разметки, а разметка более сложна, чем с помощью методов разметки CSS, вывод средств чтения с экрана будет сбивать с толку их пользователей.
  Таблицы производят суп тегов  : Как упоминалось выше, макеты таблиц обычно включают более сложные структуры разметки, чем правильные методы макетирования. Это может привести к тому, что код будет сложнее писать, поддерживать и отлаживать.
  Таблицы не реагируют автоматически  : при использовании правильных контейнеров макета (таких как   ,   ,   или   ) их ширина по умолчанию равна 100 %. своего родительского элемента. Таблицы, с другой стороны, по умолчанию имеют размер в соответствии с их содержимым, поэтому необходимы дополнительные меры, чтобы стиль макета таблицы эффективно работал на различных устройствах.
 Мы достаточно поговорили о теории таблиц, так что давайте перейдем к практическому примеру и создадим простую таблицу.
 Прежде всего, сделайте локальную копию пустого шаблона.html и минимального таблицы.css в новом каталоге на вашем локальном компьютере.
 Содержимое каждой таблицы заключено в эти два тега:  
   . Добавьте их в тело вашего HTML.
 Наименьший контейнер внутри таблицы — это ячейка таблицы, созданная с помощью     элемент («td» означает «табличные данные»). Добавьте в теги таблицы следующее: Привет, я твой первый мобильный.
 
 Если нам нужна строка из четырех ячеек, нам нужно скопировать эти теги три раза. Обновите содержимое вашей таблицы, чтобы оно выглядело так: Привет, я твой первый мобильный.
Я твой второй сотовый.
Я ваша третья ячейка.
Я ваша четвертая ячейка.
 
 Как вы увидите, ячейки не размещаются друг под другом, а автоматически выравниваются друг с другом в одной строке. Каждый элемент   создает одну ячейку, и вместе они составляют первую строку. Каждая добавленная ячейка удлиняет строку.
 Чтобы остановить рост этой строки и начать размещать последующие ячейки во второй строке, нам нужно использовать элемент     («tr» означает «строка таблицы»). Давайте исследуем это сейчас.
 Поместите четыре ячейки, которые вы уже создали, в теги  , например: 
  Привет, я твой первый мобильный.
  Я твой второй сотовый.
  Я ваша третья ячейка.
  Я ваша четвертая ячейка.

 
 Теперь вы сделали одну строку, попробуйте сделать еще одну или две — каждую строку нужно обернуть дополнительным элементом  , причем каждая ячейка содержится в  <тд>  .
 Результат 
 В результате должна получиться таблица примерно следующего вида:
  таблица {
  граница коллапса: коллапс;
}
тд,
й {
  граница: 1px сплошной черный;
  отступ: 10px 20px;
}
 
  Примечание:  Вы также можете найти это на GitHub как simple-table.html (также смотрите его вживую).
 Теперь обратим внимание на заголовки таблиц — специальные ячейки, которые располагаются в начале строки или столбца и определяют тип данных, которые содержит эта строка или столбец (в качестве примера см. ячейки «Человек» и «Возраст» в первый пример, показанный в этой статье). Чтобы проиллюстрировать, почему они полезны, взгляните на следующий пример таблицы. Сначала исходный код:
 <таблица>
  
    <тд>9
    <тд>10
    <тд>5 таблица {
  граница коллапса: коллапс;
}
тд,
й {
  граница: 1px сплошной черный;
  отступ: 10px 20px;
}
 
 Теперь реальная визуализированная таблица:
 Проблема здесь в том, что, хотя вы можете понять, что происходит, не так просто сопоставить данные, как могло бы быть. Если бы заголовки столбцов и строк как-то выделялись, было бы намного лучше.
 Давайте попробуем улучшить эту таблицу.
 Сначала сделайте локальную копию наших файлов dogs-table.html и Minimum-table.css в новом каталоге на вашем локальном компьютере. HTML-код содержит тот же пример Dogs, который вы видели выше.
 Чтобы визуально и семантически распознавать заголовки таблиц как заголовки, можно использовать элемент  
 таблица {
  граница коллапса: коллапс;
}
тд,
й {
  граница: 1px сплошной черный;
  отступ: 10px 20px;
}
 
 Но вывод не дает нам совсем то, что мы хотим:
 Нам нужен способ, чтобы «Животные», «Бегемот» и «Крокодил» располагались в двух столбцах, а «Лошадь» и «Курица» — в двух столбцах. пролет вниз на два ряда. К счастью, заголовки и ячейки таблицы имеют атрибуты  colspan  и  rowspan , которые позволяют нам делать именно это. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, которые вы хотите охватить. Например,  colspan="2"  заставляет ячейку занимать два столбца.
 Давайте используем  colspan  и  rowspan , чтобы улучшить эту таблицу.
 Сначала сделайте локальную копию наших файлов animals-table.html и Minimum-table.css в новом каталоге на вашем локальном компьютере. HTML-код содержит тот же пример с животными, который вы видели выше.
 Затем используйте  colspan , чтобы «Животные», «Гиппопотам» и «Крокодил» располагались в двух столбцах.
 Наконец, используйте  rowspan , чтобы "Horse" и "Chicken" располагались в двух строках.
 Сохраните и откройте свой код в браузере, чтобы увидеть улучшения.
  Примечание:  Готовый пример можно найти на странице animals-table-fixed.html на GitHub (также см. его вживую).
 Стилизация без 
 Есть еще одна функция, о которой мы расскажем вам в этой статье, прежде чем двигаться дальше. В HTML есть метод определения информации о стилях для всего столбца данных в одном месте —  
 и   элемента. Они существуют, потому что может быть немного раздражающим и неэффективным указывать стиль для столбцов — обычно вам нужно указывать информацию о стиле для  каждый   таблица {
  граница коллапса: коллапс;
}
тд,
й {
  граница: 1px сплошной черный;
  отступ: 10px 20px;
}
 
 Что дает нам следующий результат:
 Это не идеально, так как мы должны повторить информацию о стиле во всех трех ячейках в столбце (в реальном проекте мы, вероятно, установили бы класс   для всех трех ячеек). и укажите стиль в отдельной таблице стилей).
 Стилизация с помощью 
 Вместо этого мы можем указать информацию один раз, на 
 элемент. Элементы  указаны внутри контейнера  непосредственно под открывающим тегом 
  
    Привет, я твой первый мобильный. 
    Я твой второй сотовый.
    Я ваша третья ячейка.
    Я ваша четвертая ячейка.
  
  
    Вторая строка, первая ячейка.
    Ячейка 2.
    Ячейка 3.
    Ячейка 4.
  

 
     
    Ноки
    Флор
    Элла
    Хуан
  
  
    Порода
    Джек Рассел
    Пудель
    Уличный пес
    Кокер-спаниель
  
  
    Возраст
    16 
  
  
    Владелец
    Свекровь
    Я
    Я
    Невестка
  
  
    Пищевые привычки
    Ест все, что осталось
    Откусывает еду
    Сытный едок
    Будет есть, пока не взорвется
  

    ("th" означает "заголовок таблицы"). Это работает точно так же, как   , за исключением того, что оно обозначает заголовок, а не обычную ячейку. Зайдите в свой HTML и измените все элементы  , окружающие заголовки таблицы, на элементы  . Сохраните свой HTML-код и загрузите его в браузере, и вы должны увидеть, что заголовки теперь выглядят как заголовки.
  Примечание:  Вы можете найти наш готовый пример по адресу dogs-table-fixed. html на GitHub (также смотрите его вживую).
 Частично мы уже ответили на этот вопрос — легче найти нужные данные, когда заголовки четко выделяются, да и дизайн в целом выглядит лучше.
  Примечание.  Заголовки таблиц имеют некоторые стили по умолчанию — они выделены полужирным шрифтом и расположены по центру, даже если вы не добавите к таблице свой собственный стиль, чтобы они выделялись.
 Заголовки таблиц также имеют дополнительное преимущество — наряду с атрибутом  Scope  (о котором мы узнаем в следующей статье) они позволяют сделать таблицы более доступными, связывая каждый заголовок со всеми данными в одной строке. или колонка. Затем программы чтения с экрана могут считывать всю строку или столбец данных сразу, что очень полезно.
 Иногда нам нужно, чтобы ячейки занимали несколько строк или столбцов. Возьмем следующий простой пример, в котором показаны названия обычных животных. В некоторых случаях мы хотим показывать имена самцов и самок рядом с названием животного. Иногда мы этого не делаем, и в таких случаях мы просто хотим, чтобы название животного охватывало всю таблицу.
 Исходная разметка выглядит так:
 <таблица>
  

    Животные
  
  
    Гиппопотам
  
  
    Лошадь
    Маре
  
  
    Жеребец
  
  
    Крокодил
  
  
    Курица
    Курица
  
  
    Петух
  

 
      или   в столбце или использовать сложный селектор например  :nth-child  .
  Примечание:  Стиль столбцов, подобный этому, ограничен несколькими свойствами:  граница  ,  фон  ,  ширина  и  видимость  . Чтобы установить другие свойства, вам придется либо стилизовать каждые   или   в столбце, либо использовать сложный селектор, такой как  :nth-child  .
 Возьмем следующий простой пример:
 <таблица>
  

    Данные 1
    Данные 2
  
  
    Калькутта
    Оранжевый
  
  
    Роботы
    Джаз
  

 
   
. Мы могли бы создать тот же эффект, что и выше, указав нашу таблицу следующим образом:
  
<столбец>
    <столбец>
  
   Фактически мы определяем два "столбца стилей", один из которых определяет информацию о стиле для каждого столбца. Мы не стилизуем первый столбец, но нам все равно нужно включить пустой элемент 
 — иначе стиль будет применен только к первому столбцу.
 Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто включить один элемент  с атрибутом span, например:
 <колл.  промежутка = "2">

  Так же, как  colspan  и  rowspan  ,  span  принимает безразмерное числовое значение, указывающее количество столбцов, к которым вы хотите применить стиль.
 Активное обучение: colgroup и col 
 Теперь пришло время попробовать себя.
 Ниже вы можете увидеть график работы учителя иностранных языков. В пятницу у нее новый класс, где весь день преподают голландский, но она также преподает немецкий несколько уроков по вторникам и четвергам. Она хочет выделить столбцы, содержащие дни, когда она преподает.
 Воссоздайте таблицу, выполнив следующие действия.
 Сначала сделайте локальную копию нашего файла timetable.html в новом каталоге на вашем локальном компьютере. HTML-код содержит ту же таблицу, которую вы видели выше, за исключением информации о стилях столбцов.
 Добавьте элемент  вверху таблицы, сразу под тегом 
  
    
    Данные 1
    Данные 2
  
  
    Калькутта
    Оранжевый
  
  
    Роботы
    Джаз
  

 
  
   
, в который вы можете добавить свои элементы  (см. оставшиеся шаги ниже).=Необходимо оставить первые два столбца без стилей. Добавьте цвет фона в третий столбец. Значением атрибута  стиля  является  background-color:#97DB9A;  Установите отдельную ширину для четвертого столбца. Значение атрибута  стиля  равно  width: 42px; 
 Добавьте цвет фона в пятый столбец. Значением атрибута  стиля  является  background-color: #97DB9A; 
=Добавьте другой цвет фона и рамку к шестому столбцу, чтобы обозначить, что это особенный день, и она преподает новый класс. Значения атрибута  стиля :  background-color:#DCC48E; граница: 4 пикселя сплошная #C1437A; 
 Последние два дня являются бесплатными днями, поэтому просто установите для них не цвет фона, а заданную ширину; значение атрибута  стиля : ширина : 42 пикселя; 
 Посмотрите, как вы справитесь с примером. Если вы застряли или хотите проверить свою работу, вы можете найти нашу версию на GitHub как timetable-fixed.html (также смотрите ее вживую).
 На этом основные сведения о HTML-таблицах заканчиваются. В следующей статье мы рассмотрим несколько более продвинутые функции таблиц и начнем думать, насколько они доступны для людей с ослабленным зрением.
 Обзор: Столы
 Следующий
 Основы HTML-таблиц
 Расширенные функции и специальные возможности таблицы HTML
 Структурирование планетарных данных
  Последнее изменение:   13 сентября 2022 г.  , участниками MDN
 Таблицы HTML – Учебное пособие по таблицам с кодом примера 
 Когда вы создаете проект, который должен представлять данные визуально, вам понадобится хороший способ отображения информации, чтобы ее было легко читать и понимать.
 Теперь, в зависимости от типа данных, вы можете выбирать между различными методами представления с помощью элементов HTML.
 В большинстве случаев таблицы удобнее отображать большие объемы структурированных данных. Вот почему в этой статье мы узнаем, как использовать таблицы в HTML, а затем как их стилизовать.
 Но обо всем по порядку — что такое таблица в HTML?
 Что такое таблица в HTML? 
 Таблица — это представление данных, расположенных в строках и столбцах. На самом деле, это больше похоже на электронную таблицу. В HTML с помощью таблиц вы можете упорядочивать данные, такие как изображения, текст, ссылки и т. д., в строки и столбцы ячеек.
 В последнее время использование таблиц в Интернете стало более популярным из-за удивительных тегов таблиц HTML, упрощающих их создание и оформление.
 Чтобы создать таблицу в HTML, вам понадобятся теги. Наиболее важным из них является тег   
, который является основным контейнером таблицы. Он показывает, где таблица начинается и где заканчивается.
 РЕКЛАМА
 Общие теги таблицы HTML 
 Другие теги включают:
  tr>  - представляет строки
  — добавляет отдельный заголовок в таблицу  — показывает основную часть таблицы  — создает отдельный нижний колонтитул для таблицы Синтаксис таблицы HTML: 
 <таблица>
     - используется для создания ячеек данных   - используется для добавления заголовков таблиц 
  — используется для вставки подписей  
 
 
    Ячейка 1
    Ячейка 2
    Ячейка 3
  
  
    Ячейка 4
    Ячейка 5
    Ячейка 6
  

 
 Ячейка 1  Ячейка 2  Ячейка 3
 Ячейка 4  Ячейка 5  Ячейка 6
 Теперь, когда вы понимаете, что представляет собой таблица HTML и как ее создать, давайте продолжим и посмотрим, как мы можем использовать эти теги для создания таблиц с дополнительными функциями.
 РЕКЛАМА
 Как добавить заголовок таблицы в HTML 
   используется для добавления заголовков к таблицам. В базовых проектах заголовок таблицы всегда будет занимать верхнюю строку, то есть у нас будет  , объявленный в нашей первой строке таблицы, за которым следуют фактические данные в таблице. По умолчанию текст, переданный в заголовке, выделен по центру и выделен полужирным шрифтом.
  Пример использования   
 <таблица>
  
    Имя
    Фамилия
    Адрес электронной почты
  
  
   Хиллари
   Ньякунди
   [email protected]
  
  
    Лари
    Мак
    разработчик@mail.com
  

 
 Имя  Фамилия  Адрес электронной почты
 Хиллари  Ньякунди  таблицы@mail. com
 Лари  Мак  разработчик@mail.com
 Из приведенного выше примера мы можем сказать, какой столбец содержит какую информацию. Это стало возможным благодаря использованию тега  .
 Как добавить заголовок к таблице 
 Основное назначение добавления заголовка к таблице — предоставить описание данных, представленных в таблице. Заголовок можно разместить вверху или внизу таблицы, и по умолчанию он всегда будет по центру.
 Чтобы вставить заголовок в таблицу, используйте тег  .
 РЕКЛАМА
 Синтаксис заголовка 
 <таблица>
  <заголовок>
  <тр> 

 
  Пример использования   
 <таблица>
  Бесплатные ресурсы по программированию
  
    Сайты
    Каналы YouTube
    Мобильные приложения
  
  
    Лагерь Freecode
    Лагерь Freecode
    Энки
  
  
    Школы W3
    Академический ум
    Герой программирования
  
  
    Академия Хана
    Поезд кодирования
    Обучение в одиночку
  

 
 Бесплатные ресурсы по программированию Объекты  Каналы Youtube  Мобильные приложения
 Лагерь Freecode  Лагерь свободного кода  Энки
 W3Schools  Академик  Герой программирования
 Академия Хана  Кодирующий поезд  Обучение в одиночку
 Как использовать атрибут Scope в таблицах HTML 
 Атрибут области действия используется для определения того, предназначен ли конкретный заголовок для столбца, строки или их группы. Я знаю, что определение может быть сложным для понимания, но подождите — с помощью примера вы лучше поймете его.
 Основная цель элемента области действия — показать целевые данные, чтобы пользователю не приходилось полагаться на предположения. Атрибут объявлен в ячейке заголовка   и принимает значения  col  ,  строка  ,  colgroup  и  rowgroup  .
 Значения  col  и  row  указывают на то, что ячейка заголовка предоставляет информацию либо для строк, либо для столбцов соответственно.
 РЕКЛАМА
 Синтаксис области действия 
 <таблица>
 
   
 
  Пример использования    
 <таблица>
  
    <й>
    Семестр
    Оценка
  
  
    <тд>1
    Январь - Апрель
    Кредит
  
  
    2
    Май - август
    Пройти
  
    
  
    2
    Сентябрь - Декабрь
    Отличие
  

 
 Семестр  Марка
 1  Январь - Апрель  Кредит
 2  май - август  Пропуск
 2  Сентябрь - Декабрь  Знак отличия
 Что делает атрибут  Scope , так это то, что он показывает, принадлежит ли ячейка заголовка столбцу, строке или группе того и другого.
 В этом случае заголовки принадлежат столбцу, потому что это то, что мы установили в коде. Вы можете поиграть, изменив атрибут, чтобы увидеть различные варианты поведения.
 Как использовать охват ячеек в таблице HTML 
 Возможно, вы столкнулись с ячейками, которые занимают два или более столбца или строки в таблице. Это называется охватом ячеек.
 Если вы работали в таких программах, как MS Office или Excel, вы, вероятно, использовали эту функцию, выделяя ячейки и нажимая команду, и вуаля! У тебя есть это.
 Те же функции можно применить к таблице HTML, используя два атрибута ячейки:  colspan  для горизонтального охвата и  rowspan  для вертикального охвата. Двум атрибутам присваиваются числа больше нуля, которые показывают количество ячеек, которые вы хотите охватить.
  Пример использования пролета   
 <таблица>
  
    Имя
    Тема
    Знаки
  
  
    Хиллари
    Расширенный Интернет
    75
  
  
    Операционная система
    60
  
      
    Лари
    Расширенный Интернет
    <тд>80
  
  
    Операционная система
    75
  
  
     <тд>
    Всего в среднем: 72,5
  

 
 Имя  Субъект  Марки
 Хиллари  Расширенный Интернет  75
 Операционная система  60
 Лари  Расширенный Интернет  80
 Операционная система  75
 Общее среднее: 72,5
 В приведенном выше примере у нас есть ячейка, состоящая из 2 ячеек в строках и 3 ячеек в столбце, как указано. Нам удалось применить пролет как по вертикали, так и по горизонтали.
  При использовании атрибутов  colspan  и  rowspan  убедитесь, что присвоенные значения объявлены правильно, чтобы избежать перекрытия ячеек. 
 РЕКЛАМА
 Как добавить заголовок, тело и нижний колонтитул таблицы в таблицы HTML 
 Точно так же, как веб-сайт или любой другой документ состоит из трех основных разделов — заголовка, основной части и нижнего колонтитула — так же, как и таблица.
 В таблице они разделены по атрибутам, а именно:
   — предоставляет отдельный заголовок для таблицы
   - содержит основное содержимое таблицы
   - создает отдельный нижний колонтитул для таблицы
  Пример использования   ,   и   
 <таблица>
  
    
      октябрь
      ноябрь
    
  
  
    
      Продажи
      Прибыль
      Продажи
      Прибыль
    
    
      $200,00
      $50,00
      300 000 долл.  США
      70 000 долл. США
    
  
    
  
    
      Ноябрь был более продуктивным
    
  

 
 октябрь  ноябрь
 Продажа  Прибыль  Продажи  Прибыль
 200,00 $  $50,00  300 000 долларов США  70 000 долларов США
 Ноябрь был продуктивнее
 В приведенном выше примере заголовок представлен названием месяцев, часть с цифрами продаж и прибыли представляет тело таблицы, и, наконец, часть с заявлением представляет нижний колонтитул нашей таблицы.
 Еще одна важная вещь, которую следует отметить, это то, что таблица может иметь более одной части тела. В подобном сценарии каждое тело группирует строки, которые связаны друг с другом.
 Как стилизовать HTML-таблицы с помощью CSS 
 Несмотря на то, что таблицы сегодня широко используются, очень редко можно найти таблицу без стилей. Большинство из них используют различные формы стилей, будь то цвета, шрифты, выделение важных значений и так далее.
 Стиль помогает сделать столы профессиональными и привлекательными. В конце концов, вы бы не хотели, чтобы ваш читатель смотрел на данные, разделенные только одной строкой.
 В отличие от стилей с помощью других языков или инструментов, в HTML вам потребуется создать дополнительный файл с расширением  .css , в который вы добавите свои стили и свяжете их с вашим HTML-файлом.
 Ниже прикреплена игровая площадка кода с примером стилизованной таблицы. Не стесняйтесь поиграть с ним, чтобы увидеть, как разные стили повлияют на дисплей.
 В приведенной выше игровой площадке с кодом мы создали таблицу и придали ей стиль, используя некоторые атрибуты, описанные в статье.
 Мы стилизовали его с помощью файла CSS, в котором мы добавили цвет и границу нашей таблице, чтобы сделать ее более читабельной и красивой. Таблица также имеет фиксированный заголовок, поэтому вы можете прокручивать большое количество данных и по-прежнему видеть заголовок определенного столбца.
 Итак, мы увидели, что такое таблица, мы создали несколько из них и даже сделали шаг вперед и применили стили.
 Но знания и неумение их применять не помогут. Итак, где и когда вам нужно использовать таблицы в своем дизайне?
 РЕКЛАМА
 Когда использовать таблицу 
 Есть много ситуаций, когда таблицы могут пригодиться при разработке ваших проектов:
 Вы можете использовать таблицы, когда хотите сравнить и сопоставить данные с общими характеристиками, такими как различия между A и B или результаты команды X с результатами команды Y.
 Вы также можете использовать его, если хотите дать обзор числовых данных. Хорошим примером этого является, когда вы пытаетесь представить оценки студентов или даже баллы команд, такие как таблица EPL.
 А таблица может помочь читателям быстро найти конкретную информацию, изложенную в понятной форме.No related posts.

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

Предпосылки:	Основы HTML (см. Введение в HTML).
Цель:	Чтобы получить базовые знания о таблицах HTML.

Животные
Привет, я твой первый мобильный.	Я твой второй сотовый.	Я ваша третья ячейка.	Я ваша четвертая ячейка.
Вторая строка, первая ячейка.	Ячейка 2.	Ячейка 3.	Ячейка 4.
	Ноки	Флор	Элла	Хуан
Порода	Джек Рассел	Пудель	Уличный пес	Кокер-спаниель
Возраст	16
Владелец	Свекровь	Я	Я	Невестка
Пищевые привычки	Ест все, что осталось	Откусывает еду	Сытный едок	Будет есть, пока не взорвется
("th" означает "заголовок таблицы"). Это работает точно так же, как	, за исключением того, что оно обозначает заголовок, а не обычную ячейку. Зайдите в свой HTML и измените все элементы	, окружающие заголовки таблицы, на элементы	. Сохраните свой HTML-код и загрузите его в браузере, и вы должны увидеть, что заголовки теперь выглядят как заголовки. Примечание: Вы можете найти наш готовый пример по адресу dogs-table-fixed. html на GitHub (также смотрите его вживую). Частично мы уже ответили на этот вопрос — легче найти нужные данные, когда заголовки четко выделяются, да и дизайн в целом выглядит лучше. Примечание. Заголовки таблиц имеют некоторые стили по умолчанию — они выделены полужирным шрифтом и расположены по центру, даже если вы не добавите к таблице свой собственный стиль, чтобы они выделялись. Заголовки таблиц также имеют дополнительное преимущество — наряду с атрибутом `Scope` (о котором мы узнаем в следующей статье) они позволяют сделать таблицы более доступными, связывая каждый заголовок со всеми данными в одной строке. или колонка. Затем программы чтения с экрана могут считывать всю строку или столбец данных сразу, что очень полезно. Иногда нам нужно, чтобы ячейки занимали несколько строк или столбцов. Возьмем следующий простой пример, в котором показаны названия обычных животных. В некоторых случаях мы хотим показывать имена самцов и самок рядом с названием животного. Иногда мы этого не делаем, и в таких случаях мы просто хотим, чтобы название животного охватывало всю таблицу. Исходная разметка выглядит так: <таблица>
Гиппопотам
Лошадь	Маре
Жеребец
Крокодил
Курица	Курица
Петух
или	в столбце или использовать сложный селектор например `:nth-child` . Примечание: Стиль столбцов, подобный этому, ограничен несколькими свойствами: `граница` , `фон` , `ширина` и `видимость` . Чтобы установить другие свойства, вам придется либо стилизовать каждые	или	в столбце, либо использовать сложный селектор, такой как `:nth-child` . Возьмем следующий простой пример: <таблица>
Данные 1	Данные 2
Калькутта	Оранжевый
Роботы	Джаз

- используется для создания ячеек данных	- используется для добавления заголовков таблиц
Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6

Имя	Фамилия	Адрес электронной почты
Хиллари	Ньякунди	таблицы@mail. com
Лари	Мак	разработчик@mail.com

Объекты	Каналы Youtube	Мобильные приложения
Лагерь Freecode	Лагерь свободного кода	Энки
W3Schools	Академик	Герой программирования
Академия Хана	Кодирующий поезд	Обучение в одиночку

	Семестр	Марка
1	Январь - Апрель	Кредит
2	май - август	Пропуск
2	Сентябрь - Декабрь	Знак отличия

Имя	Субъект	Марки
Хиллари	Расширенный Интернет	75
Хиллари	Операционная система	60
Лари	Расширенный Интернет	80
Лари	Операционная система	75
	Общее среднее: 72,5

октябрь		ноябрь
Продажа	Прибыль	Продажи	Прибыль
200,00 $	$50,00	300 000 долларов США	70 000 долларов США
Ноябрь был продуктивнее