HTML -таблицы
Таблицы HTML позволяют веб-разработчикам упорядочивать данные в строки и столбцы.
Пример
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Определить HTML-таблицу
Таблица в HTML состоит из ячеек таблицы внутри строк и столбцов.
Пример
Простая HTML-таблица:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria
Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro
comercial Moctezuma</td>
<td>Francisco
Chang</td>
<td>Mexico</td>
</tr>
</table>
Ячейки таблицы
Каждая ячейка таблицы определяется
тегом a <td>и .</td>
td
обозначает табличные данные.
Все, что находится между <td>и </td>, является содержимым ячейки таблицы.
Пример
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Примечание: элементы данных таблицы являются контейнерами данных таблицы.
Они могут содержать все виды HTML-элементов; текст, изображения, списки, другие таблицы и т. д.
Строки таблицы
Каждая строка таблицы начинается с
<tr>и заканчивается </tr>тегом.
tr
обозначает строку таблицы.
Пример
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Вы можете иметь столько строк в таблице, сколько хотите, просто убедитесь, что количество ячеек одинаково в каждой строке.
Примечание. Бывают случаи, когда в одной строке может быть меньше или больше ячеек, чем в другой. Вы узнаете об этом в следующей главе.
Заголовки таблиц
Иногда вы хотите, чтобы ваши ячейки были заголовками, в этих случаях используйте
<th>тег вместо
<td>тега:
Пример
Пусть первая строка будет заголовками таблицы:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person
3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
По умолчанию текст в <th>элементах выделен жирным шрифтом и расположен по центру, но вы можете изменить это с помощью CSS.
HTML-упражнения
Теги таблицы HTML
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <caption> | Defines a table caption |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
Полный список всех доступных HTML-тегов см. в нашем Справочнике по HTML-тегам .