{"id":9457,"title":"\u041c\u0438\u043b\u043b\u0438\u043e\u043d \u043d\u0430 \u043e\u0431\u043b\u0430\u043a\u0430 \u0434\u043b\u044f \u0431\u0438\u0437\u043d\u0435\u0441\u0430 \u0438 \u0441\u0442\u0430\u0440\u0442\u0430\u043f\u043e\u0432","url":"\/redirect?component=advertising&id=9457&url=https:\/\/vc.ru\/promo\/318366-korotko-poluchit-million-na-testirovanie-oblachnoy-infrastruktury&placeBit=1&hash=63f8aeb1fa55d279faf1ab65b9ee234cdf90f6dda13e2a5162f812eb79c08715","isPaidAndBannersEnabled":false}
Маркетинг
Лена Шпрингер

Как красиво верстать в гуглдоках: резюме, лендинги, письма и прочее

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

В чем прикол: верстаем в гуглдоке как в древнем вебе

Когда-то давно стандарта CSS еще не было, а верстать красивые сайты было надо. Люди придумали «костыль» — брали обычные HTML-таблицы и с их помощью раскидывали контент по странице. Ячейкам можно было делать невидимые границы, заливку, разную ширину — в итоге получалось, что текст и картинки лежат как будто не в таблицах, а сами по себе.

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

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

Можно сделать это «обычно» — просто написать текст и расставить комментарии, как все должно выглядеть. Либо обсудить на созвоне. Либо отдать все на откуп дизайнера/верстальщика, пусть придумывает сам. Но я считаю, что расположение элементов на странице и красивая презентация материала — зона ответственности автора. И таблицы помогут нам вступить в эту зону ответственности.

Основные фишки для табличной верстки

Сами таблицы

Если вдруг не умеете их создавать. Открываем гуглдок, идем по пути «Вставка → Таблица», в окошечке мышкой указываем размеры. По идее на них пофигу — потом колонки и строки можно добавлять и убавлять. Для этого щелкаем правой кнопкой по ячейке и выбираем, что хотим добавить: строку или столбец, слева или справа. И также с удалением.

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

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

Удаление границ

Главная фишка, превращает унылую таблицу в магию. Для этого щелкаем по таблице правой кнопкой, выбираем «Свойства таблицы» и делаем границу шириной «0 пт».

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

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

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

Цвет ячейки

У ячеек таблицы можно менять фон. Вот как это делается:

Пользуйтесь с умом =)

Таблица в таблице

Каждая ячейка таблицы у нас превращается в отдельную сущность, как бы мини-документ. И внутри можно разместить еще одну самостоятельную таблицу. Для этого просто ставим курсор в ячейку, и жмем «Вставка → Таблица»:

Мне это нужно не очень часто, но иногда помогает в верстке лендингов со сложной структурой.

Форматирование текста в ячейках

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

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

Расположение таблицы

Тут все просто. По умолчанию таблица располагается по центру и занимает ту же ширину, что текст. Но ее можно:

Растянуть за бока. Чтобы она доходила до границ листа. Если убрать границы и залить фон, получится такая широкая плашечка:

Выровнять по центру, правому или левому краю. Если сужать границы таблицы, она может съехать из центра. Либо ее может понадобиться сдвинуть в другое место. Тут есть такая опция:

Одна ячейка

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

Прочие непотребства

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

Мне это все ни разу не пригодилось, но вы не я.

Пример того, как все может быть красиво

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

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

0
26 комментариев
Популярные
По порядку
Написать комментарий...
Андрей Иванов

Как красиво верстать в гуглдоках

Ляпота то какая

Ответить
27
Развернуть ветку
Михаил Умяров

Я ничего красивее в своей жизни не видел. А вы?

Ответить
17
Развернуть ветку
Андрей Иванов

только свой член

Ответить
6
Развернуть ветку
Timofey Beloglazov
Ответить
3
Развернуть ветку
Yury Gagarin

Честно, чуть кровь из глаз не пошла...
Может sites.google.com воспользоваться?

Для первоначальных потребностей его более чем хватит всё интуитивно и понятно. Главное бесплатно. При полном отсутствии фантазии там даже шаблоны есть...
У меня в практике есть случай. Обратился клиент, с вопросом: Сайтик бы обновить, старенький стал, инфы много новой появилось.
Начинаем выяснять что к чему, а там сайт на sites.google.com
Ему его сделал кто-то пару лет назад и денег взял. А он с радостью заплатил, потому как тот удовлетворял его потребностям.
Приглядитесь к сему полезному и бесплатному ресурсу, посимпатичнее выйдет. И домен свой прикрутить можно...

Ответить
5
Развернуть ветку
Лена Шпрингер

Это не гайд о том, как делать сайты с доменом и прочим. Это гайд о том, как в инструменте, где редактор и так пишет текст, добавить оформление для большей наглядности. Никто такое в прод конечно выпускать не будет для клиентов.

Ответить
5
Развернуть ветку
Yury Gagarin

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

Ответить
3
Развернуть ветку
Philip Poteryahin

Не мешайте людям "верстать" в гугл доках! Да еде и так красиво!)

Ответить
1
Развернуть ветку
Богдан Воробьев

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

Ответить
3
Развернуть ветку
Philip Poteryahin

Богдан, всегда пожалуйста. Подскажите часто регистрируетесь на сайтах что бы единственным комментарием похвалить авторов статей?))

Ответить
2
Развернуть ветку
Богдан Воробьев

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

Ответить
2
Развернуть ветку
Ольга Латаева

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

Ответить
0
Развернуть ветку
Лена Шпрингер

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

Ответить
0
Развернуть ветку
Павел Seoremica

Вот же круто! А зачем?

Ответить
2
Развернуть ветку
Рустам Бегалиев

Когда увидел слово "красиво" и не понял, где это "красиво".

Ответить
1
Развернуть ветку
Алексей Лазутин

Осталось добавить не скучные обои ☺

Ответить
1
Развернуть ветку
Aleksey Paschenko

Шёл 2021, мы вернули табличную вёрстку

Ответить
1
Развернуть ветку
Алексей Лазутин

Снова её изобрели ☺

Ответить
1
Развернуть ветку
Данил Соколов

Пасиба, теперь мои гугл доки будут годными

Ответить
1
Развернуть ветку
Никита Николич

Notion тихо курит в сторонке

Ответить
1
Развернуть ветку
Виталий Вайти

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

Ответить
0
Развернуть ветку
Denis Beskov

это потому что Ворд платный или зачем? я не понял

Ответить
0
Развернуть ветку
Александр Толстенко

не знал, что так можно) наверное офигенный получится исходник для верстальщика лендинга после отрисовки дизайнера

Ответить
0
Развернуть ветку
Алексей Лазутин

Это не вёрстка, а раскраска таблички

Вёрстка = написание кода, который трансформирует дизайн-макет (самый примитивный его вариант — набросок на бумаге) в понимаемую браузером страничку.

А тут мы разве код пишем?

Ответить
0
Развернуть ветку
Максим Милованов

реальный пример "резюме, анкеты, инструкции, лендинга и письма" есть? Или это просто выдуманная фича, которая никому не нужна?

Ответить
0
Развернуть ветку
Наталья Уварова

Если бы не прошла на днях короткий видеокурс по гугл доксам, ничего бы из этой статьи не поняла. Новички точно не разберутся. А кто в теме, те и так уже пользуются. Рекомендую - простым языком, наглядно и с юмором https://klmnt.online/

Ответить
0
Развернуть ветку
Читать все 26 комментариев
Сезон подкаста как эксперимент: научили ведущих бегать и отправили на полумарафон. Кейс Sports.ru и adidas
Из компании, где уволили 900 человек одним видеозвонком, ушли три руководителя, а основатель извинился Статьи редакции

Вишал Гарг сказал, что поступил слишком резко, но сокращать людей надо было раньше.

Выступление Вишала Гарга
Досудебная претензия к Эльдорадо

Начало сей чудной истории:

DiDi впервые показал в России электромобиль для водителей такси

Его представили 7 декабря на форуме «Открытые инновации» в Сколково.

«Битрикс24» достиг отметки в 10 миллионов зарегистрированных компаний

19 ноября 2021 года в сервисе для управления бизнесом зарегистрировалась компания из Индии, город Диу. Она стала 10-миллионным пользователем «Битрикс24»

Мне отказано в возврате денег за обучение в geekbrains data scientist, которое ещё не началось

Пишу отзыв про geekbrains. Купила в черную пятницу у них курсы по Datsscientist, курсы куплены в рассрочку, были необходимы, чтобы усилить знания по питону для создания торговых ботов. Но так как в группе не нашлось свободных мест, то старт обучения ближайший БУДЕТ только 27 декабря (встреча с деканом), сами платные модули начнутся 10 января, то…

Как и чем сейчас живут московские рестораны, отмеченные гидом «Мишлен»

Узнали и рассказываем, как повлиял звездный статус на рестораны «Деликатессен» и «Паризьен», и за что их сотрудники получают повышенные чаевые.

Увлечение самолётами, которое переросло в бизнес

Предприниматель из Волгограда производит и продаёт по всему миру симуляторы дополненной реальности.

Чему я учусь у своих детей как предприниматель

Дети смотрят на мир открытыми глазами и у них есть чему поучиться.

null