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

Пример 

    

  • Таблица имеет видимую границу.
    • 

  • Таблица имеет четыре столбца.
    • 

  • Таблица имеет заголовки для каждого столбца.
    • 

  • Таблица имеет шесть строк.
    • 

  • В первой строке таблицы объединены третий и четвертый столбец.
    • 

  • В третьей строке таблицы объединены второй, третий и четвертый столбец.
    • 

  • Четвертая, пятая, и шестая строка таблицы объединена по первому столбцу.
    • 

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