Лучшие бесплатные онлайн-инструменты table generator для создания таблиц для любых целей

Добавление заголовка к таблице с помощью

Вы можете добавить заголовок для таблицы установив его в элементе  и этот элемент необходимо поместить внутрь  элемента <table> (en-US). Причём вам нужно поместить его сразу после открытия тега .

Как можно понять из короткого примера выше, заголовок отражает в себе описание контента таблицы

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

Заголовок помещают сразу после тега .

Примечание: Атрибут (en-US) также может быть использован в элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать  элемент, так как deprecated в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).

Лучшие онлайн редакторы документов

Microsoft Word Online

Сайт: https://office.live.com/start/Word.aspx

Дополнение для Chrome: ссылка

Практически оригинальная программа как на компьютере! (кликабельно)

Не мог не поставить этот сервис на первое место (ведь он от Microsoft!). На сегодняшний момент мало чем отличается от программы для Windows: есть большинстве тех же инструментов, что и в классической программе (скрин привел выше, открыта браузерная версия).

Отмечу, что те документы, с которыми вы работаете, сохраняются автоматически на облачный дик (OneDrive, я его уже как-то рекомендовал на страницах блога).

А OneDrive, кстати, предустановлен в Windows 10 — и в проводнике можно с одного клика мышкой попасть в этот диск. Сервис по праву занимает первое место, один из самых многофункциональных. Постоянно развивается и обновляется.

Просто и удобно!

Сервис Google Документы

Сайт: https://www.google.ru/intl/ru/docs/about/

Новый документ в Google Doc

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

Отмечу, что на сервисе есть удобные заготовки: для резюме, делового письма, доклада, составления плана и т.д.

Полученные документы можно сразу же сохранять на свой облачный диск (Google Drive). Кстати, помимо Word, на сервисе можно работать и с таблицами Excel, и презентациями из Power Point. В общем, удобная и незаменимая вещь.

Яндекс-диск

Сайт: https://disk.yandex.ru/

Сохранено в Yandex! Почти оригинальный Word!

Такая удобная штука этот диск от Яндекса… Мало того, что его можно в 2 клика подключить к Windows, а затем к своему смартфону (чтобы была полная синхронизация всей документации), так еще можно создавать и редактировать:

• документы — DOCX/DOC, ODT, DOCM;
• таблицы — XLSX/XLS, ODS, XLSM, XLSB;
• презентации — PPTX/PPT, ODP, PPSX;
• текстовые документы;
• просматривать архивы.

Создание документа выполняется в 1 клик мышкой (пример ниже).

Создание нового документа на Яндекс-диск

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

Zoho

Сайт: https://www.zoho.eu/writer/

Примечание: чтобы открыть документ с жесткого диска, воспользуйтесь инструментом «Файл/импортировать документ».

Несколько отличный дизайн, но нормальна функциональность

У этого редактора несколько необычный дизайн (меню разработчики засунули слева), однако это не сказывается на функциональности: есть все необходимые инструменты для редактирования и создания качественного документа.

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

Инструментарий

Отмечу, что начать знакомство с этим редактором можно даже без регистрации (однако, есть ли в этом смысл, если вы не сможете сохранить документ у них на сервере?).

OffiWORD

Сайт: https://www.offidocs.com/

OffiWord: простой, легкий редактор

Простенький онлайн редактор, покрывающий большинство нужд по быстрой обработке небольших документов. Кстати, этот редактор поддерживает не только Word-вские файлы, но и файлы из-под OpenOffice, LibreOffice.

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

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

Полученные документы можно сохранить даже в PDF формат! В общем-то, совсем не плохо для такого легкого (с виду) редактора. Кстати, на сайте OffiWord есть онлайн версии и других приложений (для таблиц, презентаций, расчетов).

Дополнения по интересный онлайн редакторам — приветствуются!

А на этом я пока останавливаюсь…

Удачи!

Другие записи:

• Игры для слабых ноутбуков и ПК: часть 1 — стратегии (экономика, тактика, логика)
• Компьютер и здоровье: 5 важных правил для того, чтобы не испортить зрение и осанку!
• Создание универсальной мультизагрузочной флешки с Windows 7/8/10, WinPE, Linux и пр. (Legacy + UEFI …
• Аудио-разъемы Mini-Jack (3.5), Jack и Micro-Jack, или как правильно подключать наушники
• Запись видео с экрана на Андроид: лучшие приложения
• 10 сайтов с бесплатными картинками и фото (без авторских прав)
• Как подключить телефон к телевизору: 3 простых способа
• HDD диск перегружен 100% при скачивании файлов (торрентов) в uTorrent

Как вставить таблицу Excel на сайт

Что касается таблиц, то довольно часто бывает необходимо вставить уже готовую таблицу, созданную, например, в OpenOffice, Microsoft Excel, или Microsoft Word. Если таблица не слишком большая в ширину и нет объединенных ячеек, то можно воспользоваться бесплатным онлайн сервисом Tableizer.

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

Далее, нужно зайти в вышеупомянутый сервис, вставить скопированную таблицу и сгенерировать html код таблицы:

Затем смотрим, как будет выглядеть таблица, копируем готовый код таблицы:

И вставляем к себе на сайт.

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

Вот как это может выглядеть:

Как видно на снимке, таблица выходит на границы сайта.

Кстати и даже не слишком большие таблицы при просмотре сайта на мобильном устройстве (если сайт адаптивный) тоже могут выходить за рамки страницы.

Ну и как тогда быть с такими широкими таблицами и отображением таблиц на адаптивных сайтах?

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

Но, есть более интересный способ, который рассмотрим далее.

Lucidchart

Для тех, кого по каким-то причинам не устраивает Visio, есть вариант, являющийся полноценной его заменой в области создания диаграмм и флоучартов. В приложении есть множество элементов, шаблоны для создания блок-схем и диаграмм (впрочем, можно обойтись без них и создать схему с нуля), в платной версии их ещё больше. Интерфейс приложения интуитивно понятен и прост, с ним разберётся даже начинающий пользователь. Для работы необходим только выход в интернет, есть возможность командной работы (хотя и с ограничениями для бесплатных аккаунтов). Сервис поддерживает импорт файлов Visio (VSDX), Amazon Web Service (AWS) и Omnigraffle, а сохраняет результаты в JPG,PNG, SVG, PDF и Visio. Кроме того, есть приятная возможность сохранять промежуточные версии на облачном сервере.

Бесплатная версия Lucidchart функциональна, но если не хватает расширений – можно оплатить подписку. В их числе: больший объём виртуального хранилища, возможность создания неограниченного количества проектов, добавления ссылок на данные. Стоит платная версия от $5,95 до $20 в месяц.

Цвет фона и текста

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

• background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
• bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Отступы таблицы в HTML

В HTML отступы в таблице задаются с помощью тега <table>:

• cellspacing — расстояние между границами соседних ячеек;
• cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr height="40" bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Выравнивание таблицы в HTML

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

• left — выравнивание по левой границе;
• right — выравнивание по правой границе;
• center — выравнивание по центру.

Параметр valign может иметь такие значения:

• bottom — выравнивание по нижней границе;
• top — выравнивание по верхней границы;
• middle — выравнивание посередине.

Пример:

<table border= "1">
 <td width="300" height="200">Текст 1</td>
   <td width="300" height="200" align="right" valign="top">Текст 2</td>
</table>

Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Вставка изображения в HTML таблицу

У вебмастеров часто возникает вопрос о том, как вставить картинку в HTML таблицу? Для того чтобы это осуществить, необходимо прописать адрес или имя изображения в соответствующей ячейке после тега <td>.

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>

Дополнительными атрибутами в данном случае являются:

• width — ширина;
• height — высота;
• alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
• title — подпись к картинке;
• align — горизонтальное выравнивание;
• valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Объединение ячеек в HTML таблице

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>

У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

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

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

Заголовки добавляются с помощью открывающих и закрывающих тегов <th>. Чтобы добавить в таблицу заголовки для столбцов, нужно вставить новый элемент <tr> в самое начало таблицы и поместить в него имена столбцов с помощью тегов <th>.

Очистите файл index.html и добавьте строку заголовков для столбцов с помощью следующего кода:

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

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

Чтобы добавить заголовки для строк, нужно поместить открывающие и закрывающие теги <th> в качестве первого элемента в каждом элементе <tr>.

Давайте добавим в таблицу заголовки строк и данные, поместив выделенный ниже фрагмент кода под уже существующим кодом в файле index.html:

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

HTML Учебник

HTML ГлавнаяHTML ВведениеHTML РедакторHTML ОсновныеHTML ЭлементыHTML АтрибутыHTML ЗаголовкиHTML ПараграфыHTML СтилиHTML ФорматированиеHTML ЦитированиеHTML КомментарииHTML Цвет
Цвет
RGB
HEX
HSL

HTML с CSSHTML Ссылки
Ссылки
Ссылки цветные
Ссылки закладки

HTML Изображение
Изображение
Изображение карта
Изображение фон
Элемент картинки

HTML ТаблицыHTML Списки
Списки
Неупорядоченный список
Упорядоченный список
Другие списки

HTML БлокиHTML КлассыHTML ИдентификаторыHTML ФреймыHTML с JavaScriptHTML Путь к файлуHTML Мета тегиHTML Методы версткиHTML Адаптивный дизайнHTML Компьютерный кодHTML5 СемантикаHTML5 СинтаксисHTML СущностьHTML СимволыHTML ЭмодзиHTML КодировкаHTML URL КодировкаHTML в XHTML

Редактирование документа в Word Online

Работа с документами Ворд в режиме онлайн проходит в следующем порядке:

1. Пользователь открывает браузер, а затем входит непосредственно на сайт Word online, или получает доступ к сервису через электронную почту Outlook.com, или в веб-интерфейсе облачных хранилищ OneDrive, Яндекс.Диск, Облако Mail.Ru.
2. Происходит создание и редактирование документа Word.
3. Созданный документ автоматически сохраняется в облачном хранилище. Пользователь может скачать файл в формате «DOCX» на компьютер, или скачать на компьютер копию этого файла в форматах «PDF» или «ODT».

Сейчас я покажу, как это происходит, на примере сервиса Word Online:

1. Перейдите на страницу Word Online.
2. Введите данные от учетной записи Майкрософт. Если у вас нет учетной записи, создайте ее, это не займет много времени.
3. В окне «Word Online» нажмите на «Новый документ».
4. После этого, откроется страница текстового редактора, на которой можно создать, отредактировать, а затем сохранить документ Ворд.

После завершения работы с документом Word, щелкните по меню «Файл».

В выпадающем меню выберите «Сохранить как».

Вам также может быть интересно:

• Как поставить пароль на документ Word
• Как посчитать количество символов в Word: все способы

В окне «Сохранить как» предложено несколько вариантов для сохранения документа:

• Сохранить как — сохранение копии в OneDrive, связанным с вашим аккаунтом.
• Переименовать — переименование файла.
• Скачать копию — скачивание копии документа на компьютер.
• Скачать в формате PDF — скачивание копии документа на компьютер в формате «PDF».
• Скачать в формате OTD — скачивание копии документа на компьютер в формате «ODT».

Обратите внимание, что здесь нет кнопки «Сохранить», так как документ Word сохраняется автоматически.

Выберите подходящий вариант для сохранения документа.

Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.

1. На первом шаге в html-коде с помощью парного тега <table> указываем браузеру, что в web-страницу вставлена таблица: <table></table>. Элемент table является блочным элементом web-страницы. Следовательно таблица всегда выводится с новой строки с отступами по вертикали от соседних элементов, поэтому нет необходимости помещать ее в абзац.

2. На втором шаге формируем строки таблицы, помещая парные теги <tr> внутрь <table>. Каждый элемент <tr> создает отдельную строку:

<table>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

3. Далее, на третьем шаге формируем ячейки таблицы с помощью парных тегов <td> и <th>, которые помещаются внутрь элемента <tr>. Тег <td> создает обычную ячейку, а <th> ячейку заголовка, т.е. шапку соответствующего столбца:

<table>
<tr>
<th></th><th></th><th></th>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>

4. Ну и на последнем шаге помещаем внутрь элементов <th> и <tr> содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:

<table border=»1″>
<tr>
<th>Столбец 1</th><th>Столбец 2</th><th>Столбец 3</th>
</tr>
<tr>
<td>Ячейка 1-1</td><td>Ячейка 1-2</td><td>Ячейка 1-3</td>
</tr>
<tr>
<td>Ячейка 2-1</td><td>Ячейка 2-2</td><td>Ячейка 2-3</td>
</tr>
</table>

В открывающий тег table я добавил атрибут border и присвоил ему значение 1 для того, чтобы на странице в браузере были видны границы ячеек. По умолчанию этот атрибут равен 0. Результат:

Столбец 1	Столбец 2	Столбец 3
Ячейка 1-1	Ячейка 1-2	Ячейка 1-3
Ячейка 2-1	Ячейка 2-2	Ячейка 2-3

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

Текст, который необходимо поместить внутрь ячеек, заключать в блочные теги необязательно, но, если текст большой, его можно разбить на абзацы, применив тег <p>. Если понадобиться как-то оформить вставляемый текст, то можно использовать теги оформления.

Кроме текста мы можем помещать в ячейки картинки с помощью тега <img>:

<td><img src=»image.jpg» alt=»картинка в ячейке»></td>

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

При создании таблиц необходимо учитывать некоторые правила:

• для создания таблицы используется только тег <table>;
• тег <tr> может находиться только внутри тега <table>;
• теги <td> и <th> могут находиться только внутри тега <tr>, любое другое содержимое тега <tr> игнорируется браузером;
• содержимое таблицы(текст или картинки) может находиться только в тегах <td> и <th>;
• ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал &nbsp;);
• таблица относится к блочным элементам web-страницы;
• размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
• между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
• текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
• границы вокруг таблицы и ее ячеек по умолчанию не рисуются.

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке . Например, если в таблице 3 колонки с ячейками , и мы объединяем первую и вторую ячейку, то всего внутри тега
, определяющего данную строку будет 2 элемента , первый из них будет содержать атрибут colspan=»2″

Колонтитулы и подпись в HTML таблицах

HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.

Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.

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

Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway

Характеристика	SUTA 09H 6R	SUTA 09HR6R	SUTA 15H 5R
Наличие	+	+	+
Мощность двигателя	0,9 (90 л.с.)	0,9 (90 л.с.)	1,5 (90 л.с.)
Топливо	бензин	бензин	дизель
Норма токсичности	Евро-6	Евро-6	Евро-5

Google Диск

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

Заходите в свою почту на gmail.com и в категории «Сервисы» выбираете раздел «Диск».

Далее в верхнем левом углу нажимаете кнопку «Создать» и в ней кнопку «Таблица».

Открывается знакомый всем интерфейс в excel. Сюда вам и нужно будет ввести данные.

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

Даете название, если это необходимо.

И просто копируете ее из появившегося окна.

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

Чтобы распечатать созданный вами документ нажмите вкладку «Файл» и выберите «Печать».

Яндекс Диск

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

С помощь «Диска» и без установки дополнительных программ можно создавать красивые таблицы как в Word или том же Excel.

Для начала необходимо войти в Яндекс Диск, ввести данные почты и пароль, затем кликнуть на кнопку «Создать» и теперь выбрать программу.

О экселе я уже рассказал, теперь давайте поработаем с вордом. Откроется окно, так в стандартной программе Microsoft Word на компьютере.

Далее в панели задач нужно открыть вкладку «Вставка». Вы увидите много инструментов для работы, чтобы создать таблицу необходимо найти вкладку «Таблицы». Открывается окно, и на выбор можно создать таблицу по определённому количеству ячеек. Не переживайте, далее вы сможете добавить строки и столбцы, если это будет необходимо.

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

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

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

Определение и использование

Тег <table> определяет таблицу HTML.

Таблица HTML состоит из элемента <table> и одного или нескольких <tr>,
<th>, и <td> элементов.

Элемент <tr> определяет строку таблицы, элемент <th> определяет заголовок таблицы, а элемент <td> определяет ячейку таблицы.

Более сложная HTML-таблица может также включать <caption>, <col>, <colgroup>, <thead>,
<tfoot>, и <tbody> элементы.

Примечание: Таблицы не должны использоваться для макета страницы!
Исторически сложилось так, что некоторые веб-авторы имеют неиспользуемые таблицы в HTML как способ управления их макета страницы. Однако существуют различные альтернативы использованию HTML-таблиц для макета, в первую очередь с использованием CSS.