43 css tables

Знакомство с семантической вёрсткой

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

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

Почему семантика так важна

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

Почему семантика так важна

Она повышает доступность контента. Тогда его лучше понимают:

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

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

Так, можно использовать для всех них тег <div>, но он не обладает семантикой, никак не обозначает смысл своего содержимого. Поэтому мы применяем для заголовков теги H1… H6, для таблицы — <table>, <caption>, <thead>, <tbody>, <tfoot>, <th>. И так далее.

Для оформления страниц при семантической вёрстке применяют каскадные таблицы стилей (CSS).

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

Следите за числами

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

Минускульные и маюскульные

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

Разница между пропорциональными и табличными цифрами не столь очевидна:

Пропорциональные и табличные цифры

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

Техническое замечание о табличных маюскульных цифрах

На этапе дизайна стоит убедиться, что используемые цифры вам подходят (табличное и маюскульное выравнивание обычно выключено по умолчанию). Продукты Adobe включают панель «opentype», при помощи которой цифрам задаётся правильная настройка. Чтобы включить соответствующее свойство в CSS, нужно разобраться в слегка запутанном синтаксисе. Как бы то ни было, несколько запросов к гуглу наставят вас на путь истинный.

Теперь плохие новости: табличные маюскульные цифры доступны не для всех шрифтовых гарнитур. Гарнитуры, которые их включают, обычно дороги. Есть несколько исключений: например, прекрасный Work Sans — бесплатный шрифт с табличными маюскульными цифрами.

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

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

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

Табличные данные

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

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

  • Большие таблицы должны быть раскрашены в полоску или при наведении на строку (:hover) у нее должен появляться цветной фон. Это нужно чтобы видеть все ячейки в одной строке.
  • Столбцы с числовыми данными должны иметь выравнивание по правому краю так, чтобы цифры находились друг под другом.
  • Текст в крайнем правом столбце должен иметь правую выключку, чтобы избежать рваного края (вполне подойдет text-align: justify).
  • Если это возможно, высота строк должна быть одинаковой, чтобы облегчить вертикальный просмотр. (Этот общий принцип известен как “вертикальный ритм” и он очень важен.)

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

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

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

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

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

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

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

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

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

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

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

Как видно в предыдущей таблице, при наведении курсора на определенную ячейку, меняется ее фон и цвет текста. Это можно провернуть несколькими способами. В данном случае добавлен псевдокласс hower, который назначен классам отвечающим за ячейки:

.tab8td:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}

.nizleft:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}

