Как написать таблицу на html - Правописание и грамматика

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

Что же представляют собой HTML-таблицы и как их создать – во всем этом разбираемся в сегодняшней статье.

Как создать таблицу

Каждая таблица в HTML-файле должна состоять из строк и столбцов, а ее создание заключается в одном простом теге – <table>.

Откройте HTML-документ и пропишите туда следующее:

<table></table>

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

Давайте попробуем добавить в наш тег немного информации – например, простой текстовый фрагмент «Моя первая таблица». В коде это будет выглядеть так:

<table>Моя первая таблица</table>

А вот как этот фрагмент отображается в браузере:

Выглядит довольно странно, да? Мы вроде бы создали таблицу, а на экране видим лишь текст, который будто просто написан в теге <body>. Все это потому, что нужно добавить строки и столбцы, а уже потом в них прописать текстовый фрагмент – только тогда таблица примет оригинальный вид. Но и это еще не все, предварительно нам нужно добавить обводку для таблицы, иначе чуда не произойдет.

Мы можем использовать CSS-стили либо просто прописать в HTML-файле тег <style></style> и добавить в него следующее:

<style>

table {

   border: 1px solid grey;

}

</style>

У нас появится маленькая точка внизу:

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

Комьюнити теперь в Телеграм

Подпишитесь и будьте в курсе последних IT-новостей

Как создать строки таблицы

С помощью тега <tr> мы можем создать строку, в которой будут содержаться столбцы таблицы. Давайте добавим этот тег и посмотрим, что произойдет. Прописываем следующее:

<table>

      <tr>

         Моя первая таблица

      </tr>

</table>

В результате видим все ту же картину с маленькой точкой:

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

Пропишите следующий код:

<table>

       <tr>

                 <td>

                       Моя первая таблица

                 </td>

       </tr>

</table>

Получаем следующее:

Аналогичным образом давайте добавим еще несколько строк и столбцов. Для этого в теге <table> создадим 3 закрывающих тега <tr></tr> и внутрь добавим по 2 тега <td></td>:

<table>

                        <tr>

                                   <td>

                                               Моя первая таблица

                                   </td>

                                   <td>

                                               А вот и столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               А вот и новая строка

                                   </td>

                                   <td>

                                               И еще один столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               Третья строка!

                                   </td>

                                   <td>

                                               И последний столбец!

                                   </td>

                        </tr>

</table>

Получаем следующее:

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

Просто прописываем в теге <style> пару строчек кода:

td {

   border: 1px solid grey;

}

Получаем результат:

Чтобы получить ту таблицу, которую мы хотим видеть, необходимо совместить рамки. Для этого прописываем еще одну строчку кода в тег <style> для table:

table {

border-collapse: collapse;

}

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

Для визуального удовлетворения давайте также растянем таблицу на всю ширину экрана – для этого необходимо задать width для тега <table>:

table {

   width: 100%;

}

Теперь наша таблица растянута:

Width со значением 100% растягивает таблицу на всю ширину страницы. Также вы можете указывать значения в пикселях, например width: 500px – в таком случае на любом экране таблица примет указанную ширину. Аналогичным образом можно присвоить и высоту – в пикселях или в процентах.

Заголовок столбцов и строк, объединение ячеек

Мы также можем задать заголовок для столбцов и строк – в этом нам помогает тег <th>. В такой ячейке обычно хранится атрибут для всех данных строк или столбцов. А к содержимому таких ячеек применяется определенный стиль – выделение жирным шрифтом и выравнивание по центру ячейки.

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

Давайте для примера добавим тег <th> с надписью «Заголовок» в еще одну строку таблицы:

<table>

                        <tr>

                                   <th>Заголовок</th>

                        </tr>

                        <tr>

                                   <td>

                                               Моя первая таблица

                                   </td>

                                   <td>

                                               А вот и столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               А вот и новая строка

                                   </td>

                                   <td>

                                               И еще один столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td>

                                               Третья строка!

                                   </td>

                                   <td>

                                               И последний столбец!

                                   </td>

                        </tr>

</table>

В итоге получаем следующее:

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

<tr>

<th colspan="2">Заголовок</th>

</tr>

Вот как это выглядит на экране:

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

<table>

                        <tr>

                                   <th colspan="2">Заголовок</th>

                        </tr>

                        <tr>

                                   <td>

                                               Моя первая таблица

                                   </td>

                                   <td>

                                               А вот и столбец

                                   </td>

                        </tr>

                        <tr >

                                   <td >

                                               А вот и новая строка

                                   </td>

                                   <td rowspan="2">

                                               И еще один столбец

                                   </td>

                        </tr>

                        <tr>

                                   <td rowspan="2">

                                               Третья строка!

                                   </td>

                                  

                        </tr>

</table>

Получаем следующее:

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

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

С базовыми правилами создания таблицы мы разобрались, теперь давайте пойдем немного дальше – первым делом обсудим общий заголовок, который присваивается сверху или снизу таблицы. Он задается с помощью тега <caption>, а его размещение корректируется с помощью свойства caption-side: значение top – для вывода до таблицы, bottom – после.

Заголовок может потребоваться в следующих случаях:

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

Давайте добавим <caption> в таблицу и посмотрим, что из этого выйдет. Для примера возьмем фразу «Таблица обо всем»:

<caption>Таблица обо всем</caption>

Получаем:

С помощью стилей мы можем задать отступы либо изменить жирность заголовка – это поможет вам улучшить визуальную часть. Для отступов используйте CSS-стили margin или padding, а жирность задается свойством font-weight или тегом <b>.

Группирование строк и столбцов таблицы

Тег <colgroup> создает структурную группу столбцов, выделяя логически объединенные ячейки. Он группирует один или несколько столбцов для единого форматирования, позволяя таким образом применять стили к столбцам, чтобы не повторять стили для каждой ячейки или строки.

Еще один важный тег – <col>. Он формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре. С его помощью можно задавать свойства столбцов для каждого столбца в пределах элемента <colgroup>.

Давайте добавим к уже существующей таблице данные теги:

<colgroup>

<col span="1" style="background:pink">

<col style="background-color:yellow"><!-- Задаем цвет фона для следующего столбца таблицы-->

</colgroup>

Получаем следующее:

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

Тело таблицы

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

Тело таблицы располагается после заголовка <caption> и шапки <thead>.

Шапка и подвал таблицы

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

Тег <tfoot> используется для группировки содержимого нижней части таблицы – его принято обозначать нижним колонтитулом таблицы. Выводится он после тега <tbody>, а при печати таблицы содержимое <tfoot> может быть как на каждой напечатанной странице, так и только на последней – все зависит от браузера. Для ячеек в секции <tfoot> следует использовать тег <td>.

Общая сводка по HTML-таблицам

Давайте закрепим полученную информацию. Вот теги, которые мы использовали при построении HTML-таблиц:

<table> – тег, позволяющий создать контейнер таблицы;
<tr> – тег для создания строки (ряда) таблицы, используемый совместно с <td> или <th>;
<td> – тег обычной ячейки таблицы;
<th> – тег ячейки-заголовка таблицы;
<col> – тег, позволяющий создать колонки для таблицы;
<colgroup> – тег, который группирует колонки;
<thead> – тег для верхнего колонтитула таблицы;
<tbody> – тег основной части таблицы;
<tfoot> – тег для нижнего колонтитула таблицы;
<caption> – используйте этот тег, чтобы задать общий заголовок для таблицы;
colspan – показывает количество ячеек в строке для объединения по горизонтали;
rowspan – показывает количество ячеек в столбце для объединения по вертикали;
span – количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1;
border – ширина границ таблицы в пикселях, по умолчанию: 0 – в таком случае обводка таблицы не видна;
cellpadding – отступ от границ ячеек до их содержимого;
cellspacing – отступ между границами ячеек.

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

Создание 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.

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

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

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

Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders (en-US)), используемые ими, интерпретируют 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.

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

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «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 и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.

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

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

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

Заголовки дают дополнительное преимущество — вместе с атрибутом 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» на две строки.
Сохраните код и откройте его в браузере, чтобы увидеть улучшения.

Стилизация столбцов

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

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

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>

Что даёт нам:

Data 1	Data 2
Calcutta	Orange
Robots	Jazz

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

<table>
  <colgroup>
    <col>
    <col style="background-color: yellow">
  </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 style="background-color: yellow" span="2">
</colgroup>

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

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

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

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

	Mon	Tues	Thurs	Fri
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
Далее

Источник

HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.

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

Таблицы создаются они с помощью тега <table> который имеет закрывающий тег </table>. Код самой простой таблицы из двух строк и столбцов выглядит следующим образом.

<table>
   <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>

Результат выполнения кода будет следующим.

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

Стиль по умолчанию:
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 2px;
border-color: grey;
font-variant: normal;

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

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

HTML-код:

<table border="1" bordercolor="grey">

Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:

table {
   border: 1px solid grey;
}

Посмотрим результат.

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

Цвет границ задается с помощью bordercolor, а размер с помощью border.

Как убрать внутренние границы таблицы?

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

Давайте разберемся на примере.

<div style="border:1px solid #ccc;">
<table border="0" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

Результат.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

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

Как вы уже догадались строка таблицы задается с помощью тега <tr> (от англ. table row — строка таблицы). Элемент <tr> является контейнером содержащим ячейки таблицы. Ячейки вне этого контейнера будут неправильно отображаться на экране.

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

Ячейки таблицы создаются с помощью тега <td> (от англ. able data — данные таблицы), который вкладывается в <tr>. Думаю со строками и ячейками все понятно.

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

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

Для создания заголовка таблицы используется тег <caption>. Он идет сразу после тега <table> и задает название таблицы.

Для создания заголовка столбца используется тег <th> (от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

<table border="1" bordercolor="grey">
<caption>Таблица сотрудников фирмы</caption>
<tr> 
<th>ФИО</th> 
<th>Должность</th> 
</tr> 
<tr> 
<td>Иванов Иван Иванович</td> 
<td>Директор</td> 
</tr> 
<tr> 
<td>Петрова Любовь Николаевна</td> 
<td>Главный бухгалтер</td> 
</tr>
</table>

Результат.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Таблица по центру

Часто возникает необходимость выровнять таблицу по центру документа. Тут есть два варианта (как и с границей).С помощью HTML-кода добавить атрибут align со значением center тега <table>.

<table border="1" bordercolor="grey"  align="center">

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

<style>
table { margin:0 auto; }
</style>

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

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

При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.

<table border="1" width="400">
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Размер шрифта

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

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

<table border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td><span style="color: red; font-size: x-large; >Иванов Иван Иванович</span></td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

Результат.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

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

<style>
.table-primer td,th{font-size:12px;font-family: 'Times New Roman'; }
</style>
<table class="table-primer" border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th>ФИО</th>
<th>Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>
</div>

Результат.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

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

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

<table border="1" width="100%"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:

top — по верхнему краю.
middle — по середине.
bottom — по нижнему краю.
baseline — по базовой линии.

Отступы в таблице

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

Отступы от границ ячеек. С помощью HTML задать отступы можно используя атрибут cellpadding тега <table>. Давайте увеличим отступ содержимого в ячейках нашей таблицы.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center" >Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Результат.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td {padding: 10px;}.

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

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

И вертикальным.

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

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td colspan="2">Руководящий состав:</td>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Петрова Любовь Николаевна</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Таблица сотрудников фирмы

ФИО	Должность
Руководящий состав:
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td rowspan="2">Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Главный бухгалтер

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

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

Изменить цвет фона.
Изменить цвет ячейки (или строк).
Картинки в таблице (в том числе с прозрачностью).
Кнопки и элементы управления в таблице.
Скролл (прокрутка) содержимого таблицы.

Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

<table border="1" width="100%" bgcolor="#bfc1f5" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr>
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td rowspan="2">Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Главный бухгалтер

Изменить цвет ячейки (или строк)

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

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
</tr>
</tbody>
</table>

Результат.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

Картинки в ячейке

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

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

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
<th align="center">Фото</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
<td><img src="/img/boss.png"></td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
<td class="nofoto">Нет фото</td>
</tr>
</tbody>
</table>

.nofoto{
background: url(/img/no-foto.png);
opacity: 0.6;
height:200px;
}

Результат.

Таблица сотрудников фирмы

ФИО	Должность	Фото
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

Кнопки и элементы управления вставляются в таблицу стандартными способами. Создадим справа еще один столбец и вставим туда текстовое поле с кнопкой.

<table border="1" width="100%" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
<th align="center">Фото</th>
<th align="center">Написать</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
<td><img src="/img/boss.png"></td>
<td><textarea></textarea><br><button>Написать директору</button></td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
<td class="nofoto">Нет фото</td>
<td><textarea></textarea><br><button>Написать бухгалтеру</button></td>
</tr>
</tbody>
</table>

Результат.

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

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

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

<table border="1" width="180px" class="table-primer" cellpadding="10"><caption>Таблица сотрудников фирмы</caption>
<tbody>
<tr bgcolor="#f1edf2">
<th align="center">ФИО</th>
<th align="center">Должность</th>
<th align="center">Фото</th>
<th align="center">Написать</th>
</tr>
<tr>
<td>Иванов Иван Иванович</td>
<td>Директор</td>
<td><img src="/img/boss.png"></td>
<td><textarea></textarea><br><button>Написать директору</button></td>
</tr>
<tr bgcolor="#f1edf2">
<td>Иванов Иван Иванович</td>
<td>Главный бухгалтер</td>
<td class="nofoto">Нет фото</td>
<td><textarea></textarea><br><button>Написать бухгалтеру</button></td>
</tr>
</tbody>
</table>

.table-primer {
  display: block;
  overflow: auto;
  max-width: 100%;
}

Результат.

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

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

Генератор HTML-таблиц

Источник

В HTML для создания таблиц используются теги группы table. К ним относятся:

<table> — тег обвертка таблицы;
<tr> — тег строки (ряда) таблицы;
<td> — тег обычной ячейки таблицы;
<th> — тег ячейки-заголовка таблицы;
<col> — тег колонки таблицы;
<colgroup> — тег группы колонок таблицы;
<thead> — тег верхнего колонтитула таблицы;
<tbody> — тег основной части таблицы;
<tfoot> — тег нижнего колонтитула таблицы;
<caption> — тег подписи таблицы.

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

Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

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

Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.

Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

Далее необходимо определить строки и ячейки — структуру таблицы.

В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.

Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.

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

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

Исходный код простой таблицы HTML

<table>
  <tbody>
    <tr>
      <td>Ячейка 1</td>
      <td>Ячейка 2</td>
      <td>Ячейка 3</td>
    </tr>
    <tr>
      <td>Ячейка 4</td>
      <td>Ячейка 5</td>
      <td>Ячейка 6</td>
    </tr>
    <tr>
      <td>Ячейка 7</td>
      <td>Ячейка 8</td>
      <td>Ячейка 9</td>
    </tr>
  </tbody>
</table>

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

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

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

Пример HTML таблицы с заголовком th

Volkswagen AG	Daimler AG	BMW Group
Audi	Mercedes-Benz	BMW
Skoda	Mercedes-AMG	Mini
Lamborghini	Smart	Rolls-Royce

Исходный код таблицы HTML с заголовками th

<table>
  <tbody>
    <tr>
      <th>Volkswagen AG</th>
      <th>Daimler AG</th>
      <th>BMW Group</th>
    </tr>
    <tr>
      <td>Audi</td>
      <td>Mercedes-Benz</td>
      <td>BMW</td>
    </tr>
    <tr>
      <td>Skoda</td>
      <td>Mercedes-AMG</td>
      <td>Mini</td>
    </tr>
    <tr>
      <td>Lamborghini</td>
      <td>Smart</td>
      <td>Rolls-Royce</td>
    </tr>
  </tbody>
</table>

Объединение ячеек в таблице HTML

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

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

<td colspan="3" rowspan="2">Текст ячейки</td>

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan=»2″.

Пример HTML таблицы с объединением ячеек

Nissan
Модель	Комплектация	Наличие
Nissan Qashqai	VISIA	+
TEKNA	+
Nissan X-Trail	ACENTA	+
CONNECTA	—

Исходный код таблицы HTML с объединенными ячейками

<table>
  <tbody>
    <tr>
      <th colspan="3">Nissan</th>
    </tr>
    <tr>
      <th>Модель</th>
      <th>Комплектация</th>
      <th>Наличие</th>
    </tr>
    <tr>
      <td rowspan="2">Nissan Qashqai</td>
      <td>VISIA</td>
      <td>+</td>
    </tr>
    <tr>
      <td>TEKNA</td>
      <td>+</td>
    </tr>
    <tr>
      <td rowspan="2">Nissan X-Trail</td>
      <td>ACENTA</td>
      <td>+</td>
    </tr>
    <tr>
      <td>CONNECTA</td>
      <td>-</td>
    </tr>
  </tbody>
</table>

Колонтитулы и подпись в HTML таблицах

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

Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.

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

Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Исходный код таблицы с колонтитулами и подписью

<table>
  <caption>Комплектации Renault Sandero Stepway</caption>
  <thead>
    <tr>
      <th>Характеристика</th>
      <th>SUTA 09H 6R</th>
      <th>SUTA 09HR6R</th>
      <th>SUTA 15H 5R</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Наличие</th>
      <td>+</td>
      <td>+</td>
      <td>+</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Мощность двигателя</th>
      <td>0,9 (90 л.с.)</td>
      <td>0,9 (90 л.с.)</td>
      <td>1,5 (90 л.с.)</td>
    </tr>
    <tr>
      <th>Топливо</th>
      <td>бензин</td>
      <td>бензин</td>
      <td>дизель</td>
    </tr>
    <tr>
     <th>Норма токсичности</th>
     <td>Евро-6</td>
     <td>Евро-6</td>
     <td>Евро-5</td>
    </tr>
  </tbody>
</table>

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

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

Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число«, указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).

Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.

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

