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