Как сделать 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Данные_2909699
2ИнформацияИнформация_1959899
3КолонкаКолонка_1909389

Другой вариант 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

FL.ru – фриланс сайт удаленной работы. Поиск удаленной работы, фрилансеры.

Отправить комментарий

Новые Старые

hostia.net

rucenter

FL.ru – фриланс сайт удаленной работы. Поиск удаленной работы, фрилансеры.