ZEN 2E2C AL A	ZEN 2E2C J5 A	INTENSE 2E3C AL A	Характеристика
1.5 (90 л.с.)	1.2 (115 л.с.)	1.5 (90 л.с.)	Мощность двигателя
дизель	бензин	дизель	Топливо
АКП6 (EDC)	АКП6 (EDC)	АКП6 (EDC)	Трансмиссия

Исходный код таблицы HTML c <col> и <colgroup>

<table>
  <colgroup style="background-color: #ddd;">
    <col>
    <col style="background-color: #ccc;">
    <col>
  </colgroup>
  <tbody>
    <tr>
      <th>ZEN 2E2C AL A</th>
      <th>ZEN 2E2C J5 A</th>
      <th>INTENSE 2E3C AL A</th>
      <th>Характеристика</th>
    </tr>
    <tr>
      <td>1.5 (90 л.с.)</td>
      <td>1.2 (115 л.с.)</td>
      <td>1.5 (90 л.с.)</td>
      <th>Мощность двигателя</th>
    </tr>
    <tr>
      <td>дизель</td>
      <td>бензин</td>
      <td>дизель</td>
      <th>Топливо</th>
    </tr>
    <tr>
      <td>АКП6 (EDC)</td>
      <td>АКП6 (EDC)</td>
      <td>АКП6 (EDC)</td>
      <th>Трансмиссия</th>
    </tr>
  </tbody>
</table>

Таблицы в макете страниц сайта

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

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

Источник

Summary

This article offers an introduction to HTML tables, including basic coding techniques and CSS styling.

Introduction

Ack! — how do you use web standards to organize reams of data? The very idea of using tons of nested elements to get all your data into nice little rows and boxes might put your brain into panic mode, but there is a solution — HTML tables to the rescue!

In web design, tables are a good way to organize data into a tabular form. You see them all the time on websites, whether they are giving a summary or comparison of political election results, sports statistics, price comparisons, size charts, or other data.

Back in the Jurassic Age of the Internet, before CSS was popularized as a method of separating HTML presentation from structure, tables were used as a way to lay out web pages — to create columns, boxes, and general areas in which to arrange the page content. This is, of course, the wrong way to go about it; using tables for page layout results in bloated, messy pages with tons of nested tables that produce larger file sizes, are hard to code initially, and nearly impossible to maintain later. Today, you should only use tables for presenting tabular data, and use CSS to control page layout.

From an information design standpoint, tables always perform one of two functions: they either reflect the structure of organized data, or they impart structure to unorganized data. If an HTML table doesn’t do one of those jobs, it probably shouldn’t be a table.

The most basic table

Let’s start with the semantic HTML code required to render a basic table. This example compares recent volcanic eruptions in the Pacific region of North America:

<table>
    <tr>
        <td>Volcano Name</td>
        <td>Location</td>
        <td>Last Major Eruption</td>
        <td>Type of Eruption</td>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt .St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

Bearing in mind that browser and rendering environment defaults (such as those in Web Platform Docs pages!) may significantly affect visual table styling, the above table might render like this:

||
|Volcano Name|Location|Last Major Eruption|Type of Eruption|
|Mt. Lassen|California|1914-17|Explosive Eruption|
|Mt. Hood|Oregon|1790s|Pyroclastic flows and Mudflows|
|Mt .St. Helens|Washington|1980|Explosive Eruption|

Let’s start by breaking down the HTML markup used in the above code:

<table></table>: The <table> wrapper element tells the browser that the content is a table.
<tr></tr>: The <tr> element establishes a table row. This allows the browser to organize any content between the <tr> and </tr> tags in a horizontal fashion; that is, in rows.
<td></td>: The <td> element defines the table data cell or each individual “box” for content within the row. Only use as many <td> table cells as needed for actual data. Don’t use empty <td> cells for white space or padding — use CSS instead. This is not only a good way to separate presentation from structure, but keeping the HTML clean and simple makes the table easier to understand for people with visual impairments who are using screen readers.

Note that there is no “table column” (<tc>) element in the sample code; in fact, there is no such element in HTML. Columns are a logical construct, not a physical one. We seem to see columns in a properly constructed table, but they aren’t actually coded, they are merely implied by the alignment of the data cells.

The basic table elements must be nested as follows:

<table>
    <tr>
        <td>content</td>
        <td>content</td>
        <td>content</td>
    </tr>
</table>

To order them in any other way will cause the browser to spit up the equivalent of an Internet hair ball and render the table oddly, if at all.

Adding some more features

Now that the basic table is in place, we can add some slightly more complex table features. First, we’ll add a caption and table headers to help improve the data, both in terms of semantics and legibility for screen readers. The updated table markup looks like this:

<table>
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <tr>
        <th>Volcano Name</th>
        <th>Location</th>
        <th>Last Major Eruption</th>
        <th>Type of Eruption</th>
    </tr>
    <tr>
        <td>Mt. Lassen</td>
        <td>California</td>
        <td>1914-17</td>
        <td>Explosive Eruption</td>
    </tr>
    <tr>
        <td>Mt. Hood</td>
        <td>Oregon</td>
        <td>1790s</td>
        <td>Pyroclastic flows and Mudflows</td>
    </tr>
    <tr>
        <td>Mt. St. Helens</td>
        <td>Washington</td>
        <td>1980</td>
        <td>Explosive Eruption</td>
    </tr>
</table>

This code is (which is to say, «might be», again depending on environment) rendered as:

Volcano Name	Location	Last Major Eruption	Type of Eruption
Mt. Lassen	California	1914-17	Explosive Eruption
Mt. Hood	Oregon	1790s	Pyroclastic flows and Mudflows
Mt. St. Helens	Washington	1980	Explosive Eruption

The new elements used here are:

<caption></caption>: The <caption> element allows you to give the table data a caption. Most browsers will center the caption and render it the same width as the table by default.
<th></th>: The <th> element defines the content as table headings for each table section, which can be a column, a row, or a group of cells. This is useful not just to help semantically describe the function of the content, but it also helps render it more accurately in a variety of browsers and devices. The <th> element is used in a row just like a <td>, and browsers typically render its content bold and centered in the data cell.

Structuring the table further

As a final step in structuring our table, we will define table header and table body sections, add a footer, and define the scope of row and column headings. We will also add a summary attribute to describe the table contents. The final markup looks like this:

<table summary="a summary of recent major volcanic eruptions in the Pacific Northwest">
    <caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
    <thead>
        <tr>
            <th scope="col">Volcano Name</th>
            <th scope="col">Location</th>
            <th scope="col">Last Major Eruption</th>
            <th scope="col">Type of Eruption</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="4">Compiled in 2008 by Ms Jen</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Mt. Lassen</th>
            <td>California</td>
            <td>1914-17</td>
            <td>Explosive Eruption</td>
        </tr>
        <tr>
            <th scope="row">Mt. Hood</th>
            <td>Oregon</td>
            <td>1790s</td>
            <td>Pyroclastic flows and Mudflows</td>
        </tr>
        <tr>
            <th scope="row">Mt. St. Helens</th>
            <td>Washington</td>
            <td>1980</td>
            <td>Explosive Eruption</td>
        </tr>
    </tbody>
</table>

This table code renders (again, “might render”) like this:

Recent Major Volcanic Eruptions in the Pacific Northwest

Volcano Name	Location	Last Major Eruption	Type of Eruption
Mt. Lassen	California	1914-17	Explosive Eruption
Mt. Hood	Oregon	1790s	Pyroclastic flows and Mudflows
Mt. St. Helens	Washington	1980	Explosive Eruption
Compiled in 2008 by Ms Jen

The new elements and attributes are as follows:

The <thead>, <tbody> and <tfoot> elements: These define the table’s header, body, and footer, respectively. Unless you are coding a really complex table with many columns and rows of data, using these may be overkill. In a complex table, however, they can add useful structure for the developers, and also for browsers and other devices.
The colspan and rowspan attributes: The colspan attribute creates a table cell that spans more than one column. Here, we wanted the footer table cell to span the whole width of the table, so we told it to span four columns across a row. Alternately, you can add a table cell rowspan attribute that will allow the table cell to span a number of rows down a column, for example <td rowspan="3">.
The summary attribute: This attribute is used to define a summary of the table contents, primarily for use by screenreaders (you won’t see it in the rendered version of the table above). Note that in the older W3C recommendations, WCAG 1.0 and HTML 4.0, you can use the summary attribute as detailed above. In newer drafts of the specs, however, the summary attribute is not mentioned. Whether to still use the summary attribute seems undecided, so for now let’s say that it is safe to still use it. After all, it doesn’t cause anything to break, and it confers accessibility advantages.
The scope attribute: You may also have noticed the scope attributes in the th tags, and the fact that we have defined the volcano names as headings as well, inside the data rows! The scope attribute can be used in the th element to tell screen readers that the th content is the title for a column or a row.

CSS to the rescue: a better looking table

The above elements and attributes are all that is necessary to code a good data table. Now that the HTML structure is in place, let’s look at some simple CSS to make the table look a bit nicer:

body {
    background: #ffffff;
    margin: 0;
    padding: 20px;
    line-height: 1.4em;
    font-family: tahoma, arial, sans-serif;
    font-size: 62.5%;
}

table {
    width: 80%;
    margin: 0;
    background: #FFFFFF;
    border: 1px solid #333333;
    border-collapse: collapse;
}

td, th {
    border-bottom: 1px solid #333333;
    padding: 6px 16px;
    text-align: left;
}

th {
    background: #EEEEEE;
}

caption {
    background: #E0E0E0;
    margin: 0;
    border: 1px solid #333333;
    border-bottom: none;
    padding: 6px 16px;
    font-weight: bold;
}

When applied to our final table markup, the table looks like this (we used an image here so our markup wouldn’t be affected by the rendering environment):

Figure 1: A more visually appealing table.

Ahh, much better. You can choose to style the table any way you want, but the above sample provides a baseline to work with. For now let’s briefly break down what each section of this CSS is doing:

<body>: In the above CSS, we have added properties to set the margin (to zero in this case), padding to give a little room, background colour (white), font size, and font family, as well as the line height to also give a little breathing room. Try altering the property values in the CSS to see how things change.
<table>: Borders have been added using the CSS border property. To make this work correctly, we also had to set the border-collapse property to collapse, to reset the border values in the table and allow the border-bottom to be a straight rule line across the whole row rather than being broken up at the end of each table cell. A width of 80% was chosen for this example (this makes the table extend across 80% of the screen width).
<th> and <td>: In the above CSS, we set text-align to be left, but you could set it to center or other values if you like. We also gave both the <th> and <td> a bit of padding to open up the rows and allow for greater readability. In the case of the <th> selector, we used another color to differentiate the headings from the rest of the table.
<caption>: In the example we gave the caption a border (with no bottom border, as the border in the table already provides it), a different background colour, and bold type to set the caption apart from the table header row.

Conclusion

In this article we have presented all you need to know to create basic HTML data tables. Let’s leave this article with some pertinent thoughts:

It is important that tables are correctly coded to be readable by a variety web browsers, mobile, accessible, and other devices. Table HTML is best kept to a minimum, and you should use CSS to style the tables.
Tables can be made accessible to mobile devices and users that use screen reading software by keeping the code clean, using attributes such as scope and summary as well as the <caption> element to help announce clearly and semantically what the sections are for. Also important for accessibility is to not use empty table cells for spacing; use CSS instead.

Источник

Знакомство с таблицами

Добавляем строки

Простейшая таблица описывается с помощью трёх тегов:

‘table’ обозначает таблицу.
‘tr’ расшифровывается как «table row», обозначает строку таблицы.
‘td’ расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Теги ‘td’ располагаются внутри тегов ‘tr’, а те, в свою очередь, внутри ‘table’. Почти всё текстовое содержимое таблицы размещается внутри тегов ‘td’.

В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех ‘tr’ должно быть одинаковое количество ‘td’.

Задаём рамки с помощью CSS

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

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

Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину.

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

Улучшаем отображение рамок

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

Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table {
  border-collapse: collapse;
}

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

Горизонтальные и вертикальные рамки

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

Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:

border-top,
border-right,
border-bottom,
border-left.

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

Отступы внутри ячеек

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

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега ‘table’. Но лучше его не использовать, а задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

padding-top,
padding-right,
padding-bottom,
padding-left.

Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:

td {
  padding: 10px;
  padding-left: 20px;
}

Отступы между ячейками

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

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

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

Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.

Отступы между ячейками можно задать:

с помощью атрибута cellspacing тега ‘table’
или c помощью CSS-свойства border-spacing.

Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.

Испытание: простая, но аккуратная таблица

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Простая, но аккуратная таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Посещения по городам</h1>
    <table>

    <tr>
      <td>Город   
      <td>Посещения   
      <td>Страниц     
      <td>Время
    </tr>
    
    <tr>
     <td> СПб     
     <td>199         
     <td>18,02       
     <td>00:13:45  
    </tr>
    
    <tr>
        <td>Москва  
        <td>69          
        <td>1,48        
        <td>00:00:44 
    </tr>
    
    <tr>
        <td>Киев    
        <td>5           
        <td>13,43       
        <td>00:18:07 
    </tr>
    </table>
  </body>
</html>

CSS:

body {
    width: 350px;
    margin: 0;
    padding: 0 10px;

    font-size: 14px;
    font-family: "Arial", sans-serif;
}

table {
    border-collapse: collapse;
}

td {
    border-collapse: collapse;
    border-bottom: 2px solid lightgray;
    padding: 10px;
  }

Ячейки-заголовки

Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег ‘th’, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег ‘th’ аналогичен ‘td’, он так же должен располагаться внутри ‘tr’, для него стилями можно задавать все те же свойства.

По умолчанию текст внутри ‘th’ выделяется жирным и выравнивается по центру ячейки.

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

Тег ‘caption’ должен размещаться внутри тега ‘table’, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:

<table>
  <caption>Текст</caption>
  ...
 </table>

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

По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.

По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.

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

Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов ‘th’ или ‘td’.

Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».

Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега ‘td’ или ‘th’.

Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.

Испытание: таблица посложнее

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Таблица посложнее</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
   <caption> Посещения по городам
    <tr>
      <th>Город
      <th>Посещения
      <th>Страниц
      <th>Время
    <tr>
      <td>СПб        
      <td>199         
      <td>18,02      
      <td>00:13:45
   <tr> 
      <td>Москва
      <td>69          
      <td rowspan = "2">нет данных  
      <td>00:00:44
   <tr> 
      <td>Киев        
      <td>5                       
      <td>00:18:07
   <tr> 
    <td colspan="3">Всего посещений 
    <td>273
    </table>
  </body>
</html>

CSS:

table {
  border-collapse: collapse;
}

th {
  border-bottom: 2px solid black; 
  padding: 10px;
}

td {
  border: 1px solid lightgrey;
  padding: 10px;
}

Выравнивание содержимого в ячейках

Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.

За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.

За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.

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

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

{
  vertical-align: значение;
  text-align: значение;
}

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

Добавим цвета

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

Цветами можно управлять с помощью этих свойств:

background-color — задаёт цвет фона,
color — цвет текста,
border-color — цвет рамок.

Чтобы задать цвета для ячейки в CSS, нужен такой код:

td {
  color: цвет;
  background-color: цвет;
  border: 1px solid цвет;
}

Задаём размеры таблицы

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

С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.

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

Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:

table {
  width: 100px;
  height: 100px;
}

Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.

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

Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.

Важное замечание. Проценты при задании высоты обычно не работают.

Задаём размеры отдельных ячеек и столбцов

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

Есть два варианта добавления стилей ячейкам:

Назначать ячейкам уникальные имена классов, например, class=»cell-11″, и применять стили для этих классов.
Использовать атрибут style, внутри которого можно писать CSS-код.

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

<td style="width: 100px;">
  ...
</td>

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

Испытание: итоговая таблица

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Испытание: итоговая таблица</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Итоговая таблица</h1>
    <table>
    <tr>
      <th style = "text-align:left">Город
      <th  style = "background-color: lightblue" class = "center">Посещений
      <th class = "right">%
    <tr>
      <td>СПб
      <td class = "center">199
      <td class = "right">65.12
    <tr style = "background-color: lightyellow">
      <td>Москва
      <td class = "center">69
      <td class = "right">21.3
    <tr>
      <td>Киев
      <td class = "center">5
      <td class = "right">8
    <tr style = "background-color: lightyellow">
      <td colspan = "2">Посещений за весь период
      <td class = "right">273
    </table>
  </body>
</html>

CSS:

body {
  width: 350px;
  margin: 0;
  padding: 0 10px;

  font-size: 14px;
  font-family: "Arial", sans-serif;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

table {
  border-collapse: collapse;
}

th {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 10px;
  width: 33%;
  background-color: darkcyan;
  color: white;
}

td {
  border-bottom: 1px solid lightgrey;
  padding: 10px;
}

Источник

When you’re building a project that needs to represent data visually, you will need a good way to display the information so it’s easy to read and understand.

Now, depending on the type of data, you can select between different representation methods using HTML elements.

In most cases, tables are more convenient to display large amounts of structured data nicely. That’s why, in this article, we are going to learn how to use tables in HTML and then how to style them.

Here’s an Interactive Scrim about HTML Tables

But, first things first – what is a table in HTML?

What is a Table in HTML?

A table is a representation of data arranged in rows and columns. Really, it’s more like a spreadsheet. In HTML, with the help of tables, you can arrange data like images, text, links and so on into rows and columns of cells.

The use of tables in the web has become more popular recently because of the amazing HTML table tags that make it easier to create and design them.

To create a table in HTML you will need to use tags. The most important one is the <table> tag which is the main container of the table. It shows where the table will begin and where it ends.

Common HTML Table tags

Other tags include:

<tr> — represents rows
<td> — used to create data cells
<th> — used to add table headings
<caption> — used to insert captions
<thead> — adds a separate header to the table
<tbody> — shows the main body of the table
<tfoot> — creates a separate footer for the table

HTML Table Syntax:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Now that you have an understanding of what an HTML table is all about and how you can create it, let’s go ahead and see how we can make use of these tags to create tables with more features.

How to Add a Table Heading in HTML

The <th> is used to add headings to tables. In basic designs the table heading will always take the top row, meaning we will have the <th> declared in our first table row followed by the actual data in the table. By default the text passed in the Heading is centered and Bold.

An example with use of <th>

<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email Address</th>
  </tr>
  <tr>
   <td>Hillary</td>
   <td>Nyakundi</td>
   <td>tables@mail.com</td>
  </tr>
  <tr>
    <td>Lary</td>
    <td>Mak</td>
    <td>developer@mail.com</td>
  </tr>
</table>

First Name	Last Name	Email Address
Hillary	Nyakundi	tables@mail.com
Lary	Mak	developer@mail.com

From the example above, we are able to tell what column contains which information. This is made possible with the use of <th> tag.

How to Add a Caption to a Table

The main use of adding a caption to table is to provide a description about the data represented in the table. The caption can either be placed at the top of the table or the bottom and by default it will always be centered.

To insert a caption into a table, use the <caption> tag.

Caption Syntax

<table>
  <caption></caption>
  <tr> </tr>
</table>

An example with use of <caption>

<table>
  <caption>Free Coding Resources</caption>
  <tr>
    <th>Sites</th>
    <th>Youtube Channels</th>
    <th>Mobile Appss</th>
  </tr>
  <tr>
    <td>Freecode Camp</td>
    <td>Freecode Camp</td>
    <td>Enki</td>
  </tr>
  <tr>
    <td>W3Schools</td>
    <td>Academind</td>
    <td>Programming Hero</td>
  </tr>
  <tr>
    <td>Khan Academy</td>
    <td>The Coding Train</td>
    <td>Solo learn</td>
  </tr>
</table>

Free Coding Resources

Sites	Youtube Channels	Mobile Appss
Freecode Camp	Freecode Camp	Enki
W3Schools	Academind	Programming Hero
Khan Academy	The Coding Train	Solo learn

How to Use the Scope Attribute in HTML Tables

The scope attribute is used to define whether a specific header is intended for either a column, row, or a group of both. I know the definition might be challenging to understand but hold on – with the help of an example you will better understand it.

The main purpose of the scope element is to show the target data so that the user does not have to rely on assumptions. The attribute is declared in the header cell <th>, and it takes the values col, row, colgroup and rowgroup.

The values col and row indicated that the header cell is providing inforamation for either the rows or columns respectively.

Scope Syntax

<table>
 <tr>
   <th scope="value">
 </tr>
</table>

An Example with use of <scope>

<table>
  <tr>
    <th></th>
    <th scope="col">Semester</th>
    <th scope="col">Grade</th>
  </tr>

  <tr>
    <td>1</td>
    <td>Jan - April</td>
    <td>Credit</td>
  </tr>

  <tr>
    <td>2</td>
    <td>May - August</td>
    <td>Pass</td>
  </tr>
    
  <tr>
    <td>2</td>
    <td>September - December</td>
    <td>Distinction</td>
  </tr>
</table>

	Semester	Grade
1	Jan — April	Credit
2	May — August	Pass
2	September — December	Distinction

What the scope attribute has done, is that it shows whether a header cell belongs to either the column, row, or a group of both.

In this case the headers belong to the column because it’s what we set in the code. You can play around by changing the attribute to see the different behaviors.

How to Use Cell Spanning in an HTML Table

Perhaps you have come across cells that stretch across two or more columns or rows in a table. That’s called cell spanning.

If you worked in programs like MS office or Excel you have probably used the function by highlighting the cells and clicking the command, and voilà! You have it.

The same features can be applied in an HTML table by using two cell attributes, colspan for horizontal spanning and rowspan for vertical spanning. The two attributes are assigned numbers greater that zero which shows the number of cells you wish to span.

An Example with use of span

<table>
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td rowspan = "2">Hillary</td>
    <td>Advanced Web</td>
    <td>75</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>60</td>
  </tr>
      <tr>
    <td rowspan = "2">Lary</td>
    <td>Advanced Web</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Operating Syatem</td>
    <td>75</td>
  </tr>
  <tr>
    <td colspan="3">Total Average: 72.5</td>
  </tr>
</table>

Name	Subject	Marks
Hillary	Advanced Web	75
Operating Syatem	60
Lary	Advanced Web	80
Operating Syatem	75
	Total Average: 72.5

In the example above, we have a cell spanning of 2 cells in the rows and 3 cells in the column as indicated. We have managed to apply the span both vertically and horizontally.

When using the attributes colspan and rowspan, make sure to declare the values assigned correclty to avoid overlapping of cells.

How to Add a Table Header, Body, & Footer in HTML Tables

Just like how a website or any other document has three main sections – the header, body, and footer – so does a table.

In a table they are divided by using attributes namely:

<thead> — provides a separate haeder for the table
<tbody> — conatins main content of the table
<tfoot> — creates a separete footer for the table

An Example with use of <thead>, <tbody> & <tfoot>

<table>
  <thead>
    <tr>
      <th colspan="2">October</th>
      <th colspan="2">November</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Sales</td>
      <td>Profit</td>
      <td>Sales</td>
      <td>Profit</td>
    </tr>
    <tr>
      <td>$200,00</td>
      <td>$50,00</td>
      <td>$300,000</td>
      <td>$70,000</td>
    </tr>
  </tbody>
    
  <tfoot>
    <tr>
      <th colspan= "4">November was more produstive</th>
    </tr>
  </tfoot>
</table>

October	November
Sales	Profit	Sales	Profit
$200,00	$50,00	$300,000	$70,000
November was more produstive

In the above example, the header is represented by the name of the months, the part with the figures of both sales and profit represents the table body, and finally the part with the statement represents the footer of our table.

Another important thing to note is that a table can have more than one body part. In a scenario like this each body groups the rows that are related together.

How to Style HTML Tables using CSS

Even though tables are widely used today, it is very rare to find one that has not been styled. Most of them use different forms of styles, whether that’s colors, fonts, highlighting important values and so on.

Styling helps make the tables appear proffesional and appealing to the eyes. Afterall you wouldn’t want your reader to stare at data divided by only a sinle line.

Unlike styling with other languages or tools, in HTML you will need to get an extra file with a .css extension created where you will add your styles and link it to your HTML file.

Below, attached is a code playground with an example of a styled table. Feel free to play around with it to see how different styling will affect the display.

The code playground above, we have created a table and styled it using some of the attributes we covered in the article.

We styled it using a CSS file, where we have added the color and border to our table to make it more readable and beautiful. The table also has a fixed header so you can scroll through the large amount of data and still see the header of a particular column.

So, we have seen what a table is, we’ve created a few of them, and even gone a step ahead and applied styling.

But having the knowledge and not knowing how to apply it won’t be of any help. So that being said, where or when do you need to make use of tables in your design?

When to Use a Table

There are many situations where tables might come in handy when developing your projects:

You can use tables when you want to compare and contrast data with shared characteristics like the differences between A and B or scores of team X to those of Y.
You can also use one if you want to give an overview of numerical data. A good example of this is when you are trying to represent marks of students or even the scores of teams like the EPL table.
And a table can help readers quickly find specific information laid out in a clear way. For example if you are going through a long list of name a table can be used to sub devide the list which make it easy for readers.

Wrap Up

Tables are a great way to represent tabular data, and you can create them using basic HTML elements like <table>,<tr>, <td>.

And you can also add some styling to make them look good and present the data clearly with the help of a CSS file.

Before we wrap up, let’s do one more task:

Create a table using what we learned to summarize what we have covered in the article today. After that compare your design with my pinned code playground below:

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Источник