Как сделать HTML таблицу в Blogger

HTML-таблицы на свои страницы.

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

Следующий код для записи в режиме html 

<div class="table"> <table style="white-space: nowrap;"> <thead> <tr> <th>No</th> <th>Раздел_1</th> <th>Раздел_2</th> <th>Раздел_3</th> <th>Раздел_4</th> <th>Раздел_5</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Данные_1</td> <td>Данные_2</td> <td>90</td> <td>96</td> <td>99</td> </tr> <tr> <td>2</td> <td>Информация</td> <td>Информация_1</td> <td>95</td> <td>98</td> <td>99</td> </tr> <tr> <td>3</td> <td>Колонка</td> <td>Колонка_1</td> <td>90</td> <td>93</td> <td>89</td> </tr> </tbody> </table> </div> <style> .table { display: block; overflow-y: hidden; overflow-x: auto; scroll-behavior: smooth; } .table thead { display: table-header-group; vertical-align: middle; border-color: inherit; color: white; background: darkcyan; } tr { display: table-row; vertical-align: inherit; border-color: inherit; } table th { padding: 16px; text-align: inherit; border-bottom: 1px solid black; color:white!important; } tbody { display: table-row-group; vertical-align: middle; border-color: inherit; } table:not(.tr-caption-container) { min-width: 100%; border-radius: 3px; } </style>

No	Раздел_1	Раздел_2	Раздел_3	Раздел_4	Раздел_5
1	Данные_1	Данные_2	90	96	99
2	Информация	Информация_1	95	98	99
3	Колонка	Колонка_1	90	93	89

Другой вариант HTML таблицы

<div class="table-container"> <h2 class="table-heading">Пример HTML таблицы 2</h2> <table style="white-space: nowrap;"> <thead> <tr> <th>Имя</th> <th>Фамилия</th> <th>Телефон</th> </tr> </thead> <tbody> <tr> <td data-heading="Имя">Саша</td> <td data-heading="Фамилия">Пушкин</td> <td data-heading="Телефон">+7</td> </tr> <tr> <td data-heading="Имя">Другое имя</td> <td data-heading="Фамилия">Другая фамилия</td> <td data-heading="Телефон">+8</td> </tr> <tr> <td data-heading="Имя">Имя_1</td> <td data-heading="Фамилия">Фамилия_1</td> <td data-heading="Телефон">+9</td> </tr> </tbody> </table> </div> <style> .table-container { font-family: system-ui; } .table-container table { width: 100%; background: #fff; color: #222; box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4); border-collapse: collapse; } .table-container h2.table-heading { text-align: center; text-transform: uppercase; font-size: 24px; margin-bottom: 32px; border-bottom: 1px solid #eee; padding-bottom: 8px; } .table-container table { width: 100%; background: #fff; color: #222; padding: 24px; box-shadow: 0 4px 15px -8px rgba(0, 0, 0, 0.4); border-collapse: collapse; } .table-container table thead tr { background: #222; color: #fff; } .table-container table td, .table-container table th { padding: 16px 32px; text-align: center; } .table-container table tr { border-bottom: 1px solid #eee; } table thead th { color: white!important; } </style>

Пример HTML Таблицы 2

Имя	Фамилия	Телефон
Саша	Пушкин	+7
Другое имя	Другая фамилия	+8
Имя_1	Фамилия_1	+9

или так 

<table class="table-style">

  <caption>таблица</caption>

  <thead>

    <tr>

      <th width="20%">th_1</th>

      <th width="20%">th_2</th>

      <th width="60%">th_3</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>td_1_1</td>

      <td>td_1_2</td>

      <td>td_1_3</td>

    </tr>

    <tr>

      <td>td_2_1</td>

      <td>td_2_2</td>

      <td>td_2_3</td>

    </tr>

    <tr>

      <td colspan="3">td_3</td>

    </tr>

    <tr>

      <td rowspan="2">td_4_1</td>

      <td>td_4_2</td>

      <td>td_4_3</td>

    </tr>

    <tr>

      <td>td_5_2</td>

      <td>td_5_3</td>

    </tr>

  </tbody>

</table>

Таблица

th_1	th_2	th_3
td_1_1	td_1_2	td_1_3
td_2_1	td_2_2	td_2_3
td_3
td_4_1	td_4_2	td_4_3
	td_5_2	td_5_3