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

Как создать таблицу используя 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. Результат:

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

Текст, который необходимо поместить внутрь ячеек, заключать в блочные теги необязательно, но, если текст большой, его можно разбить на абзацы, применив тег <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) выводится полужирным шрифтом и выравнивается по центру;
• границы вокруг таблицы и ее ячеек по умолчанию не рисуются.

Атрибуты и свойства тега

К открывающему тегу <table> можно прописывать различные атрибуты.

1. Свойство align=»параметр» — задает выравнивание таблицы. Может принимать следующие значения:

• left — выравнивание по левому краю
• center — выравнивание по центру
• right — выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align=»center».

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

Например

2. Свойство background=»URL» — задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Пример

Преобразуется на странице в следующее:

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif

Обратите внимание на то, что в теге мы добавили style=»color:white;». Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor=»цвет» — задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border=»число» — задает толщину рамки таблицы. В предыдущих примерах мы указывали border=»1″, что означает толщина рамки — 1 пиксель.

5. Свойство bordercolor=»цвет» — задает цвет рамки. Если border=»0″, то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding=»число» — отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing=»число» — расстояние между ячейками в пикселях.

8. Свойство cols=»число» — число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame=»параметр» — как отображать границы вокруг таблицы. Может принимать следующие значения:

• void — не отрисовывать границы
• border — граница вокруг таблицы
• above — граница по верхнему краю таблицы
• below — граница снизу таблицы
• hsides — добавить только горизонтальные границы (сверху и снизу таблицы)
• vsides — рисовать только вертикальные границы (слева и справа от таблицы)
• rhs — граница только на правой стороне таблицы
• lhs — граница только на левой стороне таблицы

10. Свойство height=»число» — задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules=»параметр» — где отображать границы между ячейками. Может принимать следующие значения:

• all — линия рисуется вокруг каждой ячейки таблицы
• groups — линия отображается между группами, которые образуются тегами <thead>, <tfoot>, <tbody>, <colgroup> или <col>
• cols — линия отображается между колонками
• none — все границы скрываются
• rows — граница рисуется между строками таблицы, созданными через тег <tr>

12. Свойство width=»число» — задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class=»имя_класса» — можно указать имя класса, которому принадлежит таблица.

14. Свойство style=»стили» — стили можно задать индивидуально для каждой таблицы.

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

HTML Упражнения

HTML Теги таблицы

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов.

Вопросы для самоконтроля

• Для чего нужны HTML-таблицы?
• Какой тег определяет HTML-таблицу?
• Каким тегом определяется каждая строка HTML-таблицы?
• Каким тегом определяется каждый заголовок HTML-таблицы?
• Каким тегом определяется каждая ячейка с данными HTML-таблицы?
• Какие элементы могут содержать ячейки с данными HTML-таблицы?
• С помощью какого CSS-свойства можно добавить границу к HTML-таблице?
• С помощью какого CSS-свойства можно свернуть границы HTML-таблицы в одну линию?
• Как добавить внутренний отступ в ячейках HTML-таблицы?
• Как выровнять заголовки HTML-таблицы по левому краю?
• Как добавить интервал между границами HTML-таблицы?
• Как сделать ячейку, которая охватывает более одного столбца HTML-таблицы?
• Как сделать ячейку, которая охватывает более одной строки HTML-таблицы?
• Как добавить подпись к HTML-таблице?
• Где нужно вставить тег HTML-таблицы?
• Как определить специальный стиль для одной конкретной HTML-таблицы?

Картинки в HTML – шпаргалка для новичков

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

При создании веб-сайтов чаще всего используют графические форматы PNG, GIF и JPEG, а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop, обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

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

<img src=”image.png”>

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

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера «без картинок». Добавляется он с помощью атрибута alt тега <img>.

Пример добавления альтернативного текста к графическому файлу:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Альтернативный текст</title>
</head>
<body>
<p><img src="images/example.png" alt="Альтернативный текст"></p>
</body>
</html>

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

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

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

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Например:

<img src=”example.png” width=”60” height=”40”>

или

<img src=”example.png” width=”50%” height=”10%”>

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

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

Как и ко многим тегам HTML, к применим атрибут align, который выполняет выравнивание изображения:

<img src=”example.png” align=”top”> — картинка располагается выше текста;