.nizright:hover {
background: #f3bd48; /* Цвет фона при наведении */
color: #fff; /* Цвет текста при наведении */}

Также для этих целей можно использовать два события: onMouseOver — отвечает за изменение содержимого, при наведении на него курсором мышки и onMouseOut — отвечает за вид содержимого, если курсор мышки не наведен на него. Которые задаются без CSS, напрямую в HTML-код. Например: 

<td bgcolor=’pink’ onmouseover=»this.style.backgroundColor=’#CC6633′;»onmouseout=»this.style.backgroundColor=’pink’ «>

Наведите пожалуйста курсор мышки на данную ячейку

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

Далее рассмотрим блоки, блочные элементы и их свойства: Блоки в CSS

Основы создания таблиц в HTML

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

Для объединения ячеек по вертикали и горизонтали предназначены следующие атрибуты:

  • — объединяет ячеек по вертикали;
  • — объединяет ячеек по горизонтали.

Применять данные атрибуты можно для элементов и .

Например:

<table>
  <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
      <th>Заголовок 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">Содержимое ячейки</td>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td>Содержимое ячейки</td>
    </tr>
    <tr>
      <td>Содержимое ячейки</td>
      <td rowspan="2">Содержимое ячейки</td>
    </tr>
    <tr>
      <td colspan="2">Содержимое ячейки</td>
    </tr>
  </tbody>
</table>

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

<table>
  <caption>
    Название таблицы
  </caption>
  ...
</table>

Фон таблицы и отступы от границ

Фон можно задать как таблице в целом, так и каждой ее строке или ячейке. Задается фон с помощью свойства background-color, значением которого будет ваш цвет фона. Не всегда красиво, когда содержимое ячеек находится вплотную к их границам, для этого существует свойство, которое отвечает за отступы от границ ячеек таблицы — padding, которое, как правило, задается в пикселах.

td, th {
padding:5px; /* Внутренний отступ */
background-color:#478CFB; /* Фон */}

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

CSS HTML-код

/* table */ .tab7 {
width: 60%;
border-collapse: collapse;}
/* td */  .
tab7td{
border: 1px solid #98bf21;
padding: 3px 7px 2px 7px;}
/* th */ .
tab7th {
text-align: left;
padding: 5px;
background-color: #A7C942;
color: #fff; border: 1px solid #98bf21;}
/* alernative tr*/ .
tabalt { background-color: #EAF2D3; }

<table class=»tab7» align=»center»>

<tr><th class=»tab7th«>Фильм</th><th class=»tab7th«>Жанр</th><tr><td class=»tab7td«>Побег из Шоушенка</td><td class=»tab7td«>Драма, криминал</td></tr><tr class=»tabalt«><td class=»tab7td»>Крестный отец</td><td class=»tab7td«>Драма, криминал</td><tr><td class=»tab7td«>Крестный отец 2</td><td class=»tab7td«>Драма, криминал</td></tr><tr class=»tabalt«><td class=»tab7td»>Хороший, плохой, злой</td><td class=»tab7td«>Приключения, вестерн</td></tr></table>

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

Фильм Жанр
Побег из Шоушенка Драма, криминал
Крестный отец Драма, криминал
Крестный отец 2 Драма, криминал
Хороший, плохой, злой Приключения, вестерн

В качестве фона таблицы или любой ее строки и ячейки, можно использовать изображение. За это отвечает свойство background-image, значение которого — путь к файлу вашего фонового изображения.

Эффект зебры

Для создания эффекта зебры используется 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;
}

Управляйте данными с помощью фильтров

Позвольте пользователям управлять данными, представленными в таблице. Фильтрация данных помогает пользователям находить то, что они ищут, получать различную информацию и проводить сравнения.

Базовые фильтры: Разрешите пользователям применять предустановленные параметры к некоторым наборам данных. Эта функция универсальна и подходит для большинства таблиц данных.

Пример базового фильтра (таблица из UI Prep)

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

Пример комплексного фильтра (таблица из UI Prep)

Дополнительная информация

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

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

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

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

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

Графа, представляющая показатели разных величин, центрируется. Для записи диапазона значения используется тире либо многоточие. Такой вариант оформления считается правильным, но трудоёмким. Чтобы упростить работу, студенты и опытные дизайнеры используют одинаковое количество символов в числах до и после многоточия/тире.

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

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

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

Лучшие конструкторы таблиц 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. В разделе сайта «Создание стилизованной таблицы) вы можете выбрать шаблон, изменить цвета, задать нумерацию в футере:

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

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

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

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

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

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

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

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

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

Пример 3: Смешанные ширины

Теперь рассмотрим тот же пример, но с ширинами колонок 400px и 70% соответственно.

table-layout: auto

table-layout: fixed

Ok…. Поскольку ширина таблиц всего 694px, у браузера нет возможности нарисовать колонки 400px и 70% × 694px в таблице с такой шириной. Поэтому он делает все, что в его силах.

В случае с auto, заданные нами значения ширины принимаются во внимание, но только примерно. Рассчет следующий: 400px / 694px к 70% × 694px

И браузер старается его соблюсти. (Поведение варьируется от браузера к браузеру.)

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

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

Для того чтобы выделить шапку таблицы, используют теги <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>

Визуально:

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

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

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

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

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

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

Начните с выравнивания

Выравнивание простого текста или данных в таблице сразу бросается в глаза. Часто рядовой пользователь ставит выравнивание по своему вкусу: кто-то всегда и все выравнивает по центру, кто-то — по левому краю, а кто-то просто по ширине. Между тем существуют четкие правила “хорошего тона”, выработанные на основе наилучшего восприятия информации:

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

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

Ставьте в приоритет стандартные действия

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

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

Пример действия при наведении курсора (таблица из UI Prep)

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

Пример массового действия (таблица из UI Prep)

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

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

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

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

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

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

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

Готовый шаблон для документа я уже делал, возьму его и вставлю сюда же, чтоб было все понятно. Решил показать пример по таблицам, в котором буду пользоваться DIV-ами и собственно стилями CSS. Способ не самый простой, в интернете полно легких примитивных вариантов. Но, такой способ, как у меня, я лично не нашел.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector