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

Просмотров: 509

Не рекомендуется использовать таблицы скопированные напрямую из 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>