<img src=”example.png” align=”bottom”> — картинка располагается ниже текста;

<img src=”example.png” align=”left”> — картинка располагается слева от текста;

<img src=”example.png” align=”right”> — картинка располагается справа от текста.

В HTML для создания ссылки используется тег <a>:

<a href=”адрес вашей ссылки”>Имя ссылки</a>

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

<a href=”адрес ссылки”><img src=”адрес картинки”></a>

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

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx”, где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

<html>
<head><title>Страница с фоновой картинкой</head></title>
<body background=”image.jpg”>
<h2> Фон с текстом. </h2>
</body>
</html>

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

Желаем удачи!

Office.Live — программа для создания и редактирования таблиц

Данный сервис от компании Microsoft даёт возможность получить доступ к возможностям MS Office онлайн, причём совершенно бесплатно. В частности, вы можете воспользоваться функционалом сетевого редактора таблиц MS Excel, позволяющего создавать, редактировать и сохранять таблицы онлайн в популярных форматах данного редактора (xls, xlsx, xml и других).

1. Для работы с редактором перейдите на указанный ресурс https://office.live.com/start/Excel.aspx.
2. Выберите «Войти с помощью учётной записи Microsoft».
3. И создайте учётную запись (или воспользуйтесь учётными данными вашего аккаунта в Skype).
4. Далее вам откроется экран базовых шаблонов для создания таблицы excel. Нажмите на «Новая книга», и вы перейдёт в режим создания и редактирования вашей таблицы.
5. Для сохранения полученного результата нажмите на вкладку «Файл» — «Сохранить как» — «Скачать копию».

Создаём таблицу в Excel Online

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим  выравнивание по центру, по середине.

 <TR ALIGN="CENTER" VALIGN=”MIDDLE”> 
 

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

 <HTML>
<HEAD>
<TITLE>Телефонный справочник </TITLE>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<TABLE BORDER=1 BorderCOLOR=”#006600” width="400" BGCOLOR="#FFFFCC">
<TR BGCOLOR=”#99CC33” HEIGHT="50" VALIGN="MIDDLE" ALIGN="CENTER">
<TD WIDTH="50">№</TD>
<TD>Фамилия</TD>
<TD>Номер телефона</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>1</TD>
<TD>Фрося Бурлакова</TD>
<TD ALIGN="CENTER">8-952-987-13-20</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>2</TD>
<TD>Иван Петров</TD>
<TD ALIGN="CENTER">8-918-964-70-11</TD>
</TR>
<TR>
<TD ALIGN="CENTER" BGCOLOR=”#FFFF99”>3</TD>
<TD>Афоня Ивлев</TD>
<TD ALIGN="CENTER">8-961-594-12-45</TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML> 
 

В браузере увидим:

Выравнивание текста

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

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства :

• top: текст выравнивается по верхней границе ячейки
• middle: выравнивает текст по центру (значение по умолчанию)
• bottom: текст выравнивается по нижней границе ячейки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th class="test1">Имя</th><th class="test2">Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

More Examples

How to add collapsed borders to a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;  border-collapse: collapse;}</style></head><body><table>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table></body></html>

How to right-align a table (with CSS):

<table style=»float:right»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to center-align a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;}table.center {  margin-left: auto;  
margin-right: auto;}</style></head><body><table
class=»center»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to add background-color to a table (with CSS):

<table style=»background-color:#00FF00″>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to add padding to a table (with CSS):

<html><head><style>table, th, td {  border: 1px solid
black;}th, td {  padding: 10px;}</style></head><body><table>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table></body></html>

How to set table width (with CSS):

<table style=»width:400px»>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

How to create table headers:

How to create a table with a caption:

<table> 
<caption>Monthly savings</caption>  <tr>   
<th>Month</th>    <th>Savings</th>  </tr> 
<tr>    <td>January</td>   
<td>$100</td>  </tr>  <tr>   
<td>February</td>    <td>$80</td>  </tr>
</table>

Office.live.com – удобный сетевой офис от Майкрософт, включающий в себя редактор таблиц Excel

Сервис office.live.com (также известный как Office 365) — это бесплатный офисный пакет от компании Майкрософт, предлагаемый пользователю онлайн и совершенно бесплатно. В его комплектацию включён и функционал MS Excel, позволяя легко создавать и редактировать электронные таблицы онлайн.

