САМОУЧКА

Сайт для тех, кто хочет научиться

Наши публикации

<Предыдущая                              Следующая>

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

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

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

Пример

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

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

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

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

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

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

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

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

  <Предыдущая                              Следующая>

Последние добавления

HTML для новичков