Как сделать таблицу в word: пошаговая инструкция для создания и редактирования простых и сложных массивов данных

Колонтитулы и подпись в 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

Создание таблицы в html онлайн конструктор

1. Создайте таблицу в любой из программ — Microsoft Excel, OpenOffice или Microsoft Word. Заполните все её ячейки текстом.
2. Выделите ваш результат и кликните правой кнопкой мыши и выберите пункт “Копировать”.
3. Перейдите в генератор таблиц html онлайн – Tableizer
4. В генераторе в пустое поле вставьте содержимое буфера обмена (клик правой кнопкой мыши и выбор пункта “Вставить”)
5. Выберите Размер шрифта Font size, цвет шапки (верхних ячеек, первой строки) — параметр  Header color, шрифт текста Font.
6. Нажмите кнопку Tableizer it!
7. Копируйте код из окошка и вставляйте в текстовый редактор своего блога в режиме html.

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

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> можно прописывать различные атрибуты.

1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

• left — выравнивание по левому краю
• center — выравнивание по центру
• right — выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align=»center».

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

Например

2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Пример

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

Пример таблицы
Столбец 1	Столбец 2

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif

Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″, что означает толщина рамки — 1 пиксель.

5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″, то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

• void — не отрисовывать границы
• border — граница вокруг таблицы
• above — граница по верхнему краю таблицы
• below — граница снизу таблицы
• hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
• vsides — рисовать только вертикальные границы (слева и справа от таблицы)
• rhs — граница только на правой стороне таблицы
• lhs — граница только на левой стороне таблицы

10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

• all — линия рисуется вокруг каждой ячейки таблицы
• groups — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>
• cols — линия отображается между колонками
• none — все границы скрываются
• rows — граница рисуется между строками таблицы, созданными через тег <tr>

12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

Теперь настало время погрузиться внутрь таблицы и рассмотреть атрибуты ячеек таблицы. Эти атрибуты надо писать в открывающем теге <td>.

Как сделать таблицу в Word — подробная инструкция

Нередко при работе над документом в Ворде возникает необходимость представления информации в табличной форме. Обычно речь идет о числовых данных или сравнении нескольких объектов по параметрам. Таблица помогает упростить и структурировать любую объемную информацию. Выясним, как сделать таблицу в Word различными способами.

Подробная инструкция по созданию таблицы

Чтобы создать таблицу в Ворде, нужно выполнить следующие действия:

1. Кликнуть мышью в нужном месте.
2. Перейти во «Вставка» в верхней панели инструментов.

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

Если пользователь хочет вставить таблицу размером 5х6, то это выглядит следующим образом:

Описанный способ считается самым быстрым. Однако у него имеется ограничение на число ячеек: не более 10 столбцов и 8 строк.

При необходимости создания таблицы большего размера во «Вставке» снова выбирается «Таблица». Затем нужно кликнуть на «Вставить таблицу». В диалоговом окошке вводится число строк и количество столбцов.

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

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

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

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

Редактирование созданной таблицы

Ворд позволяет отредактировать и украсить табличку после создания. Для этого требуется выделить ее и перейти в верхней панели инструментов на вкладку «Конструктор» или «Макет». Рассмотрим их подробнее.

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

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

Экспресс-таблицы (готовые варианты)

В целях экономии времени можно воспользоваться готовыми вариантами. Для этого нужно перейти: «Вкладка» — «Таблица» — «Экспресс-таблицы». Далее следует выбрать из списка понравившеюся модель. Разумеется, все данные, представленные в ней, могут быть заменены своими.

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

1. Выделить необходимую таблицу.
2. Последовательно перейти: «Вставка» — «Таблица» — «Экспресс-таблицы» — «Сохранить выделенный фрагмент».
3. Заполнить поля диалогового окна. Туда вводится уникальное имя и описание. Другие параметры можно оставить такими, какие есть.

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

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

Оформление текста

Название самой таблицы набирается шрифтом, как и текст. Интервал между строк можно уменьшить. Заглавия графиков начинаются с большой буквы, а для подзаголовков используется формула для второго уровня. Все заголовки нужно писать горизонтально. По образцу ГОСТа, допускается вертикальный набор.

Чтобы сделать выравнивание слов в столбцах, используется значок «по центру». Правильное размещение цифр в графах: по вертикали располагаются равнозначные разряды. В ячейке осуществляется перенос величин с равным количеством знаков после запятой. Для минимизации объёма в строках и заголовках, наименования рисунков, применяются сокращения, установленные ГОСТом 2.321.

