В гуглдоках можно красиво заверстать резюме, анкету или инструкцию. Либо сделать пример верстки лендинга/письма, чтобы верстальщику или дизайнеру потом было проще разобраться и отрисовать все красиво. Помогут нам с этим обычные таблицы.
В чем прикол: верстаем в гуглдоке как в древнем вебе
Когда-то давно стандарта CSS еще не было, а верстать красивые сайты было надо. Люди придумали «костыль» — брали обычные HTML-таблицы и с их помощью раскидывали контент по странице. Ячейкам можно было делать невидимые границы, заливку, разную ширину — в итоге получалось, что текст и картинки лежат как будто не в таблицах, а сами по себе.
Сейчас так уже не верстают — на смену табличной пришла блочная верстка. Там есть всякие отступы, заливки и прочие фишки CSS (я в этом не шарю) — все это гораздо удобнее, красивее и гибче. Но если вы копирайтер, автор или редактор, опыт древнего веба можно использовать с пользой для себя.
Люди нашей специальности работают с текстом в гуглдоках. Но часто нужно написать не обычную статью, а текст для лендинга, резюме или материал на сайт со сложной версткой.
Можно сделать это «обычно» — просто написать текст и расставить комментарии, как все должно выглядеть. Либо обсудить на созвоне. Либо отдать все на откуп дизайнера/верстальщика, пусть придумывает сам. Но я считаю, что расположение элементов на странице и красивая презентация материала — зона ответственности автора. И таблицы помогут нам вступить в эту зону ответственности.
Основные фишки для табличной верстки
Сами таблицы
Если вдруг не умеете их создавать. Открываем гуглдок, идем по пути «Вставка → Таблица», в окошечке мышкой указываем размеры. По идее на них пофигу — потом колонки и строки можно добавлять и убавлять. Для этого щелкаем правой кнопкой по ячейке и выбираем, что хотим добавить: строку или столбец, слева или справа. И также с удалением.
С таблицами можно творить всякие непотребства: объединять ячейки, сжимать и разжимать колонки и столбцы, растягивать таблицу до границ страницы:
Единственный нюанс — у ячеек есть минимальная высота и ширина, с ней ничего не поделать. Но обычно и не надо.
Удаление границ
Главная фишка, превращает унылую таблицу в магию. Для этого щелкаем по таблице правой кнопкой, выбираем «Свойства таблицы» и делаем границу шириной «0 пт».
Таким образом лист гуглдока оказывается поделен на части. И мы можем заполнять любую часть независимо от других, то есть поместить текст или картинку в совершенно любое место страницы. В боевом документе это может выглядеть так:
Иногда удалять границы не нужно. Например, если контента много, дизайнер может что-то перепутать и слепить информацию вместе. В такой ситуации таблицу можно использовать просто для структурирования информации, а не для красоты, а границы лучше оставить. Смотрите сами.
Цвет ячейки
У ячеек таблицы можно менять фон. Вот как это делается:
Пользуйтесь с умом =)
Таблица в таблице
Каждая ячейка таблицы у нас превращается в отдельную сущность, как бы мини-документ. И внутри можно разместить еще одну самостоятельную таблицу. Для этого просто ставим курсор в ячейку, и жмем «Вставка → Таблица»:
Мне это нужно не очень часто, но иногда помогает в верстке лендингов со сложной структурой.
Форматирование текста в ячейках
С текстом внутри ячеек можно делать все то же, что с обычным. Выделять заголовки, запихивать в маркированные списки, менять цвет. Развлекайтесь как хотите.
Есть особенность — внутри ячейки текст можно выравнивать не только по горизонтали, но и по вертикали, то есть относительно верхней и нижней границы ячейки. Вот как это делать и что получится:
Расположение таблицы
Тут все просто. По умолчанию таблица располагается по центру и занимает ту же ширину, что текст. Но ее можно:
Растянуть за бока. Чтобы она доходила до границ листа. Если убрать границы и залить фон, получится такая широкая плашечка:
Выровнять по центру, правому или левому краю. Если сужать границы таблицы, она может съехать из центра. Либо ее может понадобиться сдвинуть в другое место. Тут есть такая опция:
Одна ячейка
Гуглдок позволяет сделать таблицу из одной ячейки. Это удобно, если нужно поставить какой-то текст в прямоугольник: лучше сделать таблицу, чем то-то рисовать. Вот как это выглядит, если сделать одну ячейку, уменьшить ее вручную, убрать границы, залить фон и поставить выравнивание по центру:
Прочие непотребства
У таблиц можно поменять стили и толщину границ, менять стиль только одной ячейки или одной стенки ячейки, задавать цвет границы. Вот как это делается:
Мне это все ни разу не пригодилось, но вы не я.
Пример того, как все может быть красиво
Сейчас покажу выдуманную статью со всевозможными элементами, которая заверстана с помощью таблицы.
Почти как сайт) Удобно презентовать, отдавать в задание дизайнеру или верстальщику, да и самому смотреть приятно.
Ляпота то какая
Я ничего красивее в своей жизни не видел. А вы?
только свой член
Честно, чуть кровь из глаз не пошла...
Может sites.google.com воспользоваться?
Для первоначальных потребностей его более чем хватит всё интуитивно и понятно. Главное бесплатно. При полном отсутствии фантазии там даже шаблоны есть...
У меня в практике есть случай. Обратился клиент, с вопросом: Сайтик бы обновить, старенький стал, инфы много новой появилось.
Начинаем выяснять что к чему, а там сайт на sites.google.com
Ему его сделал кто-то пару лет назад и денег взял. А он с радостью заплатил, потому как тот удовлетворял его потребностям.
Приглядитесь к сему полезному и бесплатному ресурсу, посимпатичнее выйдет. И домен свой прикрутить можно...
Это не гайд о том, как делать сайты с доменом и прочим. Это гайд о том, как в инструменте, где редактор и так пишет текст, добавить оформление для большей наглядности. Никто такое в прод конечно выпускать не будет для клиентов.
Я говорю о том, что можно ещё проще сверстать информативную статью на другой платформе, и не заморачиваться с таблицами. А то, что можно просто прикрутить домен, пускай это будет бонусом.
Комментарий недоступен
Хороший гайд, спасибо. Никогда и не задумывался, что можно так делать, все словами описывал или скриншотами.
Комментарий недоступен
Нет, я просто недавно сижу залогиненым, потому что подписался на рассылки. А до этого сидел ридонли где-то год. Вообще редко участвую в обсуждениях, только оставляю коммент, когда кто-то чем-то помог и упростил немного жизнь.
Ради ответа на ваш ответ и единственным комментарием вас НЕ похвалить, я бы тоже зарегистрировалась бы прямо счас, но, увы и ах, уже в теме
Пожалуйста! Со словами всегда есть риск неодзнозачного прочтения. Плюс если навостриться с таблицами — это тупо быстрее
Вот же круто! А зачем?
Когда увидел слово "красиво" и не понял, где это "красиво".
Осталось добавить не скучные обои ☺
Шёл 2021, мы вернули табличную вёрстку
Снова её изобрели ☺
Пасиба, теперь мои гугл доки будут годными
Notion тихо курит в сторонке
Как удалить отступы внутри ячейки таблицы?
это потому что Ворд платный или зачем? я не понял
не знал, что так можно) наверное офигенный получится исходник для верстальщика лендинга после отрисовки дизайнера
Это не вёрстка, а раскраска таблички
Вёрстка = написание кода, который трансформирует дизайн-макет (самый примитивный его вариант — набросок на бумаге) в понимаемую браузером страничку.
А тут мы разве код пишем?
Комментарий недоступен
Если бы не прошла на днях короткий видеокурс по гугл доксам, ничего бы из этой статьи не поняла. Новички точно не разберутся. А кто в теме, те и так уже пользуются. Рекомендую - простым языком, наглядно и с юмором https://klmnt.online/