Для создания таблицы на этом сервисе необходимо:

1. Перейдите на ресурс www.office.com и нажмите на «Вход».
2. Зарегистрируйтесь (при необходимости создайте свою учётную запись).
3. Выберите веб-приложение «Excel» — «Новая книга».
4. Начните работать.

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

На основе данной сетевой версии Майкрософт Офис работают сервисы по работе с таблицами Яндекса и Мейл.Ру. К примеру, на сайте Яндекс.Ру нужно перейти в Яндекс. Диск, там нажать на «Создать» и выбрать «Таблицу».

Яндекс Диск

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

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

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

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

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

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

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

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

Создание таблицы в HTML

Рассмотрим теги для создания таблицы:

1
2
3
4
5

<table>
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:
Добавим границу для таблицы — атрибут :

1
2
3
4
5

<table border="1">
	<tr>
		<td> содержание <td>
	<tr>
<table>

Результат:

Создания таблицы начинается с тега (от англ. «таблица»). Тег служит для создания строки. В строке располагаются ячейки — тег . Завершается таблица закрывающим тегом

Или пример таблицы посложнее:

Атрибуты тега TABLE

Важно: Для ячеек-заголовка таблицы используется тег вместо. Браузер размещает содержимое таких ячеек по центру и делает шрифт полужирным

Атрибуты тега TD или TH — ячейки

Важно:

• Тег служит для создания заголовка таблицы
• Для группировки заголовочных ячеек используется тег
• Для группировки основного содержимого таблицы используется тег
• Тег определяет нижнюю часть таблицы

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

Пример: Создать «каркас» таблицы со всеми тегами группировки

Выполнение:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table  border="1">
<caption>таблица<caption>
<thead>
	<tr>
	<th>Заголовок 1<th><th>3аголовок 2<th>
	<tr>
<thead>
<tbody>
	<tr>
	<td>содержимое<td><td>содержимое<td>
	<tr>
<tbody>
<tfoot>
...
<tfoot>
<table>

Лабораторная работа №1: Создайте таблицу по образцу. У таблицы должен быть заголовок и области для группировки (thead — 1-я строка таблицы, tbody — 2-я и 3-я строки таблицы, tfoot — 4-я строка таблицы).

Важно помнить!

Теги <thead> и <tfoot> нужны не всегда. Бывают таблицы без шапки и подвала.

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

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

Пример:

В таблице выше шесть строк, каждая из которых содержит три ячейки. Здесь нет важных для смысла признаков, по которым можно сгруппировать содержимое таблицы. Поэтому будет достаточно тега <caption> (придумаем его и скроем) и тега <tbody>, а вот теги <thead> и <tfoot> можно опустить.

EtherCalc — открывает файлы .xlsx, .xlsm и .xls

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

1. Для работы с данным сервисом выполните переход на него https://ethercalc.org/.
2. Нажмите на кнопку «Create Spreadsheet» (создать электронную таблицу).
3. Вы перейдёте в режим редактирования, и сможете создать нужную вам таблицу.
4. Для сохранения конечного документа нажмите на изображение с дискеткой слева, выберите формат сохранения, и загрузите таблицу к себе на ПК.

Рабочее окно сервиса «EtherCalc»

Лучшие конструкторы таблиц HTML

1. apsolyamov.ru — простой инструмент для создания таблиц. Есть опция объединения ячеек, но невозможно задать цвет.
2. c-wd.ru — русскоязычный сайт, где можно создавать сложные таблицы с объединенными ячейками, задавать стили в «конструкторе стилей» — цвета границ и ячеек, отступы, толщину границ, цвет строки при наведении, размер и цвет текста. Дополнительно можно настроить выравнивание, адаптивность для мобильных устройств, изменить курсор.

   Заголовок	Заголовок	Заголовок	Заголовок
   cell1_1	cell2_1	cell3_1	cell4_1
   cell1_2	cell2_2	cell3_2	cell4_2
   cell1_3	cell2_3	cell3_3
   cell1_4	cell2_4	cell3_4	cell4_4

3. divtable.com — удобный в использовании, множество настроек, возможность выбрать тип таблицы — div или table. В разделе сайта «Создание стилизованной таблицы) вы можете выбрать шаблон, изменить цвета, задать нумерацию в футере: