Как сделать таблицу читабельной
Как сделать читабельную таблицу
Часто встречаются плохо оформленные таблицы, как эта:
Здесь есть все: линейки, центральное выравнивание, выделение цветом текста, разноцветные строки.
Таблицы готовят бухгалтеры, менеджеры, пиарщики, студенты — практически каждому, кто работает на компьютере пришлось оформить несколько таблиц. В программах для создания таблиц много функций, и все стараются использовать их по максимуму, считая что чем больше цветов и стилей, тем красивее, необычнее, выглядит таблица.
В чем основная проблема этой таблицы
За псевдо красотой, разноцветными полосками и линейками теряются данные и их сложно изучать. А нужно чтобы было наоборот и таблица демонстрировала данные, а ее оформление только помогало их изучать, а не отвлекала.
Есть хорошая гифка — она показывает, как улучшить таблицу и вывести данные на первый план. Мы повторим все изменения таблицы из гифки и расскажем почему они были необходимы. Чтобы было проще, мы используем аналогичную таблицу на русском.
Как сделать лучше
Убираем из таблицы цвет — данные начинают чуть более выступать на первый план:
Удаляем горизонтальные и вертикальные разделители и цветные плашки в строках таблицы:
Теперь таблица выглядит легче, и разделители не спорят с текстом.
Удаляем рамку и жирное начертание из шапки:
Данные в столбцах не очень большие, места хватает для всего. Увеличиваем ширину колонок, так чтобы они соответствовали данным, и избавляемся от переносов слов в строках:
Выравниваем текст по левому краю, цифры — по правому, заголовки столбцов выравниваем вместе с данными:
Сгруппируем данные и отделим их друг от друга дополнительным пространством, удалим повторы в боковике таблицы:
Выделим не отдельное значение, а всю строку. Избавимся от ненужных нулей в числовых данных — все цифры целые, знаки после запятой тут не нужны. Напишем даты более человечно, а цифры, чтобы их было проще считывать
и сравнивать, разделим пробелами на разряды (между группами цифр используйте неразрывный пробел):
Выделим заголовки колонок жирным (если из-за этого увеличивается ширина колонки, уменьшите шрифт на 1—2 пункта) и отделим шапку таблицы от прографки тонкой линейкой:
Чтобы компенсировать расстояние между колонками воспользуемся приемом Тафти и выровняем цифровые данные по центру. Что бы числа стало еще проще сравнивать выравниваем их по разряду — сначала выравниваем данные по разряду, а потом это все выравниваем по центру колонки (это сложный примем, и используется в верстке книг и журналов, обычно достаточно выровнять числовые данные по правому краю):
Было, стало
Таблица стала компактнее, данные хорошо видны и их легко изучать.
Прикрепляем таблицу Эксель с правильным форматированием — все оформление задано стилями ячеек. Выбирайте нужные стили и создавайте красивые простые таблицы.
Как сделать таблицу в Word: пошаговая инструкция для создания и редактирования простых и сложных массивов данных
Набрать текст в редакторе под силу большинству из нас, даже если мы только осваиваем работу за компьютером. А вот изменить его, дополнить изображениями и таблицами, сделать отступы, поля и добавить нумерацию страниц уже сложнее. Для этого надо получить специальные знания, иначе можно долго искать нужную функцию и вникать в ее работу.
Я давно подружилась с программами Microsoft Office и хочу помочь вам в их освоении. Сегодня разберемся, как сделать таблицу в Word и Google Документе, как добавить и удалить строки и столбцы, поменять их ширину, выровнять данные в ячейках и произвести другие действия.
Все способы с пошаговыми инструкциями
Откройте программу и посмотрите на основное меню вверху экрана. Среди перечня опций нам нужна вкладка “Вставка”.
Я использую Office 365, который по интерфейсу не отличается от пакета 2016 года. Если у вас стоит более ранняя версия, не расстраивайтесь. Да, меню будет выглядеть немного иначе, но ваша задача – найти вкладку “Вставка” или “Вставить”.
Затем нажмите на слово “Таблица”. Перед вами появится выпадающий список, при помощи которого можно:
Сейчас мы рассмотрим каждый из этих способов отдельно.
Быстрое создание простой таблицы
Самый легкий способ – это отметить в выпадающем меню поле, в котором квадратики по вертикали означают количество строк, а по горизонтали – столбцов. Таким образом, если мы выделяем область 3 × 4, то получаем таблицу из 12 одинаковых ячеек, готовую к заполнению.
В дальнейшем ее можно увеличить, уменьшить и изменить размеры строк и столбцов. Как это сделать, смотрите в разделе о редактировании.
Второй простой способ
Снова идем в меню и выбираем “Вставить таблицу…”.
В выпавшем окошке можно выбрать любое количество строк и столбцов, а также настроить ширину ячеек:
Если вы поставите галочку внизу, то в следующий раз редактор предложит создать точно такой же объект, что удобно, если вам нужно несколько одинаковых массивов.
Рисуем таблицу
На мой взгляд, это самый трудный способ, его стоит использовать в редких случаях, когда нужно составить сложную таблицу необычной конфигурации или когда у вас уйма времени, и хочется поэкспериментировать.
Выбираем в меню соответствующий пункт.
Теперь ведем карандашом и рисуем рамку, а затем ячейки. На мой взгляд, тут удобно “чертить” вертикальные, горизонтальные и даже диагональные линии и создавать свой макет, но вы можете творить, как вам захочется.
В процессе рисования в основном меню откроется вкладка “Макет”. Опции на этой панели позволяют быстро добавлять одинаковые ячейки, объединять их или разделять. Подробнее обо всех возможностях редактирования любой таблицы в Microsoft Word я расскажу чуть позже.
Преобразование текста в таблицу
Эта функция может стать довольно удобным инструментом для тех, кто привык быстро набирать текст и не хочет тратить время на заполнение полей. Также вы можете его использовать, когда переносите данные с распечатанного листа и книги в компьютер или просто не любите таблицы, но делать их приходится.
Чтобы все получилось, содержимое каждой ячейки пишите по одному из принципов:
Главное, не запутаться и по порядку сверху вниз и слева направо, то есть по строчкам, выписать все данные с использованием выбранного разделителя. Я чаще всего выписываю содержимое новой графы, нажимая Enter, так проще не запутаться и проконтролировать количество данных.
Затем выделяем набранный текст, идем в меню и выбираем пункт “Преобразовать в таблицу…”.
В появившемся окне выбираем нужное количество столбцов, строки программа установит сама. Затем говорим редактору, как подобрать оптимальную ширину ячеек, и какой символ отделяет их содержимое в конкретном случае. Нажимаем кнопку “ОК” и получаем готовую и уже заполненную форму.
Создаем таблицу Excel в текстовом документе
Чем интересен Excel? В нем есть формулы, возможность фильтровать и упорядочивать информацию, делать простые и сложные расчеты, рисовать графики, чего нет в Word. Поэтому если нам нужно что-то посчитать и внести данные в текстовый документ, мы открываем меню и выбирайте соответствующую опцию.
Перед нами появляется объект из 10 строк и 7 столбцов и меню редактора таблиц от компании Microsoft. Работать с ним так же легко и приятно, как с обычным массивом в Excel.
Когда вы сделали нужное редактирование данных, можете продолжать работу над документом, переключив курсов за пределы таблицы. Чтобы вернуться и изменить содержимое, нужно 2 раза нажать на объект левой кнопкой мыши.
Использование заготовок
В Word есть шаблоны, которые могут вам пригодиться. Чтобы воспользоваться ими, в меню выберите строку “Экспресс-таблицы”. Перед вами появится список заготовок, можете взять подходящую и внести свою информацию.
Но главная фишка в том, что вы можете добавить уже готовую таблицу в заготовки, чтобы использовать ее в следующий раз. Это очень удобно, когда нужно создавать однотипные объекты в разных документах.
Чтобы применить функцию, вставьте таблицу, заполните заголовки или всю информацию в зависимости от ваших целей, затем наведите курсор на пункт меню “Экспресс-таблицы” и кликните левой кнопкой мыши по самой нижней строке с рисунком дискеты слева.
Редактирование
После создания таблицы ее в любое время можно заполнить и изменить. Чтобы сделать это, кликните по ней левой кнопкой мыши и в основном меню программы зайдите в панель “Макет”.
Изменяем свойства таблицы
В самом левом углу мы видим 3 пункта:
При помощи первой опции можно создать выделение нужной области для дальнейшего редактирования. Это может быть 1 ячейка, столбец, строка, в которой в данный момент находится курсор мыши либо вся таблица.
Сетка нужна, если вы убрали границы между элементами, а точнее, скрыли их. Вот так выглядит табличка, в которой нет линий между столбцами.
А вот так она будет отображаться с применением сетки.
Видите, появились пунктирные разделители? Теперь проще разобрать структуру данного массива.
В свойствах вы можете:
Удаление и добавление элементов
Это одна из самых нужных функций при работе с массивом данных. Поставьте курсор мыши на ячейку и нажмите на кнопку “Удалить”.
В выпавшем списке выберите, что именно нужно убрать:
Когда вы убираете одну ячейку, то программа предлагает варианты, как это сделать:
Если вы применяете первый вариант, то в выбранной строке или столбце станет на 1 графу меньше, чем в остальных. Вот как это выглядит на практике.
Добавить одну ячейку не получится, наращивание массива происходит строками снизу или сверху и столбцами слева или справа от графы, в которой расположен курсор.
Примечание: Чтобы добавить несколько строк, выделите столько же ячеек по горизонтали или вертикали.
Другие настройки
Все эти настройки перед вами, испытайте их, чтобы научиться быстро редактировать нужные параметры.
Также вы можете менять месторасположение таблицы. Для этого наведите на нее мышку и тяните за крестик в левом верхнем углу. Другой способ: выделите объект, нажмите комбинацию клавиш “Ctrl + X”, переместите курсор в нужное место и воспользуйтесь кнопками “Ctrl + V”.
Изменение внешнего вида
Вы можете не только редактировать элементы и таблицу целиком, но и изменять их внешний вид. Для этого кликните по объекту и перейдите в пункт меню “Конструктор таблиц”.
Сделайте свой документ еще более красивым и удобным для чтения при помощи этих функций.
Таблицы в Google Документах
А вы знаете, что есть альтернатива текстовому редактору Microsoft Word? Это Google Документы, которые хранятся в интернете. Создавать их может любой человек, у кого есть аккаунт в Google.
Главное удобство: работать над одним документом можно с разных компьютеров и давать доступ другим пользователям для просмотра и редактирования данных. В последнее время я пользуюсь этим редактором чаще, чем Word. Попробуйте, может, и вам понравится.
Здесь есть большинство самых востребованных функций. Чтобы вставить таблицу, нужно нажать на слово “Вставка” в верхней панели, выбрать соответствующее действие из списка и выделить желаемое количество строк и столбцов.
Заключение
Мы разобрали несколько способов сделать таблицу в Word, узнали, как заполнить ее, отредактировать и оформить. Я надеюсь, что эта инструкция помогла вам, а если возникли трудности, то напишите об этом в комментариях. Я постараюсь помочь.
Сохраняйте статью в закладки, ведь с первого раза бывает сложно запомнить последовательность действий. Подписывайтесь на новые материалы iklife.ru, вместе с нами вы легко освоите работу программ, сервисов и сайтов и станете уверенным пользователем ПК, телефона и интернета.
Всего доброго. До новых полезных встреч, друзья.
Веб-типографика: создаем таблицы для чтения, а не для красоты
Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц.
Хорошие дизайнеры не жалеют времени на типографику. Они тщательно подбирают шрифты, перебирают множество типографических шкал и скрупулезно применяют пробелы (white space) ради удобства пользователя. Затем появляется соблазн покреативить — и вот все мысли уже не о пользователе. Однако таблицы нужны в первую очередь, чтобы их читали и использовали, а не просто любовались.
Относитесь к таблицам как к тексту, который будут читать
Существует огромное количество таблиц: одни содержат простые числовые данные, другие — смесь текста и числовых показателей. Одни нужно читать ряд за рядом, а другие можно быстро просмотреть по вертикали. Потенциал использования у таблиц так же велик, как и у слов. В виде таблиц можно представить финансовые показатели, расписание движения автобусов, иностранные словари, содержание документов и книг, числовые преобразования, цены, сравнения, технические характеристики и так далее.
Несмотря на все разнообразие размеров, структуры, содержания и целей, к любой таблице применимы два простых дизайнерских принципа: она должна легко читаться и не искажать смысл содержащихся в ней данных.
Таблицы не нужно «украшать» только для того, чтобы они смотрелись эстетичнее. Хорошо составленная таблица может быть красивой, но только при условии, что форма в первую очередь служит содержанию.
Таблицы — не картинки с данными. Это справочники для внимательного изучения и анализа.
Правильно составленная таблица легко читается и выявляет общие паттерны и закономерности в анализируемых данных. Мастер типографического дизайна Ян Чихольд пишет 1 :
Дизайн таблиц не должен быть чем-то скучным и однообразным. Наоборот, он может превратиться в творческий процесс, не менее интересный, чем работа в других сферах дизайна.
По возможности продумывайте удобочитаемость каждой таблицы заранее. Ваша работа как дизайнера — найти способы сделать информацию читаемой, удобной для изучения и использования.
Работая с текстом в вебе, вы же не пытаетесь поместить на экран столько слов, сколько влезет. Тот же принцип применим и к таблицам: не нужно впихивать туда как можно больше данных. Есть соблазн уменьшить размер текста в таблице, и если вся информация числовая, это может сработать. Но даже при таком сценарии пользователь должен без труда считывать информацию со своего обычного положения не приближаясь к экрану.
Не растягивайте таблицы
Многие дизайнеры инстинктивно применяют параметр «ширины» к таблицам по принципу работы с изображениями. Таблица при этом растягивается на всю ширину колонки или страницы. В этом и заключается соблазн растягивания: издалека она становится похожа на изображение. И если на расстоянии таблица будет выглядеть неплохо, то вблизи между единицами данных появится ненужное пространство, затрудняющее чтение. Вдобавок к этому, таблицы на всю ширину пестрят фоновым изображением и цветными границами, что еще больше делает её похожей на картинку, в то время как пользователю нужна структура текста. Ради ваших читателей не поддавайтесь этому соблазну.
Возможно, вы захотите выровнять все столбцы по ширине. Однако это не улучшит читабельность. Некоторые ячейки станут слишком широкими, информация в них потеряется, а связь между данными соседних столбцов прервется. Другие ячейки, наоборот, окажутся слишком узкими, сжимая содержимое таблицы. Столбцы в таблице должны быть выровнены в зависимости от количества данных в них. Столбцы с небольшими числами должны быть узкими, а столбцы с абзацами — относительно широкими. На составление такой таблицы потребуется время, особенно если вы дизайнер печати — нужно будет вручную задавать ширину каждого столбца для макетов. К счастью, браузеры сделают всю работу за вас. Они использовали специальные алгоритмы для отображения таблиц задолго до появления CSS, поэтому просто положитесь на них.
Используйте заливку по-минимуму
Для начала избавьтесь от любых рамок и границ в таблицах. Это избыточное викторианское украшательство, потому что выравнивание текста и так обозначит границы таблицы.
Постарайтесь улучшить читаемость используя только выравнивание, межстрочные интервалы и объединение. Избегайте любых заливок, особенно «зебру» — чередующуюся заливку строк, и вообще любой фон, кроме белого. Таблицы с заливкой могут неплохо смотреться, но такой дизайн отвлекает от содержания.
Выделяя каждую вторую строку, полосатая заливка искажает значение данных, делая информацию в незалитых строках менее значимой. Используйте заливку осторожно и только для того, чтобы направить внимание пользователя в нужном направлении. При перечислении выделение должно идти сверху вниз, в остальных случаях — по направлению чтения.
То же относится к границам и линиям между строками и столбцами таблицы. Используйте их редко, а лучше никогда. Ян Чихольд отмечает:
Таблица не должна выглядеть как сетка, в которой каждое число окружено границами. Постарайтесь обойтись без каких-либо границ. Используйте их, только если без них совсем не обойтись. Вертикальные границы нужны только тогда, когда расстояние между столбцами слишком маленькое, так это может привести к ошибкам при интерпретации данных в таблице. Таблицы без вертикальных границ выглядят лучше, чем с ними, а тонкие границы смотрятся лучше толстых.
Ян Чихольд, «Ассиметричная типографика», 1967.
Разделяйте столбцы и строки границами только если выравнивания, разрядки и объединения недостаточно, чтобы направить читателя. Если разделение границами все же необходимо, используйте светлые тона заливки. Ваша цель — выделить нужное, а не возвести преграду.
Выравнивайте текст по левому краю, числа по правому, а заголовок — относительно данных в таблице
Ещё раз повторимся, что таблицы создаются для того, чтобы их читали, а не просто просматривали. Поэтому выравнивайте текст в таблице так, как вы бы выровняли его в другом контексте — то есть по левому краю. Не допускайте выравнивания по ширине, оставьте текст немного «оборванным» справа, иначе расстояние между словами, растянутыми на всю ширину строки, создадут «реки» (дыры) и данные будет сложно считывать. Если правый край слишком «рваный», используйте перенос слов на новую строку.
Выравнивайте числа по правому краю. Это помогает сравнивать величины, когда бегло просматриваешь таблицу сверху вниз. Чтобы ещё больше облегчить считывание информации, используйте одинаковое количество десятичных знаков.
Для единообразия и облегчения восприятия, выравнивайте заголовки таблицы в соответствии с выравниванием данных в ней: если это числовые данные, то по правому краю, а если текст, то по левому. Например: 
Выравнивайте по запятой в десятичной дроби
Синтаксис text-align следующий: в кавычки заключается символ, по которому происходит выравнивание (обычно точка или запятая), затем через пробел вводится ключевое слово, обозначающее тип выравнивания (по умолчанию это right ).
В примере ниже данные центрированы и выровнены по точке в десятичной дроби:
В данном примере данные выровнены по символам «×» и «:»: 
Используйте маюскульные (прописные) числа в таблицах с числовыми данными
Многие таблицы, например, финансовые отчёты или расписания, состоят преимущественно из чисел. Их основная цель — представить числовые данные с помощью столбцов, строк, или их комбинаций. Читатель может просматривать такую таблицу вертикально, искать нужную информацию или сравнивать числовые показатели. Иногда одного взгляда на столбец или строку достаточно, чтобы определить, какого рода информация представлена.
Сравнивать и сопоставлять числа намного легче, если единицы, десятки и сотни выровнены вертикально. Другими словами — все цифры в числе должны быть одной ширины.
Цифры одинаковой ширины включены в моноширинные шрифты, которые вполне подходят для презентации данных в таблице. Однако многие пропорциональные шрифты (то есть те, в которых 1 уже 8, а W шире I) также включают дополнительный набор моноширинных цифр. Такие цифры называют табличными. Они спроектированы иначе, чем стандартные пропорциональные. Например, у единицы (1) есть горизонтальное основание, а ноль (0) может быть несколько уже, чтобы лучше подстроиться под ширину выбранного числа. Табличные цифры обычно входят в маюскульныe (прописныe) и минускульные (строчные) вариации цифр. Используйте табличные прописные цифры, чтобы упростить сопоставление числовых данных в таблице. 
Чтобы определить табличные прописные цифры, используйте свойство
font-variant-numeric со значением lining-nums и tabular-nums :
Пропорциональные цифры
Для разделения и объединения используйте пробелы — white space
После того, как избавились от границ, разделителей и заливки ячеек, необходимо пустить в ход «белое пространство», чтобы таблицу можно было читать. На этом этапе нужно забыть о дизайне электронных таблиц и начать думать терминами типографики и принципами гештальт-группировки.
Для этого понадобится разделить данные так, чтобы каждый элемент без труда читался и рассматривался отдельно от других. Сначала удалите расстояние между ячейками с помощью border-collapse :
В стандартных HTML-таблицах смежные ячейки имеют свои границы и находятся на определённом расстоянии друг от друга. Это расстояние между ячейками сохраняется, даже если сами границы были удалены. Свойство border-collapse со значением collapse заставляет браузер убрать двойные границы на месте стыка ячеек, оставляя при этом только одну. Так как мы удаляем большинство границ в таблице, модель border-collapse для нас наиболее приемлема.
Следующий шаг — добавьте внутренние отступы (padding) для каждой ячейки, чтобы разделить данные. Верхний отступ ячейки лучше сделать немного меньше. Это поможет визуально сбалансировать расстояние между нижними и верхними строками. Чтобы вся таблица была правильно выровнена, используйте такие же внутренние отступы у заголовков ячеек, как у ячеек с данными. Длина строки в таблицах часто короткая, поэтому и высоту строки можно уменьшить. В примере ниже мы удалили весь дополнительный межстрочный интервал, однако вам может потребоваться больше места, в зависимости от шрифта и количества текста в ячейках.
Наиболее полезные принципы гештальт-группировки в дизайне таблиц — это принцип близости и сходства. Объединяйте похожие данные, чтобы они легче воспринимались на фоне остальной информации. Другими словами, отделяйте друг от друга сгруппированные по смыслу столбцы и строки. Плюс группировки в том, что такую таблицу проще воспринимать, а значит она читается лучше, чем таблица с неразделенными на группы столбцами и строками. Выделите похожие по значению и содержанию данные при помощи выравнивания, одинакового цвета или шрифта.
Подписи к таблице
Таблица ниже содержит подпись и использует принципы гештальт-группировки, отделяя похожие данные при помощи цветных строк. 
Обратите внимание, что в этом примере десятичные числа не выровнены по запятой. Цель таблицы — не сравнение числовых величин, а определение коэффициента умножения. Поэтому числовые данные выровнены по правому краю.
Не переусердствуйте с дизайном
Не смотря на то, что эта цитата уже превратилась в клише, она верно отражает подход к дизайну таблиц. Таблица не должна выглядеть как спредшит в Excel, который сам по себе является инструментом. Таблица служит для упрощения представления данных, которые можно прочесть и усвоить. Таблицы в Excel позволяет добавить форматирование текста, стили границ и заливку ячеек, что превращает его в картинку, но никак не улучшает читабельность. Таблицы тоже могут быть красивыми, но они — не произведения искусства, и поэтому их не нужно украшать. При стилизации таблицы думайте о тех, кто будет ими пользоваться. 
Адаптируйте таблицы под маленькие экраны
Для корректного отображения информации в таблице важен каждый миллиметр. Иногда таблица должна быть шире стандартной строки в 45−75 символов, и поэтому адаптация для маленьких экранов — непростая задача. Лучший вариант — отдельно работать с каждой таблицей, но это не всегда возможно, особенно если нужно применить единый стиль для всех таблиц из базы данных CMS.
Самый очевидный способ сэкономить пространство — применить сжатый шрифт или уменьшить кегль (но не оба варианта одновременно). В любом случае, удобочитаемость таблицы не должна пострадать.
Попробуйте наклонный шрифт для заголовков
Добавьте к таблицам горизонтальный скроллинг
Ниже пример того, как с помощью CSS активировать скролл для таблицы, не затрагивая остальной текст на странице:
Преобразовывайте несложные таблицы в списки
Четыре простых шага, как превратить таблицы в список с использованием медиазапросов и CSS (без JavaScript):
Делая таблицы адаптивными, исходите из их целей
Существует множество техник 5 для создания адаптивных таблиц. Некоторые основаны только на CSS (мы упомянули две), другие — более сложные, использующие JavaScript. Что определиться с техникой, спросите себя, как и для чего пользователь будет применять таблицу. Например, таблицы для сравнения данных в колонках или строках, заслуживают особого внимания.
От редакции
Курсы Нетологии по теме: