CSS-таблицы


Оглавление (нажмите, чтобы открыть):

Стиль рамки таблицы в HTML и CSS

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

Содержание

[править] Пример простой таблицы

  • — тег, который открывает и завершает (

    ) описание таблицы.

  • border=»1″ — параметр, который включает отображение рамки (если этого параметра нет, и не назначен стиль CSS, то рамка у таблицы не отображается). [1]
  • — описывает заголовок таблицы (необязателен). [2]
  • — описывает строку (row) таблицы, внутри которой находятся ячейки ( и

    ).
  • — описывает ячейку-заголовок таблицы. По умолчанию такие ячейки выделяются жирным шрифтом и центровкой.
  • — описывает значение ячейки таблицы.
  • border=»1″ — установка толщины рамки. [3]
  • cellpadding=»5″ — отступы от рамки до текста внутри таблицы. [4]
  • border-collapse: collapse; — стиль CSS, который убирает задвоенность рамки.
  • border: 1px sol >[5] Для этой же цели можно использовать атрибут HTML bgcolor. [6]
  • align=»bottom» — перемещение заголовка таблицы вниз (стиль «caption-s >[7] не отрабатывает в IE). [8]

Пример правильно отрабатывает в MediaWiki и в LiveJournal.

[править] Использование класса CSS

Технология CSS позволяет приписать определенный стиль сразу всем таблицам документа (тег ), всего сайта (тег ), либо только для некоторых таблиц, указав для них имя класса (атрибут >[9]

Например, в CSS-описаниях движка MediaWiki, начиная с версии r48842, есть готовый стиль для таблиц. [10] Его можно использовать следующим образом:

[править] Назначение внешнего вида рамки

За это отвечают атрибуты HTML для тега :

Аналогично работает стиль border-width, однако рамка не отображается, если не установлен отличный от нуля атрибут border или стиль border-style. При одновременной установке толщины при помощи border-width и border, приоритет имеет border-width.

Можно указать от 1 до 4 значений толщины. [16]

[править] Цвет рамки

Цвет рамки можно установить при помощи атрибута bordercolor тега (отсутствует в стандарте HTML 4.01 и не поддерживается браузером Opera). [17] [18]

Для назначения цвета рамке имеется CSS-стиль border-color.

Это можно сделать также в одном выражении border-color, перечислив цвета через пробел (сверху по часовой стрелке):

Для указания цветов можно использовать шестнадцатеричные значения наподобие #aabbcc, см. wr:Цвета в HTML.

[править] Стиль рамки

Для назначения стиля рамки используется CSS-атрибут border-style.

При единичной толщине рамки в Internet Explorer версий 6 и ниже имеется ошибка для стиля dotted (он отображается как dashed): [19]

Для назначения разных стилей четырём сторонам рамки можно перечислить стили через пробел (сверху по часовой стрелке) в выражении border-style или использовать свойства border-bottom-style, border-top-style, border-left-style, border-right-style.

[править] Внутренняя и внешняя рамки

У таблицы, в общем случае, есть несколько рамок: это внешняя рамка таблицы и внутренние рамки ячеек. Их можно слить в одну рамку при помощи параметра CSS border-collapse (см. ниже), но если этого не сделано, то таблица и ее описание выглядят следующим образом:

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

[править] Расстояние между ячейками

Расстоянием между ячейками в показанном выше случае можно управлять при помощи атрибута тега cellspacing или атрибута стиля border-spacing (не работает в IE). [20]

При замере оказывается, что эти расстояния действительно составляют указанное число пикселей, причём, во всех трех браузерах (IE, Opera, Firefox).

[править] Объединённая рамка

Чтобы объединить смежные линии, используют атрибут стиля CSS border-collapse: collapse.

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

Однако, если внешнюю линию (прописанную для тега ) сделать более толстой, то картина меняется на следующую:

[править] Проблемы с назначением стиля внутренней рамки

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

К сожалению, разные браузеры «понимают» под этим разное: либо стиль внешней рамки (не включая внутренние линии таблицы), либо стиль вообще всех линий. Для назначения точного стиля внутренних рамок, который работает во всех браузерах, требуется описать его для внутренних ячеек ( и ). Это удобнее всего сделать в CSS-описании, при условии, что есть доступ к стилям CSS.

[править] Таблицы без рамки

Возможны таблицы совсем без рамки, с назначением только цвета фона у ячеек.

Пример правильно работает в MediaWiki и LiveJournal.

[править] Отрисовка рамок таблицы только вокруг групп

При помощи атрибута rules=»groups» тега можно нарисовать рамки вокруг групп, заданных тегами , , , или . Значение rules=»cols» или rules=»rows» тега позволяет отобразить рамку, соответственно, только вокруг колонок или строк.

[править] Расстояние от текста внутри таблицы до рамки

Для этого служит параметр CSS padding для содержимого ячейки , например: [21]

Для всей таблицы ( ) этот атрибут стиля «отдаляет» внешнюю рамку от внутренних ячеек (для IE это не работает).

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

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

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

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

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


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

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

класс tbl-small .

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

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

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

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).

