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

Добавил пользователь Алексей Ф.
Обновлено: 10.09.2024

Редактор Word используется не только для набора текста. Дополнительный функционал открывает пользователю огромное количество опций, которые помогают преподнести информацию доступно, четко и структурировано. Один из распространенных вариантов как это сделать – создать таблицу в программе Ворд. Для этого предусмотрено несколько простых методов.

Как сделать таблицу в Word: 6 способов

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

Ниже показаны примеры создания таблицы в MS Word 2013

Способ 1: Создание вручную

Подходит в том случае, если число строк не превышает 8, а количество столбцов – 10 шт. При необходимости вставить большее число элементов, воспользуйтесь другим методом.

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

Способ 2: По размеру таблицы

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

3 шага как сделать такую таблицу в Ворде:

В месте установки курсора появляется таблица, готовая к заполнению.

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

Способ 3: Нарисовать таблицу

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

Нажатие кнопки Esc возвращает редактор в режим набора текста. Также перейти к заполнению можно двойным щелчком мыши в нужной клетке.

Способ 4: Преобразовать в таблицу

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

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

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

Способ 5: Вставить таблицу Excel

Пакет офисных программ Microsoft дополняет друг друга, позволяя существенно расширять функционал и возможности. Для создания больших таблиц с формулами и автоматическими расчетами используется Excel. Иногда необходимо, чтобы такая таблица появилась в программе Word. Разработчиками данная опция предусмотрена.

Существует 2 метода как вставить таблицу Excel:

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

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

Способ 6: Добавить экспресс-таблицы

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

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

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

Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц.

Хорошие дизайнеры не жалеют времени на типографику. Они тщательно подбирают шрифты, перебирают множество типографических шкал и скрупулезно применяют пробелы (white space) ради удобства пользователя. Затем появляется соблазн покреативить — и вот все мысли уже не о пользователе.

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

Относитесь к таблицам как к тексту, который будут читать

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

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

Таблицы — не картинки с данными. Это справочники для внимательного изучения и анализа.

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

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

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

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

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

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

Используйте заливку по-минимуму

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

То же относится к границам и линиям между строками и столбцами таблицы. Используйте их редко, а лучше никогда. Ян Чихольд отмечает:

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

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

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

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

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

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

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

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

Используйте маюскульные (прописные) числа в таблицах с числовыми данными

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

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

Цифры одинаковой ширины включены в моноширинные шрифты, которые вполне подходят для презентации данных в таблице. Однако многие пропорциональные шрифты (то есть те, в которых 1 уже 8, а W шире I) также включают дополнительный набор моноширинных цифр. Такие цифры называют табличными. Они спроектированы иначе, чем стандартные пропорциональные. Например, у единицы (1) есть горизонтальное основание, а ноль (0) может быть несколько уже, чтобы лучше подстроиться под ширину выбранного числа. Табличные цифры обычно входят в маюскульныe (прописныe) и минускульные (строчные) вариации цифр. Используйте табличные прописные цифры, чтобы упростить сопоставление числовых данных в таблице.

Чтобы определить табличные прописные цифры, используйте свойство font-variant-numeric со значением lining-nums и tabular-nums:

font-variant-numeric: lining-nums tabular-nums;

Для браузеров с требованием font-feature-settings используйте теги OpenType lnum и tnum.

Для пропорциональных цифр установите свойство font-variant-numeric со значением proportional-nums. Для браузеров с требованием font-feature-settings используйте тег OpenType pnum.

Для разделения и объединения используйте пробелы — white space

Для этого понадобится разделить данные так, чтобы каждый элемент без труда читался и рассматривался отдельно от других. Сначала удалите расстояние между ячейками с помощью border-collapse:

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

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

padding: 0.125em 0.5em 0.25em 0.5em;

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

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

Imperial to metric conversion factors

Values are given to three significant figures

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

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

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

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

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

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

Адаптируйте таблицы под маленькие экраны

Для корректного отображения информации в таблице важен каждый миллиметр. Иногда таблица должна быть шире стандартной строки в 45-75 символов, и поэтому адаптация для маленьких экранов — непростая задача. Лучший вариант — отдельно работать с каждой таблицей, но это не всегда возможно, особенно если нужно применить единый стиль для всех таблиц из базы данных CMS.

Самый очевидный способ сэкономить пространство — применить сжатый шрифт или уменьшить кегль (но не оба варианта одновременно). В любом случае, удобочитаемость таблицы не должна пострадать.

Попробуйте наклонный шрифт для заголовков

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

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

transform-origin: bottom left;

transform: translate(2.58em,-2em) rotate(-60deg);

transform: translate(5.14em,-2em) rotate(-60deg);

Добавьте к таблицам горизонтальный скроллинг

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

Чтобы достичь такого эффекта, оберните таблицу в тег figure.

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

Не стоит устанавливать фиксированную ширину для таблицы: браузер сожмёт её насколько это возможно, прежде чем применять скролл. Для сохранения удобочитаемости используйте неразрывные пробелы и свойство white-space:nowrap. Помните, что читабельная таблица со скроллом намного лучше нечитабельной таблицы без него.

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

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

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

Обе таблицы используют одинаковую HTML разметку. Единственное отличие — атрибут data-title, который применяется к каждой ячейки во втором варианте. Этот атрибут удобен тем, что он повторяет названия категорий в левом столбце (Name, Email, Title, Phone).

Четыре простых шага, как превратить таблицы в список с использованием медиазапросов и CSS (без JavaScript):

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

@media (max-width: 25em)

table, caption, tbody, tr, th, td

thead, th:empty, td:empty

Наряду со стилями выше потребуется применить несколько дополнительных CSS-стилей, чтобы таблица не потеряла в эстетике. Данный способ впервые применил Аарон Густафсон4.

Делая таблицы адаптивными, исходите из их целей

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

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

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

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

Примечания к тексту:

1. Asymmetric Typography by Jan Tschichold (1967, after 1935 original).

3. Terre des Hommes (translated into English as Wind, Sand and Stars) by Antoine de Saint-Exup?ry (1939).

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

Как распечатать лекции в тетрадь

Вначале о том, что нам понадобится:

компьютер;
Microsoft Word как минимум 2007 года — программа для работы с текстом;
принтер — желательно струйный, еще лучше если он будет цветной, в этом случае текст будет выглядеть совсем натурально. Подойдет и черно-белый, можно будет сослаться на то, что текст написан черной гелевой ручкой;
чистая тетрадь — для извлечения из нее листов, на которых будем печатать;
канцелярский или любой другой нож — разрезать листы перед печатью;
узкий скотч — склеивать листы после печати.

Создаем новый файл Microsoft word, устанавливаем в нем пользовательские размеры страницы Макет > Размер > Другие размеры бумаги:

В открывшемся окне нужно установить следующие размеры. Это размеры стандартного (не двойного) тетрадного листа:

Ширина: 16,5 см
Высота: 20,5 см

Верхнее: 0,5 см – отступ от верхнего края зависит от того, как сверху на листе напечатана первая клетка. Если она целая, то 0,5 см будет то, что нужно. Если обрезана, нужно измерить часть обрезанной клетки линейкой и прибавить к этому значению 0,5 см. Именно такого размера установить верхнее поле, чтобы текст при печати располагался строго по клеткам.
Нижнее: 0,5 см
Внутри: 2,5 см
Снаружи: 0,8 см

Теперь, чтобы видеть, как текст будет располагаться в клетках тетради, нужно добавить сетку. Сетка не печатается и нужна только для удобства. Перейдите на вкладку Макет > Выровнять > Параметры сетки:

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

Подготовка текста для печати на тетрадном листе

Теперь нужно отформатировать текст так, чтобы он был расположен ровно по клеткам.

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

Выделите текст, установите выравнивание по ширине:

Включите автоматический перенос слов:

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

Идеально! Все готово для печати.

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

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

Пример текста, распечатанного по данной инструкции. Увеличение по клику.

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

Нарисовать таблицу можно при помощи разных программ — Power Point, Excel, Word и т.п. Но в случае, если таблица содержит в себе изображения, лучшим вариантом будет программа Adobe Photoshop. Огромное количество инструментов и функций этого графического редактора позволяют создавать таблицы, которые можно сделать различного размера,типа и цвета, не ограничивая фантазию рамками стандартов.

Создавать эскиз таблицы при помощи Направляющих и Сетки
Рисовать таблицу с помощью инструмента Линия
Добавлять в таблицу текст и изображения

Подготавливаем таблицу, расставляем направляющие

Переходим в меню Просмотр — Линейки (View — Rulers) и включаем Линейки.

Снова переходим в меню Просмотр для отображения Направляющих (Просмотр — Показать — Направляющие (View — Show — Guides)):

Переходим в меню Редактирование — Установки — Направляющие, сетка и фрагменты (Edit- Preferences — Guides, Grid & Slices) либо нажимаем сочетание клавиш Ctrl+K и Ctrl+8.

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

Чтобы изменить положение уже добавленной направляющей, активируйте инструмент Перемещение (Move Tool) клавишей V на клавиатеру и перетащите Направляющую.

Вот какой эскиз таблицы получился в итоге:

Рисуем таблицу в фотошопе

В верхней панели настроек инструмента изменяем цвет (1) и толщину линий (2), включаем или отключаем обводку (3):

Рисуем линии. Чтобы нарисовать ровную линию, зажмите клавишу Shift, сделайте клик левой клавишей мыши в начале линии, проведите линию к ее окончанию, отпустите клавишу мыши и Shift.

Добавляем в таблицу текст и картинки

Осталось только при помощи инструмента Текст (Type Tool) (можно активировать клавишей T)написать текст и вставить картинки.

Чтобы добавить картинки, перейдите в меню Файл — Поместить (File-Place) и поочередно выберите изображения с собаками.

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

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

Если вы нашли ошибку/опечатку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Читайте также: