Как создавать html таблицы — примеры и видео

Обратная совместимость с помощью jQuery

Наверняка вы знаете, что в IE6  работает только для элементов ссылок.

Поэтому вместо CSS кода:

.bordered tr:hover
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

нужно использовать обходное решение на jQuery для организации эффекта наведения курсора:

$('.bordered tr').mouseover(function(){
    $(this).addClass('highlight');
}).mouseout(function(){
    $(this).removeClass('highlight');
});

Также нужно определить класс CSS , который используется в JavaScript коде:

.highlight
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

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

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

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

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

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

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

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

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

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

<!DOCTYPE html>
<html>
<head>
<title>Пример использования элемента <table></title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!-- наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th>Ячейка заголовка 1</th>
			<th>Ячейка заголовка 2</th> 
			<th>Ячейка заголовка 3</th>
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!-- описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!-- конец таблицы-->
</body>
</html>

К данной таблице для наглядности мы добавили атрибут border (граница) со значением «1», которое определяет, что граница должна отображаться вокруг ячеек таблицы. Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.

Результат нашего примера:


Пример таблицы, составленной на HTML.

Объединение столбцов

Объединение столбцов в элементах <td> или <th> допускается производить с помощью атрибута colspan (при этом ячейка растягивается вправо на заданное количество ячеек).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения столбцов в таблицах</title>
</head>
<body>
	<table border = "1"> <!--начало содержимого таблицы-->
		<caption>Элементарная таблица</caption>  <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th> <!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th> 
		</tr> 
		<tr> <!--описываем вторую строку-->
			<td>Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 3 Строка 2</td>
		</tr>
		<tr> <!--описываем третью строку-->
			<td>Ячейка данных 1 Строка 3</td>
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>

Результат нашего примера:


Пример таблицы с объединёнными столбцами на HTML.

Объединение строк

Объединение строк в элементах <td> или <th> допускается с помощью атрибута rowspan (диапазон ячеек задается сверху вниз и охватывает несколько строк – ячейка растягивается вниз).

<!DOCTYPE html>
<html>
<head>
<title>Пример объединения строк в таблицах</title>
</head>
<body>
	<table border = "1"> <!-- начало содержимого таблицы-->
		<caption>Элементарная таблица</caption> <!--наименование таблицы-->
		<tr> <!--описываем первую строку-->
			<th colspan = "2">Ячейка заголовка 1</th><!--растягиваем на 2 ячейки-->
			<th>Ячейка заголовка 2</th>
		</tr>
		<tr><!--описываем вторую строку-->
			<td rowspan = "2">Ячейка данных 1 Строка 2</td>
			<td>Ячейка данных 2 Строка 2</td>
			<td>Ячейка данных 2 Строка 3</td>
		</tr>
		<tr> <!--описываем третью строку (первая ячейка занята предыдущей строкой) -->
			<td>Ячейка данных 2 Строка 3</td>
			<td>Ячейка данных 3 Строка 3</td>
		</tr>
	</table> <!--конец таблицы-->
</body>
</html>

Результат нашего примера:


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

Чуть-чуть истории

Для молодых верстальщиков и фронтендеров инлайн-блоки — что-то очень древнее. Но ни в CSS1, ни в CSS2 никакого не было. Появился он только в CSS2.1, а стандартом CSS2.1 стал лишь в 2011-м, в эпоху «CSS3». В Firefox до 3-й версии (а версии тогда «жили» не по полтора месяца, а годами) приходилось эмулировать через , который был не чем иным, как… мозилловской реализацией старой версии флексбоксов (да-да, инлайн-блоки эмулировали флексбоксами, вот так ирония!). Как ни странно, IE это значение поддерживал (в нем оно впервые и появилось!), но… только для элементов с дефолтным (впрочем, это ограничение обходилось простым хаком). В общем, веселое было время:)

В начале 2010-х инлайн-блоки пережили всплеск популярности как основа для сеток. Они давали намного больше простора для разных вариантов выравнивания, чем надоевшие флоаты, и при этом не нуждались ни в каких «клиарфиксах». И по сей день они — один из самых популярных фолбэков для нормальных систем раскладки (флексбоксов и гридов).

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

Property Values

Value Description Play it
auto Browsers use an automatic table layout algorithm. The column width is set by the widest unbreakable content in the cells.
The content will dictate the layout 
Play it »
fixed Sets a fixed table layout algorithm. The table and column widths are set
by the widths of table and col or by the width of the first row of cells.
Cells in other rows do not affect column widths. If no widths are present
on the first row, the column widths are divided equally across the table,
regardless of content inside the cells
Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

Выравнивайте по запятой в десятичной дроби

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

В HTML 4 выравнивание по запятой в десятичной дроби было теоретически возможно с помощью тега td и его атрибута char, однако на практике это свойство не поддерживалось. В HTML 5 для этих целей используется text-align, хотя на момент написания статьи поддержка этого свойства для выравнивания чисел в таблице не идеальна. (CSS Text Level 4 Module2)

Синтаксис text-align следующий: в кавычки заключается символ, по которому происходит выравнивание (обычно точка или запятая), затем через пробел вводится ключевое слово, обозначающее тип выравнивания (по умолчанию это right). В примере ниже данные центрированы и выровнены по точке в десятичной дроби:

td { text-align: «.» center; }

В данном примере данные выровнены по символам «×» и «:»: 

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

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

1
2
3
4
5
<table>
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:
Добавим границу для таблицы — атрибут :

1
2
3
4
5
<table border="1">
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:

Создания таблицы начинается с тега (от англ. «таблица»). Тег служит для создания строки. В строке располагаются ячейки — тег . Завершается таблица закрывающим тегом


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

Атрибуты тега TABLE

— таблица влево; – табл. по центру; — табл. вправо.
ширина
цвета рамки
ширина грани рамки
внутреннее расстояние до рамки
(фон таблицы)

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

Атрибуты тега TD или TH — ячейки

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

Важно:

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

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

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

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table  border="1">
<caption>таблица<caption>
<thead>
	<tr>
	<th>Заголовок 1<th><th>3аголовок 2<th>
	<tr>
<thead>
<tbody>
	<tr>
	<td>содержимое<td><td>содержимое<td>
	<tr>
<tbody>
<tfoot>
...
<tfoot>
<table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

Таблица с областями группировки
Столбец 1 Столбец 2 Столбец 3 Столбец 4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4

Алгоритм шаблона таблицы

Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов. Алгоритм выбирается с помощью свойства table-layout и двух значений:

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

Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.

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

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

Свойство vertical-align определяет выравнивание содержания в строке

  • baseline
  • top
  • bottom
  • middle
  • sub, super, text-top, text-bottom, <длина>, <процент>

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

Создание простой HTML таблички

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

<table></table>

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

Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.

Создание строк и ячеек

Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:

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

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

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

А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!

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

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

Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

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

Название таблицы — тег caption

Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:

<table>
  <caption>Пример таблицы с названием</caption>
  <tr>
    <td>Строка1 Ячейка1</td>
    <td>Строка1 Ячейка2</td>
    <td>Строка1 Ячейка3</td>
    <td>Строка1 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

А вот, что у нас получится в итоге:

Пример таблицы с названием
Строка1 Ячейка1 Строка1 Ячейка2 Строка1 Ячейка3 Строка1 Ячейка4
Строка2 Ячейка1 Строка2 Ячейка2 Строка2 Ячейка3 Строка2 Ячейка4
Строка3 Ячейка1 Строка3 Ячейка2 Строка3 Ячейка3 Строка3 Ячейка4
Строка4 Ячейка1 Строка4 Ячейка2 Строка4 Ячейка3 Строка4 Ячейка4

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

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

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим  выравнивание по центру, по середине.

 <TR ALIGN="CENTER" VALIGN=”MIDDLE”> 
 

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

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33” HEIGHT="50" VALIGN="MIDDLE" ALIGN="CENTER">
<TD WIDTH="50">№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD ALIGN="CENTER">8-952-987-13-20</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD ALIGN="CENTER">8-918-964-70-11</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD ALIGN="CENTER">8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML> 
 

В браузере увидим:

Не растягивайте таблицы

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

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

Definition and Usage

The property sets the style of an element’s four borders. This property can have from one to four values.

Examples:

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style: dotted;

    all four borders are dotted

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderStyle=»dotted double»
Try it

Эффект зебры

Для создания эффекта зебры используется CSS3 для выделения четных строк в элементе :

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Но выше приведенный селектор CSS3 не поддерживается в старых браузерах. А вот как можно выбрать и поменять стиль для нужных строк во всех всех браузерах:

$(".zebra tr:even").addClass('alternate');

Одна строчка кода jQuery. Потребуется также класс для замены:

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

Вложенные таблицы

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

Разметка простой вложенной таблицы:

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

title1 title2 title3
cell1 cell2 cell3
cell2 cell3
cell4 cell5 cell6

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Gradients
Linear Gradients
Radial Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS object-fitCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Не переусердствуйте с дизайном

Французский писатель-авиатор Антуан де Сент-Экзюпери написал3, что «совершенство достигается не тогда, когда уже нечего прибавить, но когда уже ничего нельзя отнять».

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


Посмотреть изображения в полном размере: , , .

Значение и применение

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

Основное содержимое таблицы заключается в тег <table>..</table>.

Каждая строка таблицы помещается в элемент <tr>…</tr>.

Ячейка заголовка таблицы помещается в элемент <th>…</th> (при этом содержимое отображается жирным начертанием и выравнивается по центру).

Каждая ячейка данных таблицы помещается в элемент <td>…</td>.

Наименование таблицы, если оно требуется размещается внутри элемента

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

Подписи к таблице

Мы будем подробнее говорить о типографических особенностях подписей к таблицам в главе «Как подобрать шрифт для функционального текста», но и в этой главе имеет смысл сказать пару слов об оформлении подписей. Если вы заключаете таблицу в тег figure, что вполне обоснованно, используйте тег figcaption до или после неё. Если элемент figure не используется, то для подписей подойдет caption, который ставится сразу после открывающегося тега table и до каких-либо табличных данных, например:

<table>
    <caption>
    Imperial to metric conversion factors
    <p><i>Values are given to three significant figures</i></p>
    </caption>
    <thead> … </thead>
    <tbody> … </tbody>
</table>

Вы можете разместить подпись над таблицей или после неё, используя свойство caption-side и соответствующее значение top или bottom.

caption { caption-side: bottom; }

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

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

Поэтому числовые данные выровнены по правому краю.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий