ИЗОБРАЖЕНИЯ:
ЧБ
ЦВ
ТЕКСТ:
A
A
A
ФОН:
Ц
Ц
Ц
Ц
НАСТРОЙКИ:

Дополнительные настройки


КЕРНИНГ: СТАНДАРТНЫЙ СРЕДНИЙ БОЛЬШОЙ
ИНТЕРВАЛ: ОДИНАРНЫЙ ПОЛУТОРНЫЙ ДВОЙНОЙ
ОЗВУЧИВАНИЕ ТЕКСТА:
Версия для слабовидящих
Перейти на обычную версию

Не рекомендуется использовать таблицы скопированные напрямую из Word, т.к. ширина таблицы и ширина столбцов в редакторе могут быть заданы принудительно.

Пример кода таблицы, скопированной из Word:

<table width="623">
<thead>
<tr>
<td>
<p><strong>#</strong></p>
</td>
<td width="87">
<p><strong>Имя </strong></p>
</td>
<td width="153">
<p><strong>Фамилия </strong></p>
</td>
<td width="354">
<p><strong>Пользователь </strong></p>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<p><strong>1</strong></p>
</td>
<td width="87">
<p>Mark</p>
</td>
<td width="153">
<p>Otto</p>
</td>
<td width="354">
<p>@mdo</p>
</td>
</tr>
<tr>
<td>
<p><strong>2</strong></p>
</td>
<td width="87">
<p>Mark</p>
</td>
<td width="153">
<p>Otto</p>
</td>
<td width="354">
<p>@TwBootstrap</p>
</td>
</tr>
<tr>
<td>
<p><strong>3</strong></p>
</td>
<td width="87">
<p>Jacob</p>
</td>
<td width="153">
<p>Thornton</p>
</td>
<td width="354">
<p>@fat</p>
</td>
</tr>
<tr>
<td>
<p><strong>4</strong></p>
</td>
<td colspan="2" width="240">
<p>Larry the Bird</p>
</td>
<td width="354">
<p>@twitter</p>
</td>
</tr>
</tbody>
</table>

Шаблон поддерживает красивые и адаптивные таблицы Bootstrap.

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

Тег Описание
<table> Определяет содержимое таблицы.
<caption> Определяет наименование таблицы.
<th> Определяет заголовочную ячейку таблицы.
<tr> Определяет строку таблицы.
<td> Определяет ячейку данных таблицы.
<thead> Используется для содержания заголовка группы в таблице (шапка таблицы).
<tbody> Используется для содержания "тела" таблицы.
<tfoot> Используется для содержания "подвала" таблицы (футер).
<col> Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.
<colgroup> Определяет группу столбцов в таблице.

Простая таблица с использованием класса .table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Код таблицы:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица в стиле "зебра". Используются классы  .table и .table-striped

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Код таблицы:

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Таблица с границами. Используются классы .table и .table-bordered

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Код таблицы:

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@TwBootstrap</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
© 2022.
Для того, чтобы мы могли качественно предоставить Вам услуги, мы используем cookies, которые сохраняются на Вашем компьютере. Нажимая СОГЛАСЕН, Вы подтверждаете то, что Вы проинформированы об использовании cookies на нашем сайте. Отключить cookies Вы можете в настройках своего браузера.
СОГЛАСЕН