AJAX загрузка
home

Большие объемы однородной информации лучше представлять пользователям в виде таблиц с данными.

Создание таблиц

Таблицы в HTML определяются с помощью тэга <table>.

Тэг <tr> позволяет создать в таблице строку, а тэг <td> добавить в эту строку ячейку с данными.

По умолчанию таблицы отображаются без границ. Для того, чтобы отобразить границу необходимо использовать атрибут border="1".

Обратите внимание: в ячейках таблиц может располагаться не только обычный текст, но и картинки, ссылки и другие таблицы.

Пример

<table border="1">
<tr>
<td>Россия</td>
<td>141</td>
</tr>
<tr>
<td>США</td>
<td>309</td>
</tr>
<tr>
<td>Китай</td>
<td>1338</td>
</tr>
<tr>
<td>Великобритания</td>
<td>61</td>
</tr>
</table>
Быстрый просмотр

Табличные заголовки

С помощью тэга <th> Вы можете создать табличный заголовок. Текст элемента th центрируется и выделяется жирным шрифтом.

Пример

<table border='1'>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
</table>
Быстрый просмотр

Растягивание ячеек

С помощью атрибута colspan Вы можете указать на сколько столбцов должна быть растянута указанная ячейка.

Пример

<table border="1">
<tr>
<td> Ячейка 1 </td>
<td> Ячейка 2 </td>
</tr>
<tr>
<td colspan="2"> Ячейка 3 растянутая на 2 столбца </td>
</tr>
</table>
Быстрый просмотр

С помощью атрибута rowspan Вы можете указать на сколько строк должна быть растянута указанная ячейка.

Пример

<table border="1">
<tr>
<td rowspan="2"> Ячейка 1 растянутая на две строки </td>
<td> Ячейка 2 </td>
</tr>
<tr>
<td> Ячейка 3 </td>
</tr>
</table>
Быстрый просмотр

Сделайте сами

Задание 1 создайте в редакторе следующую таблицу:

Пример

Страна ВВП на душу населения
(номинальное)
ВВП на душу населения
(по паритету покупательной способности)
США 47,132$ 47,123$
Франция 40,591 34,092$
Германия 40,512 35,930$
Россия 10,521 15,807$
Китай 4,520 7,518$

Задание 2 создайте в редакторе таблицу по следующему описанию:

Пример

  • Таблица имеет видимую границу.
  • Таблица имеет четыре столбца.
  • Таблица имеет заголовки для каждого столбца.
  • Таблица имеет шесть строк.
  • В первой строке таблицы объединены третий и четвертый столбец.
  • В третьей строке таблицы объединены второй, третий и четвертый столбец.
  • Четвертая, пятая, и шестая строка таблицы объединена по первому столбцу.

Обратите внимание: набивка таблицы может быть произвольной.