Если в столбце пишется одно слово, его можно заменить знаком кавычек. Позиция, которая состоит из словосочетаний или предложений, заменяется выражением «то же», а дальше — заместительными символами.

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

Другие советы, как правильно оформлять таблицу по ГОСТу:

1. Начало — нумерационный заголовок, состоящий из слова «Таблица» и порядкового номера. Он используется для упрощения ссылки на данные.
2. По тематическому заголовку определяется содержимое ячеек. Для компактности документа объединяются тематический и нумерационный заголовки.
3. Если по высоте графы не помещаются на странице, выполняется соответствующая отметка на следующей. Таким способом читатель сможет быстро сориентироваться в документе.
4. По всем страницам соблюдается единообразие. При необходимости на других страницах повторяется головка полностью с заголовками либо номерами граф.
5. Чтобы уменьшить расстояние в ячейках, выбирается меньший шрифт. Если строки по ширине не помещаются на странице, рекомендуется написать продолжение таблицы на следующей странице. Для этого понадобится перенести определённую её часть: левая будет находиться отдельно от правой. При необходимости таблица делится на больше частей. Для ориентира подходят заголовки, нумерация, линии в качестве внешней границы.

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

У нас обычная таблица, которая имеет одну заглавную строку «<th>» и две обычные строки «<td>«, два столбца — в HTML такая таблица имеет следующий код:

<table>
<tr>
  <th colspan="2">Заголовок таблицы</th>
</tr>
  <tr>
    <td>Содержание ячейки 1</td>
    <td>Содержание ячейки 2</td>
  </tr>
   <tr>
    <td>Содержание ячейки 3</td>
    <td>Содержание ячейки 4</td>
  </tr>
</table>

Все границы таблицы оформляются посредством тэга «border«, поэтому в CSS прописываем следующее:

table, th, td {
border 1px solid grey;
}

Где:

• table — задаёт параметры к всей таблице
• tr — обозначает ряд ячеек
• th — обозначает свойства заглавной ячейки таблицы, текст в которой по умолчанию выровнен по центру и имеет жирный шрифт.
• td — обозначает другие ячейки таблицы, текст в которых по умолчанию выровнен по левому краю и имеет обычный шрифт.
• border — тэг для оформления границ.
• 1px — задаёт параметры толщины линии в пикселях.
• solid — задаёт параметры типа линий.
• grey — параметр цвета, в данном случае серый. Можно задавать любые цвета.

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

table {
border-collapse collapse;
}

table, th, td {
border 1px solid grey;
}

Сделайте параметры отображения страницы настраиваемыми

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

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

Пример сортировки столбца (таблица из UI Prep)

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

Столбец с изменяемым размером (таблица из UI Prep)

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

Пример плотности отображения (таблица из UI Prep)

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

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

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

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

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

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

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

Выравнивание текста в ячейках

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент <th>, он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).

