Электронные таблицы организованы в рабочую книгу по рабочим листам, и внутри каждого рабочего листа находится коллекция ячеек, в которых находятся данные. Ячейки электронной таблицы располагаются в виде сетки через столбцы и строки.
Какая разница?
Смешать определения строк и столбцов легко, но знание различий важно при изучении структуры электронной таблицы или при изучении учебника.
Столбцы бегут вертикально, вверх и вниз. Используя изображение выше, мы можем видеть, что A, B и C являются столбцами, потому что они расположены в верхней части электронной таблицы. Они там, чтобы выровнять клетки под ними. Большинство программ электронных таблиц помечают заголовки столбцов буквами.
Строки, напротив, противоположны столбцам и проходят горизонтально. Строки на нашем изображении включают 1, 2, 3, 4 и 5.
Один простой способ запомнить разницу между столбцами и строками — подумать о реальных сценариях. Колонна на здании — это большая вертикальная колонна, а ряды кукурузного поля — длинные проходы.
Как они работают вместе
Стандартный способ говорить о любой конкретной ячейке на рабочем листе — объяснить ее столбец и строку, поскольку это единственный способ организации ячеек.
Например, чтобы сослаться на ячейку в столбце G, которая находится в строке 15, вы бы сказали G15. Столбец всегда идет первым, за которым следует строка без пробела.
Это соглашение об именах верно не только в устной и письменной форме, но и при создании формул в электронной таблице. Например, использование = sum (F1: F5) в Google Sheets объясняет программе работы с электронными таблицами, что нужно брать сумму от F1 до F5.
Ограничения столбца и строки
Когда вы впервые открываете программу для работы с электронными таблицами, в нее встроено количество строк и столбцов по умолчанию. Например, Google Sheets начинается с 26 столбцов и 1000 строк.
Поскольку в алфавите всего 26 букв, программам для работы с электронными таблицами необходим способ поместить значение в столбец за № 26 (столбец Z). Для этого к именам столбцов обычно добавляется начало алфавита. Например, строка 26 может читать AA, строка 27 AB и так далее.
Однако большинство программ устанавливают верхний предел количества строк и столбцов в одной электронной таблице. Например, Google Sheets не позволяет создавать более 18 278 столбцов, но количество строк не ограничено. Рабочие листы Excel ограничены 16 384 столбцами и 1 048 576 строками.
В Excel самый последний заголовок столбца называется XFD для обозначения столбца 16 384.
Использование столбцов и строк
Для навигации по листу у вас всегда есть возможность щелкнуть ячейки или использовать полосы прокрутки на экране, но при работе с листами большего размера зачастую проще использовать клавиатуру. Удерживайте клавишу Ctrl, а затем нажмите клавишу со стрелкой (например, вниз, вверх, вправо или влево), чтобы быстро переместить активную ячейку в этом направлении.
Например, используйте Ctrl + Down, чтобы сразу перейти к последней видимой строке в этом столбце или к следующей ячейке в этом столбце, в котором есть данные.
В статье я покажу стандартную табличную разметку, какие у неё есть альтернативы. Дам пример собственной таблицы и разметки, а также опишу общие моменты её реализации.
Стандартная HTML4 таблица
Когда появилась необходимость в HTML разметке показывать таблицы — изобрели тег
. Что же даёт нам таблица в браузере? Вот несколько основных «фич»:
Если мы не указали ширину таблицы/столбцов, то ширина таблицы подстраивается и растягивается, чтобы вместить содержимое любого из столбцов.
В данном случае вычисляется процентное соотношение каждого столбца к общей ширине и каждый столбец растягивается соответственно процентному соотношению.
Так мы ломаем автоподстройку ширины таблицы и теперь таблица слушается заданных ширин для каждого столбца (или всей таблицы), но зато таблица точно вписывается в указанную ширину.
Использование стандартной таблицы
Во всех вышеприведенный примерах в разметке таблицы я использовал сокращенную разметку:
Однако можно использовать «каноничную» разметку:
Если нужна таблица без шапки и в то же время нам необходимо контроллировать ширину столбцов:
Чаще всего нам в разметке необходимо получить следующее. У нас есть некий контейнер с заданной шириной или с заданной максимальной шириной. Внутри него мы хотим вписать таблицу.
Если ширина таблицы больше чем контейнер, тогда необходимо показывать скролл для контейнера. Если ширина таблицы меньше чем контейнер, тогда необходимо расширять таблицу до ширины контейнера.
Но ни в коем случае мы не хотим, чтобы таблица сделала наш контейнер шире чем мы задали.
По этой ссылке можно уведеть контейнер с таблицей в действии. Если мы будем сужать контейнер, то в тот момент, когда таблица уже больше не сможет сужаться — появиться скролл.
Подстройка таблицы
Задание ширины таблицы и столбцов
Первая дилемма с которой сталкиваются фронт-энд разработчики — это задавать или не задавать ширину столбцов.
Если не задавать, тогда ширина каждого столбца будет вычисляться в зависимости от содержимого.
Исходя из логики, можно понять, что в этом случае браузеру нужно два прохода. На первом он просто отображает все в таблице, подсчитывает ширину столбцов (мин, макс). На втором подстраивает ширину столбцов в зависимости от ширины таблицы.
Со временем вам скажут что таблица выглядит некрасиво, т.к. один из столбцов слишком широкий и
И самая распространенная «фича»:
Первое разочарование, что если не задавать ширину столбцов, то сокращение не работает. В этом есть своя логика, т.к. на первом проходе браузер высчитывает мин/макс ширину колонки без сокращения, а тут мы пытаемся сократить текст. Необходимо либо все пересчитать повторно, либо игнорировать сокращение.
Сокращение реализуется просто, необходимо указать CSS свойства для ячейки:
И соответственно задать ширину колонки. По этой ссылке можно увидеть, что все настроено, но сокращение не работает.
В спецификации есть заметка, немного объясняющая, почему сокращение не работает:
Опять же сужаться таблица будет до минимальной ширины содержимого. Но если применить свойство table-layout: fixed то таблица начнёт «слушаться» и сокращение заработает. Но автоподстройка ширины столбцов уже не работает.
Задание прокрутки таблицы
Вышеприведенный пример будет работать со скроллом и пользоваться этим можно. Однако возникает следующее требование:
Вторая дилемма с которой сталкиваются фронт-энд разработчики:
В спецификации таблицы есть прямое указание, что тело таблицы может быть с шапкой и подвалом. Т.е. шапка и подвал всегда видимы.
А есть и указание о том, что тело таблицы можно скроллить, а шапка и подвал будут оставаться на месте:
А по факту браузеры этого не делают и скролл для таблицы необходимо придумывать/настраивать вручную.
Есть много способов это сделать, но все они сводяться к тому, что:
Этот вариант, где все предлагают/строят решения.
Примеры составных таблиц
Если нам необходима прокрутка тела таблицы, то без составных разметок не обойтись. Все примеры составных таблиц используют свои пользовательские разметки.
Одна из самых известных таблиц Data Tables использует следующую разметку:
Я намеренно сокращаю разметку, чтобы можно было составить общую картину, как выглядит разметка.
Мы видим в разметке две таблицы, хотя для пользователя это «видится» как одна. Следующий пример React Bootstrap Table, если посмотреть в разметку, использует тоже две таблицы:
Верхняя таблица отображает шапку, нижняя — тело. Хотя для пользователя кажется как будто бы это одна таблица.
Опять же пример использует синхронизацию прокрутки, если прокрутить тело таблицы, то произойдет синхронизация шапки.
А как же так получается, что тело таблицы (одна таблица) и шапка (другая таблица) подстраиваются под ширину контейнера и они никак не разъезжаются по ширине и совпадают друг с другом?
Тут кто как умеет так и синхронизирует, например, вот функция синхронизации ширины из вышеприведенной библиотеки:
Возникает вполне логичный вопрос, а зачем тогда вообще использовать тег
, если используется только автоподстройка ширины из стандартной таблицы?
И тут мы окажемся не первыми, некоторые вообще не используют табличную разметку. Например Fixed Data Table или React 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), то это легко решить:
Однако уже 2017 год, flexbox давно поддерживается, я делал на нем проекты еще в 2014 для IE11.
А сегодня можно вообще не стесняться его. Это упростит нам задачу, можно будет делать столько пустых нод, сколько нужно:
Общие моменты использования
Мне этот подход не нравится. По моему мнению, разработчик должен контроллировать процесс сортировки, фильтрации. Это требует дополнительного кода.
Вместо такого «черного ящика», который потом сложно кастомизировать:
разработчик должен будет писать:
Разработчик должен сам прописывать шаги: вычислить описание колонок, отфильтровать, отсортировать.
Все функции/конструкторы getColumnDescriptions, filterBy, sortBy, TableHeader, TableBody, TableColumn будут импортироваться из моей таблицы.
В качестве данных будет использоваться массив объектов:
Мне понравился подход создания описания колонок в jsx в качестве элементов.
Будем использовать ту же идею, однако, чтобы сделать независимыми шапку и тело таблицы, будем вычислять описание один раз и передавать его и в шапку и в тело:
В функции getTableColumns мы создаем описание колонок.
Обязательно указываем row — число, которое показывает индекс строки в шапке (если шапка будет группироваться).
Ширина width тоже обязательный параметр, может задаватся как числом или как массивом ключей от которых зависит ширина.
Элемент TableColumn «фейковый», он никогда не будет отображаться, а вот его содержимое this.props.children — отображается в ячейке шапки.
Разработка
На основе описаний колонок сделаем функцию, которая будет разбивать описания по рядам и по ключам, а также будет сортировать описания по рядам в результирующем массиве:
Теперь обработанные описания передаём в шапку и в тело для отображения ячеек. Шапка будет строить ячейки так:
Тело таблицы будет строить ячейки тоже на основе обработанных описаний колонок:
Тело таблицы будет слушать события изменения размеров экрана, а также прокрутки самого тела таблицы:
Подстройка ширины таблицы происходит следующим образом.
После отображения берётся ширина контейнера, сравнивается с шириной всех ячеек, если ширина контейнера больше, увеличивается ширина всех ячеек.
Для этого разработчик должен хранить состояние коэффициента ширины (который будет меняться).
Следующие функции реализованы в таблице, однако разработчик может использовать свои. Чтобы использовать уже реализованные, необходимо их импортировать и прилинковать к текущему компоненту:
Функция подстройки ширины:
Функция синхронизация шапки:
Ключевая особенность таблицы для redux — это то, что она не имеет своего внутреннего состояния (она должна иметь состояние, но только в том месте, где укажет разработчик).
И подстройка ширины adjustBody и синхронизация скролла adjustScroll — это функции которые изменяют состояние у прилинкованного компонента.
Внутрь TableColumn можно вставлять любую jsx разметку. Зачастую используются такие варианты: текст, кнопка сортировки и кнопка фильтрации.
Для массива активных сортировок/фильтраций разработчик должен создать состояние и передавать его в таблицу.
Передаем в таблицу массив активных сортировок/фильтраций:
Компонент сортировки SortButton и компонент фильтрации MultiselectDropdown при изменении «выбрасывают» новые активные фильтры/сортировки, которые разработчик должен заменить в состоянии. Массивы activeSorts и activeFilters как раз и предполагают, что возможна множественная сортировка и множественная фильтрация по каждой колонке.
К сожалению, формат статьи не позволяет описать всех тонкостей, поэтому предлагаю сразу посмотреть результат.
Итого разработчику в таблице необходимо:
Все это я реализовал в примере. Надеюсь теперь, при переходе на новый фреймворк, у вас как минимум появился выбор — брать готовую или сделать свою таблицу.
1. Ряд коротких строк, расположенных одна под другой и образующих вертикальную полосу текста; колонка, столбик. Газетный лист в шесть столбцов. □ В нынешнем «Словаре» полный «Указатель» источникам напечатан особо, в два столбца. Пушкин, Словарь о святых. || Ряд слов, цифр, написанных одно под другим (одна под другой). Столбцы подписей. □ Цифры шеренгами и столбцами мелькают в моих глазах. Салтыков-Щедрин, Помпадуры и помпадурши. Инвалид, сидя за конторкой, бодро щелкал счетами, мусолил карандаш и выводил на клочке бумаги столбцы цифр. В. Глинка, Старосольская повесть.
Источник (печатная версия): Словарь русского языка: В 4-х т. / РАН, Ин-т лингвистич. исследований; Под ред. А. П. Евгеньевой. — 4-е изд., стер. — М.: Рус. яз.; Полиграфресурсы, 1999; (электронная версия): Фундаментальная электронная библиотека
Столбец — деревня в России, Передольское сельское поселение в Батецком районе Новгородской области;
Столбец — село на Украине, центр Столбецкого сельского совета Дубенского района Ровненской области.
СТОЛБЕ’Ц, бца́, м.1. Ряд коротких строк, расположенных одна под другой и образующих колонку текста. Наш словарь напечатан в два столбца. Газетные столбцы.2.чаще мн. Длинная лента из подклеенных один к другому листов, свертываемая в свиток (способ хранения документов в старинных приказах; истор.).
Источник: «Толковый словарь русского языка» под редакцией Д. Н. Ушакова (1935-1940); (электронная версия): Фундаментальная электронная библиотека
столбе́ц
1. ряд коротких строк в газете, журнале и т. п., расположенных одна под другой и составляющих вертикальную полосу на странице
2. ряд цифр, слов, последовательно написанных одно под другим; колонка
3. устар. документ в виде длинной ленты из подклеенных один к другому листов, свертываемой в свиток
Делаем Карту слов лучше вместе
Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!
Спасибо! Я стал чуточку лучше понимать мир эмоций.
Вопрос: обречь — это что-то нейтральное, положительное или отрицательное?
Знание основ терминологии играет большую роль для обучения. В частности, без этого невозможно изучение специальной литературы и работа на занятии требует существенно больше времени и усилий.
Большинство из приведенного (и переделанного) сформулировано в ОСТ 29.130-97 Издания. Термины и определения. Боковик Первая (крайняя левая) вертикальная графа (колонка) таблицы, фактически являющаяся совокупностью заголовков строк. В случае наличия нумерации, вынесенной в отдельный столбец, боковиком следует считать две первых колонки. Базовым правилом является указание на выравнивание боковика влево. Вывод Особая форма табличного оформления материала, приводимого по тексту и обычно(!) не имеющего линеек. Вывод обычно имеет небольшие размеры и не содержит заголовка, а во многих случаях и головки. Также важно, что на вывод (как не имеющий номера) не даются ссылки из других частей текста. Головка (шапка) Наименование граф, или верхний заголовок (верхняя часть с заголовками боковика и граф). Может состоять из одной или нескольких строк. Заголовок нумерационный Содержит слово «Таблица» и её порядковый номер. Необходим при использовании ссылок из текста. Не может быть использован для единственной таблицы. Заголовок тематический (общий) Раскрывает назначение и содержание таблицы. Может быть как самостоятельным, так и сочетаться с нумерационным заголовком. Колонка, столбец или графа Первый термин выглядит более значимым, так как имеет латинское происхождение и соответствует английскому column. Подлежащее таблицы Перечень единиц, наименование объекта(ов), описываемого(ых) в таблице. Примечание (подтабличное примечание) Содержит пояснения, относящиеся к элементам или всей таблице. Размещается непосредственно под таблицей в виде сноски(ок) со знаком, либо просто в виде текста с заголовком (Примечание, Замечание. ) в подбор или без такового. Некорректно в этом смысле говорить о примечании, вынесенном в отдельную графу или строку. Прографка Основная часть таблицы, где расположены данные, составляющие ее содержание. То есть за вычетом головки и боковика. Проформа Таблица из головки и начала (1–2 строки) прографки, используемая в качестве образца для заполнения. Пустографка Таблица, имеющая заголовки граф, боковик и пустую прографку, предназначенную для заполнения вручную. Сказуемое таблицы Конкретные данные, описывающие или характеризующие подлежащее. Строка Заголовок боковика и все соответствующие ему ячейки прографки независимо от того, сколько строк в заголовке боковика и сколько — в ячейках прографки. Основная структурная единица таблицы, описывающая совокупность свойств единичного объекта. Хвост Боковик с прографкой. То есть вся таблица за вычетом головки. Часто этот элемент называют телом таблицы, то есть её содержательной частью. Таблица Форма представления информации с размещением слов и/или чисел в колонки (графы) и строки. Каждый элемент (ячейка) является одновременно составной частью и строки, и колонки. Ярусы головки таблицы Заголовки граф, соподчиненные по смыслу и расположенные в головке таблицы друг под другом. Ячейка Область, образуемая пересечением графы и строки. Единичный случай сказуемого в прографке.
Программы электронных таблиц организуют ячейки в столбцы и строки
Столбцы и строки являются фундаментальной частью любой программы для работы с электронными таблицами, будь то Microsoft Excel, Google Sheets, OpenOffice Calc, LibreOffice Calc или какое-либо другое программное обеспечение.
Электронные таблицы организованы в рабочую книгу по рабочим листам, и внутри каждого рабочего листа находится коллекция ячеек, в которых находятся данные. Ячейки электронной таблицы располагаются в виде сетки через столбцы и строки.
Какая разница?
Смешать определения строк и столбцов легко, но знание различий важно при изучении структуры электронной таблицы или при изучении учебного пособия.
Столбцы бегут вертикально, вверх и вниз. Используя изображение выше, мы можем видеть, что A, B и C являются столбцами, потому что они расположены в верхней части электронной таблицы. Они там, чтобы выровнять клетки под ними. Большинство программ электронных таблиц помечают заголовки столбцов буквами.
Строки, напротив, противоположны столбцам и проходят горизонтально. Строки на нашем изображении включают 1, 2, 3, 4 и 5.
Один простой способ запомнить разницу между столбцами и строками – подумать о реальных сценариях. Колонна на здании представляет собой большую вертикальную колонну, а ряды кукурузного поля – длинные проходы.
Как они работают вместе
Стандартный способ говорить о любой конкретной ячейке на рабочем листе – объяснить ее столбец и строку, поскольку это единственный способ организации ячеек.
Например, чтобы сослаться на ячейку в столбце G, которая находится в строке 15, вы бы сказали G15. Столбец всегда идет первым, за которым следует строка без пробела.
Это соглашение об именах верно не только в устной и письменной форме, но и при составлении формул в электронной таблице. Например, использование = sum (F1: F5) в Google Sheets объясняет программе работы с электронными таблицами, что нужно взять сумму от F1 до F5.
Ограничения столбца и строки
Когда вы впервые открываете программу для работы с электронными таблицами, в нее встроено количество строк и столбцов по умолчанию. Например, Google Sheets начинается с 26 столбцов и 1000 строк.
Поскольку в алфавите всего 26 букв, программам для работы с электронными таблицами нужен способ поместить значение в столбец за № 26 (столбец Z). Для этого к именам столбцов обычно добавляется начало алфавита. Например, строка 26 может читать AA, строка 27 AB и так далее.
Тем не менее, большинство программ устанавливают верхний предел количества строк и столбцов в одной электронной таблице. Например, Google Sheets не позволяет создавать более 18 278 столбцов, но количество строк не ограничено. Рабочие листы Excel ограничены 16 384 столбцами и 1 048 576 строками.
В Excel самый последний заголовок столбца называется XFD для обозначения столбца 16 384.
Использование столбцов и строк
См. Справку по редакторам Документов Google, чтобы узнать больше сочетаний клавиш, которые можно использовать в Google Sheets для Windows, macOS, Chrome OS и мобильных устройств. У Microsoft есть списки сочетаний клавиш Windows и сочетаний клавиш Mac.
Привет! Меня зовут Лампобот, я компьютерная программа, которая помогает делать Карту слов. Я отлично умею считать, но пока плохо понимаю, как устроен ваш мир. Помоги мне разобраться!