Пример 3. Цвет фона

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

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

и

(пример 4).

Пример 4. Создание зебры

Результат данного примера показан на рис. 2.

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

Поля внутри ячеек

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

Расстояние между ячеек

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

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

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

Границы и рамки

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

,

, и

нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

Результат данного примера показан на рис. 5.

Рис. 5. Таблица с горизонтальными линиями

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

По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент

или

). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse . В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table , а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

а — свойство не установлено

б — свойство установлено

Рис. 4. Вид таблицы при использовании border-collapse

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам

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

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

В данном примере содержимое

выравнивается по левому краю, а содержимое

— по центру. Результат примера показан ниже (рис. 6).

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

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

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

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

34 CSS Tables

C ollection of free HTML and CSS table code examples: simple, responsive, pricing, periodic, etc. Update of June 2020 collection. 7 new item.

Table of Contents:

Tables

Author


  • Nathan Cockerill
  • February 1, 2020

Links

Made with

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

About the code

Sort Table Rows By Table Headers

Sort table rows by table headers — ascending and descending.

Author

  • Faiz Ahme
  • January 11, 2020

Links

Made with

  • HTML
  • CSS/SCSS

About the code

Responsive Tables Using li

I have used li to create tables because styling li is easier and allows more customization.

Author

  • Flor Antara
  • June 15, 2020

Links

Made with

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

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, 2020

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, 2020

Demo Image: Fixed Table Header

Fixed Table Header

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

Demo Image: Responsive Table


Responsive Table

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

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, 2020

Author

  • Wolf Wortmann
  • April 30, 2015

Links

Made with

About the code

Sticky Table Headers by position: sticky;

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

Demo Image: Responsive Table

Responsive Table

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

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

Demo Image: CSS Table

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.
Made by Andrew Lohman
June 2, 2014

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

Author

  • Charlie Cathcart
  • March 13, 2014

Links

Made with

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 data-* attribute.

Demo Image: Responsive Comparison Table

Responsive Comparison Table

Responsive comparison table created for a customer but decided not to use it. Works great, downsizing to mobile and then moving the information inside the boxes using before/after.
Made by Andy Howells
November 11, 2013

Demo Image: Table In HTML & CSS

Table In HTML & CSS

Nutrition Facts table in HTML & CSS.
Made by Chris Coyier
September 9, 2013

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

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

width и height

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

caption-side


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

  • top — расположить над таблицей.
  • bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table .

Задаёт таблице следующее оформление:

empty-cells

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

  • show — показывать границы и фон (по умолчанию).
  • hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

  • auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
  • fixed. Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

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

Помня это, оформим несложную таблицу, частично прокомментировав код.

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

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера , потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

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

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

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

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


08.03.2013 46 комментариев 193 659 просмотров

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

Содержание

С градиентом

Подсмотрел оформление тут. Немного подредактировал под свои нужды.

Итак, добавьте в Ваш css файл следующий код:

Пример оформления таблицы

С помощью CSS свойства width Вы можете устанавливать ширину таблицы.

В основном ширина устанавливается в пикселях или %, но можно также использовать cm и em.

CSS свойство height позволяет установить высоту таблицы. Высота в основном указывается в пикселях, но можно также использовать cm и em.

Оформление границ

Для оформления табличных границ в CSS используется свойство border.

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

Свойство border-collapse

Таблица в примере выше имеет двойную границу, потому что и сама таблица и ее ячейки (элементы th и td) имеют собственные границы.

Свойство border-collapse позволяет соединить границы таблицы и ячеек. Соединенные границы обычно смотрятся более аккуратно и красиво.

Выравнивание табличного текста

С помощью свойства text-align Вы можете выравнивать текст табличных ячеек по горизонтали. Текст может быть выравнен:

  • По левому краю (значение left)
  • По правому краю (right)
  • По центру (center)

С помощью свойства vertical-align Вы можете выравнивать текст табличных ячеек по вертикали. Текст может быть выравнен:

  • По верхней границе (top)
  • По центру (m >

Свойство padding

С помощью свойства padding Вы можете устанавливать величину отступа между границей ячейки и ее содержимым.

Таблицы! Таблицы? Таблицы…

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

Стандартная HTML4 таблица

Когда появилась необходимость в HTML разметке показывать таблицы — изобрели тег

.
Что же даёт нам таблица в браузере? Вот несколько основных «фич»:

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

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

    В первом примере ширина всей таблицы (примерно) = 387px , колонки Company = 206px , колонки Contact = 115px .

    В процентах Company = 206px/387px * 100% = 53% , Contact = 115px/387px * 100% = 30% .

    Теперь когда содержимое таблицы растянулось, ширина всей таблицы (примерно на моем экране) = 1836px , колонки Company = 982px , колонки Contact = 551px .

    В процентах Company = 982px/1836px * 100% = 53% , Contact = 551px/1836px * 100% = 30% .

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

    Можно «дожать» таблицу указав ей CSS свойство table-layout: fixed . Описание к свойству.

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

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

    Схлопывание (наложение) границ ячеек/столбцов border-collapse: collapse , если мы указали границы для ячеек. Т.е. в местах соприкосновения ячеек, не будет двойных граничных линий.

  • Группировка шапки. Реализуется атрибутами colspan , rowspan .
  • Использование стандартной таблицы


    Во всех вышеприведенный примерах в разметке таблицы я использовал сокращенную разметку:

    Однако можно использовать «каноничную» разметку:

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

    Чаще всего нам в разметке необходимо получить следующее. У нас есть некий контейнер с заданной шириной или с заданной максимальной шириной. Внутри него мы хотим вписать таблицу.

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

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

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

    Подстройка таблицы

    Задание ширины таблицы и столбцов

    Первая дилемма с которой сталкиваются фронт-энд разработчики — это задавать или не задавать ширину столбцов.

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

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

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

    И самая распространенная «фича»:

    • это сокращение текста в ячейке с помощью .

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

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

    Сокращение реализуется просто, необходимо указать CSS свойства для ячейки:

    И соответственно задать ширину колонки. По этой ссылке можно увидеть, что все настроено, но сокращение не работает.

    В спецификации есть заметка, немного объясняющая, почему сокращение не работает:

    Опять же сужаться таблица будет до минимальной ширины содержимого. Но если применить свойство table-layout: fixed то таблица начнёт «слушаться» и сокращение заработает. Но автоподстройка ширины столбцов уже не работает.

    Задание прокрутки таблицы

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

    Вторая дилемма с которой сталкиваются фронт-энд разработчики:

    • задание прокрутки/скролла в таблице

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

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

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

    Есть много способов это сделать, но все они сводяться к тому, что:

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

    Можно задать ограниченную высоту телу таблицы. Следующий пример показывает, что можно попробовать задать высоту тела таблицы.
    В результате мы ломаем табличное отображение тела таблицы CSS свойством display: block , и при этом необходимо синхронизировать прокрутку шапки с телом таблицы.

    1. мы создаём дополнительную разметку (составные таблицы) и тогда при прокрутке оригинала мы синхронизируем дополнительную разметку

    Этот вариант, где все предлагают/строят решения.

    Примеры составных таблиц

    Если нам необходима прокрутка тела таблицы, то без составных разметок не обойтись. Все примеры составных таблиц используют свои пользовательские разметки.

    Одна из самых известных таблиц Data Tables использует следующую разметку:

    Я намеренно сокращаю разметку, чтобы можно было составить общую картину, как выглядит разметка.

    Мы видим в разметке две таблицы, хотя для пользователя это «видится» как одна.
    Следующий пример React Bootstrap Table, если посмотреть в разметку, использует тоже две таблицы:

    Верхняя таблица отображает шапку, нижняя — тело. Хотя для пользователя кажется как будто бы это одна таблица.

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

    А как же так получается, что тело таблицы (одна таблица) и шапка (другая таблица) подстраиваются под ширину контейнера и они никак не разъезжаются по ширине и совпадают друг с другом?

    Тут кто как умеет так и синхронизирует, например, вот функция синхронизации ширины из вышеприведенной библиотеки:

    Возникает вполне логичный вопрос, а зачем тогда вообще использовать тег

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

    И тут мы окажемся не первыми, некоторые вообще не используют табличную разметку. Например Fixed Data Table или React Table.

    Разметка в примерах примерно такая:


    Отсюда название fixed table , т.е. для такой разметки мы должны заранее указать ширину всех столбцов (ширину таблицы, иногда и высоту строки). Хотя если мы хотим сокращение текста, все равно необходимо задавать ширину столбцов, даже в обычной таблице.

    Следующая таблица Reactabular использует интересный подход в синхронизации.

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

    Если мы скроллим тело таблицы, то происходит синхронизация шапки, а если мы скроллим шапку, то происходит синхронизация тела.

    А как же сделать автоподстройку ширины колонки в составной таблице спросите вы? Вот интересный способ использовать дополнительный проход браузера. Например в этой таблице ag Grid можно автоматически рассчитать подходящую ширину столбца.

    Реализация собственной таблицы

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

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

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

    Затем для другого проекта изучаешь другую таблицу (например при переходе с Angular1 на React, или с jQuery на Vue), а кастомизация совсем другая.

    Возникает логичный вопрос, а стоит ли потраченное время того? Стоит ли учить снова и снова связку фреймворк-таблица?

    Может легче освоить для себя базовые моменты составной таблицы и тогда вы сможете делать свою таблицу на любом фреймворке (Angular/React/Vue/будущее. )? Например, на свою таблицу вы будете тратить 2 дня на старт, потом в течении 30 мин кастомизировать.

    А можно подключить готовую фреймворк-таблицу за 30 мин и потом кастомизировать каждую фичу за 1 день.

    К премеру, я покажу как сделать свою составную таблицу на React.

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

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

    Разметка

    Для разметки будем использовать div элементы. Если использовать display: inline-block для ячеек, тогда будет следующая разметка:

    Но есть одна проблема — браузер (не все браузеры) интерпретирует пустые места между ячейками как текстовые ноды.

    Есть отличная статья, как с этим бороться.

    И если мы используем шаблонизатор (EJS, JSX, Angular, Vue), то это легко решить:

    Однако уже 2020 год, flexbox давно поддерживается, я делал на нем проекты еще в 2014 для IE11.

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

    Общие моменты использования

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

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

    Вместо такого «черного ящика», который потом сложно кастомизировать:

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

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

    Все функции/конструкторы getColumnDescriptions, filterBy, sortBy, TableHeader, TableBody, TableColumn будут импортироваться из моей таблицы.

    В качестве данных будет использоваться массив объектов:

    Мне понравился подход создания описания колонок в jsx в качестве элементов.

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

    В функции getTableColumns мы создаем описание колонок.

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

    Обязательно указываем row — число, которое показывает индекс строки в шапке (если шапка будет группироваться).

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

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

    В примере верхняя строка в таблице row= <0>зависит от ширины двух колонок [«Company», «Cost»] .

    Элемент TableColumn «фейковый», он никогда не будет отображаться, а вот его содержимое this.props.children — отображается в ячейке шапки.

    Разработка

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

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

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

    Тело таблицы использует описания у которых есть свойство dataField , поэтому описания фильтруются используя функцию getCellDescriptions .

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

    Подстройка ширины таблицы происходит следующим образом.

    После отображения берётся ширина контейнера, сравнивается с шириной всех ячеек, если ширина контейнера больше, увеличивается ширина всех ячеек.


    Для этого разработчик должен хранить состояние коэффициента ширины (который будет меняться).

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

    Функция подстройки ширины:

    Функция синхронизация шапки:

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

    И подстройка ширины adjustBody и синхронизация скролла adjustScroll — это функции которые изменяют состояние у прилинкованного компонента.

    Внутрь TableColumn можно вставлять любую jsx разметку. Зачастую используются такие варианты: текст, кнопка сортировки и кнопка фильтрации.

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

    Передаем в таблицу массив активных сортировок/фильтраций:

    Компонент сортировки SortButton и компонент фильтрации MultiselectDropdown при изменении «выбрасывают» новые активные фильтры/сортировки, которые разработчик должен заменить в состоянии. Массивы activeSorts и activeFilters как раз и предполагают, что возможна множественная сортировка и множественная фильтрация по каждой колонке.

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

    Итого разработчику в таблице необходимо:

    • автоподстройка ширины таблицы под ширину контейнера
    • прокрутка тела таблицы и синхронизация шапки
    • сортировка таблицы (возможна множественная сортировка)
    • фильтрация таблицы (возможна множественная фильтрация)

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

    Web Press

    Статьи Вебмастеру

    Web Press

    Создание и оформление таблиц. HTML + CSS

    Категория

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

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

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

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

    Заключительный этап построения таблицы является создание ячеек. Для этой цели есть две категории тегов:

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

    Как видно из кода расположенного выше, таблица содержит четыре строки (

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

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