Пример 8. Выравнивание содержимого ячеек по горизонтали

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
table {
border-collapse: collapse; /* Убираем двойные линии */
width: 100%; /* Ширина таблицы */
}
th {
background: #dfebb7; /* Цвет фона ячейки */
text-align: left; /* Выравнивание по левому краю */
}
td {
text-align: center; /* Выравнивание по центру */
}
th, td {
border: 1px solid black; /* Параметры рамки */
padding: 4px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>
</body>
</html>

В данном примере содержимое <th> выравнивается по левому краю, а содержимое <td> — по центру. Результат примера показан ниже (рис. 6).

Рис. 6. Выравнивание текста в ячейках

Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top, как показано в примере 9.

Пример 9. Выравнивание содержимого ячеек по вертикали

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Таблица</title>
<style>
th {
background: #496791; /* Цвет фона ячеек заголовка */
color: #fff; /* Цвет текста */
}
td {
background: #f5e8d0; /* Цвет фона ячеек */
text-align: center; /* Выравниваем по центру */
}
td, th {
padding: 5px 10px; /* Поля в ячейках */
vertical-align: top; /* Выравниваем по верхнему краю */
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan=»2″>Вид соединения</th>
<th colspan=»2″>Поля допусков ширины шпоночного паза</th>
</tr>
<tr>
<th>Вал</th><th>Втулка</th>
</tr>
<tr>
<td>Свободное</td><td>H9</td><td>D10</td>
</tr>
<tr>
<td>Нормальное</td><td>N9</td><td>I_s9</td>
</tr>
<tr>
<td>Плотное</td><td colspan=»2″>P9</td>
</tr>
</table>
</body>
</html>

В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.

Рис. 7. Выравнивание текста в ячейках

таблицы

CSS для таблиц

Чтобы оформить таблицу, необходимо задать для тега <table>, как минимум, свойство border:

Table CSS

table { border: 2px solid #124480; }

1	table{border2pxsolid#124480; }

Вид рамки вы можете выбрать по собственному усмотрению, равно как и ее цвет.

Для тегов <td>, как правило, нужно задавать внутренние отступы и рамки:

td,
th { border: 1px solid #185eb2;
padding: 10px; }

1 2 3

td, th{border1pxsolid#185eb2; padding10px;}

Да, и если у вас есть теги <th>, про них тоже не стоит забывать.

Что получилось:
В примере видно, что между всеми ячейками и границами таблицы и ячейками есть пустое пространство. Раньше оно определялось атрибутом для тега <table>. Но сейчас он считается устаревшим и заменяется css-свойством border-spacing:

Свойство border-spacing

table {
border: 2px solid #124480;
border-spacing: 10px;
}

1 2 3 4

table{ border2pxsolid#124480; border-spacing10px; }

Прямо скажем, используют его нечасто, т.к. вид таблицы с border-spacing: 10px будет таким:

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

Свойство border-collapse

table {
border: 2px solid #124480;
border-collapse: collapse;
}

1 2 3 4

table{ border2pxsolid#124480; border-collapsecollapse; }

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

Разделители для строк

tr { border: 1px solid #3f7ec9; }

1	tr{border1pxsolid#3f7ec9;    }

Если необходимо «раскрасить» строки через одну, необходимо использовать следующие селекторы и свойства:

/* Для четных строк */
tr:nth-child(even){ background-color: #cde; }
/* Для нечетных строк */
tr:nth-child(odd){ background-color: #d3f5f4; }

1 2 3 4

/* Для четных строк */ trnth-child(even){background-color#cde;  } /* Для нечетных строк */ trnth-child(odd){background-color#d3f5f4;  }

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

table { display: inline-table }

1	table{displayinline-table}

В этом случае таблицы ведут себя аналогично элементам с .

Естественно, вы можете вместо  использовать свойство :

tr:nth-child(even) {
background-image: url(img/diagonal-noise.png);
}
tr:nth-child(odd) {
background-image: url(img/tetr.gif);
}

1 2 3 4 5 6

trnth-child(even){ background-imageurl(imgdiagonal-noise.png); } trnth-child(odd){ background-imageurl(imgtetr.gif); }

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

table {
border: 2px solid #124480;
border-collapse: collapse;
<strong>width: 500px;</strong>
}
td:first-child{
text-align: right;
}
td:last-child{
width: 30%;
text-align: right;
}
td:last-child:after{
content: ‘ грн.’;
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

table{ border2pxsolid#124480; border-collapsecollapse; <strong>width500px;<strong> } tdfirst-child{ text-alignright; } tdlast-child{ width30%; text-alignright; } tdlast-childafter{ content’ грн.’; }

Так, с помощью правил выше мы задали width для , а также выравнивание текста по правому краю для первой и последней колонки. А с помощью псевдоэлемента для последней колонки добавили еще единицу для цены — ‘грн’. В результате получилась такая таблица:

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

Просмотров:
552

Красивые таблицы CSS

	Платье с цветочным принтом	2500	1	2500
	Платье с боковыми вставками	3000	1	3000

Microsoft	20.3	30.5	23.5	40.3
50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Microsoft	20.3	30.5	23.5	40.3
50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Microsoft	20.3	30.5	23.5	40.3
50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Monday	Tuesday	Wednesday	Thursday	Friday
2	3	4	5	6
9	10	11	12	13
16	17	18	19	20
23	24	25	26	27
30	31

Stephen C. Cox	$300	$50	Bob
Josephin Tan	$150	—	Annie
Joyce Ming	$200	$35	Andy
James A. Pentel	$175	$25	Annie

Microsoft	20.3	30.5	23.5	40.3
50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Scary Movie	Indiana Jones	The Punisher	Wall-E
Epic Movie	Star Wars	Bad Boys	Madagascar
Spartan	LOTR	Die Hard	Finding Nemo
Dr. Dolittle	The Mummy	300	A Bug’s Life

Microsoft	20.3	30.5	23.5	40.3
50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Microsoft	20.3	30.5	23.5	40.3
50.2	40.63	45.23	39.3
Apple	25.4	30.2	33.3	36.7
IBM	20.4	15.6	22.3	29.3

Tables

• Chris Smith
• October 17, 2019

HTML / CSS (SCSS)

About a code

Zigzag Table

A table formatted in a zigzag diagonal layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

• Takane Ichinose
• July 29, 2020

HTML (Pug) / CSS (SCSS)

About a code

Table with Pagination

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

• Estelle Weyl
• June 11, 2018

HTML / CSS

About a code

Table with Frozen Table Header and Left Column

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

• Nathan Cockerill
• February 1, 2018

• HTML
• CSS/SCSS
• JavaScript (jquery.js)

About the code

Sort Table Rows By Table Headers

Sort table rows by table headers — ascending and descending.

• Faiz Ahme
• January 11, 2018

• HTML
• CSS/SCSS

About the code

• Flor Antara
• June 15, 2017

HTML / CSS

About the code

Responsive Table HTML and CSS Only

HTML table made responsive only with CSS. On mobile the header row is fixed to the left, and the content is scrollable horizontally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Demo Image: Responsive Table With Flexbox

Responsive Table With Flexbox

The idea was to create a nice working table which is working on smaller screens also.
Made by Matys
April 6, 2017

download
demo and code

Demo Image: CSS Responsive Table Layout

CSS Responsive Table Layout

Using CSS for responsive table layouts instead of floats. Responsive (everything goes down to one row each), too.
Made by Luke Peters
February 21, 2017

download
demo and code

Demo Image: Fixed Table Header

Fixed Table Header

Fixed table header with simple jQuery code.
Made by Nikhil Krishnan
November 3, 2016

download
demo and code

Demo Image: Responsive Table

Responsive Table

CSS tricks method responsive table.
Made by Alico
April 11, 2016

download
demo and code

Demo Image: Pure CSS Table Highlight

Pure CSS Table Highlight

A simple (and nasty) trick to have vertical and horizontal highlight on hover on tables made with pure CSS.
Made by Alexander Erlandsson
March 22, 2016

download
demo and code

• Wolf Wortmann
• April 30, 2015

HTML / CSS

About the code

Sticky Table Headers by

Trying out to make a sweet table with sticky table headers if their table is in the viewport (like the iOS names list names beginning capital letter).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

Demo Image: Responsive Table

Responsive Table

Responsive table with rwd-table-patterns.
Made by SitePoint
April 15, 2015

download
demo and code

Demo Image: CSS Responsive Table & Detail View

CSS Responsive Table & Detail View

An example table and detail view scenario.
Made by Heather Buchel
June 29, 2014

download
demo and code

• Andrew Lohman
• May 30, 2014

HTML / CSS (SCSS)

About a code

CSS Table

Using CSS to fade-in a row, fade-out a row and show data in the table updating on a live basis. Also hovering over a row expands to show more information.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: —

Demo Image: Responsive Table

Responsive Table

Table collapses into a «list» on small screens. Headers are pulled from data attributes.
Made by Geoff Yuen
March 25, 2014

download
demo and code

About the code

Responsive And Accessible Data Table

Mobile-first responsive and accessible data table. At narrower view ports, the thead is hidden, rows are turned into cards with labels shown using a attribute.

Demo Image: Table In HTML & CSS

download
demo and code

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

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

Таблица с шапкой

<table>
<tr>
<th>№ п/п</th>
<th>Название</th>
<th>Цена</th>
</tr>
<tr>
<td>1</td>
<td>Товар 1</td>
<td>400</td>
</tr>
<tr>
<td>2</td>
<td>Товар 2</td>
<td>400</td>
</tr>
<tr>
<td>3</td>
<td>Товар 3</td>
<td>400</td>
</tr>
<tr>
<td>4</td>
<td>Товар 4</td>
<td>400</td>
</tr>
<tr>
<td>5</td>
<td>Товар 5</td>
<td>400</td>
</tr>
</table>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<table> <tr> <th>№пп<th> <th>Название<th> <th>Цена<th> <tr> <tr> <td>1<td> <td>Товар1<td> <td>400<td> <tr> <tr> <td>2<td> <td>Товар2<td> <td>400<td> <tr> <tr> <td>3<td> <td>Товар3<td> <td>400<td> <tr> <tr> <td>4<td> <td>Товар4<td> <td>400<td> <tr> <tr> <td>5<td> <td>Товар5<td> <td>400<td> <tr> <table>

Визуально:

Правильно выравнивайте столбцы

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

Правила, которым необходимо следовать:

1. Выравнивайте текстовые данные по левому краю (например, имя)
2. Выравнивайте числовые данные, не связанные с размером (например, дату, почтовый индекс, номер телефона)
3. Выравнивайте числовые данные, относящиеся к размеру (например, количество, процент)
4. Выравнивайте заголовки в соответствии с данными столбца

Пример выравнивания (таблица из  UI Prep)

Пример 2: Ширина в процентах

Теперь давайте посмотрим на тот же пример с шириной столбцов 20% и 50% соответственно.

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

Браузер как бы говорит “20% это 2/7 части из общего выражения 20+50%”, поэтому при ширине таблицы в 1000px первая колонка будет иметь ширину 284px, а вторая — 714px. Грубое соотношение 2:5. (Соотношение не может быть точно 2 к 5 из-за свойств cell-spacing, cell-padding, border, border-spacing, border-collapse, округления и других ограничений.)

Обратите внимание на то, что white-space: nowrap применяется к каждой ячейке. В таблице с auto это свойство компенсируется, но в случае с fixed текст выходит за границы

Задачка на подумать: почему первая колонка чуть шире в случае с fixed?

Лучшие конструкторы таблиц HTML

1. apsolyamov.ru — простой инструмент для создания таблиц. Есть опция объединения ячеек, но невозможно задать цвет.
2. c-wd.ru — русскоязычный сайт, где можно создавать сложные таблицы с объединенными ячейками, задавать стили в «конструкторе стилей» — цвета границ и ячеек, отступы, толщину границ, цвет строки при наведении, размер и цвет текста. Дополнительно можно настроить выравнивание, адаптивность для мобильных устройств, изменить курсор.

   Заголовок	Заголовок	Заголовок	Заголовок
   cell1_1	cell2_1	cell3_1	cell4_1
   cell1_2	cell2_2	cell3_2	cell4_2
   cell1_3	cell2_3	cell3_3
   cell1_4	cell2_4	cell3_4	cell4_4

3. divtable.com — удобный в использовании, множество настроек, возможность выбрать тип таблицы — div или table. В разделе сайта «Создание стилизованной таблицы) вы можете выбрать шаблон, изменить цвета, задать нумерацию в футере:

Используйте заливку по-минимуму

Эдвард Тафти, всемирно признанный мастер визуального отображения информации, говоря о дизайне таблиц в книге «Визуальное отображение количественной информации» отмечает, что нужно удалить почти все, что не является данными или белым пространством (white space). Минимизирование элементов дизайна и упор на представляемую информацию — первый принцип типографического дизайна таблиц.

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

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

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

То же относится к границам и линиям между строками и столбцами таблицы. Используйте их редко, а лучше никогда. Ян Чихольд отмечает: 

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

Ян Чихольд, «Ассиметричная типографика», 1967. 

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

Изменение таблиц

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

Но, чаще придется делать действия над одной строкой, или столбцом.

Как выделить столбец? Подводите курсор мыши над таблицей, поближе к верхнему краю таблицы. Как только курсор превратится в маленькую черную стрелку (рис. 7), нажимаете на кнопку мыши и весь столбец под этой стрелкой выделится (станет черным). Если вы, не отпуская левой кнопки мыши, передвинете черную стрелку вправо, или влево — будут выделяться другие столбцы, стоящие рядом. Отпустите кнопку — столбцы останутся выделенными.

Рис. 7

Теперь вы можете делать над текстом, находящимся в выделенной колонке, все действия, которые мы рассмотрели на уроке Форматирование текста в Word — можете изменить выравнивание текста в столбце (по центру, вправо, влево), можете изменить цвет, размер шрифта и т. д.

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

Рис. 8

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

Это тоже не сложно. Подводите курсор мыши слева от таблицы. Как только он превратится в стрелку, направленную вправо, на таблицу, нажимаете левую кнопку мыши, Тут же выделится строка, на которую указывает стрелка (см. рис. 8).

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

Кроме действий над текстом, находящимся в таблице, вы можете совершать действия над самими строками: удалять строки, добавлять строки, объединять выделенные ячейки и так далее. Все это можно делать через меню Работа с таблицами — Макет (см. рис 8).

Рис. 8

Заходите на вкладку Макет и выбираете нужное действие. Только предварительно не забудьте выделить строки, или столбцы, над которыми будете «издеваться».

Хотя, можно сделать проще. Выделяете строку, а потом нажимаете правую кнопку мыши. Появится контекстное меню со всеми действиями, которые вы можете сделать над строкой (см. рис 9)

Рис. 9

Обращаю внимание на то, что содержание контекстного меню разное, в зависимости от того, что вы выделили — строку, столбец, или всю таблицу. Выбираете из контекстного меню нужное действие и смотрите результат

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

Рис. 10

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

Перейти на страницу:

1. Уроки по текстовому редактору Microsoft Word. Набор текста.
2. Форматирование текста в текстовом редакторе Microsoft Word.
3. Сохранение документа в Microsoft Word