Задание 8.

Таблицы на WEB-страницах

Таблица представляет собой достаточно сложную структуру, формируемую множеством элементов. Базовых элементов, из которых может быть составлена минимальная таблица – три.

Это <TABLE> - ограничивающий всю таблицу, <TR> - выделяющий строку (вкладывается в <TABLE>); <TD>-выделяющий ячейку (вкладывается в <TR>). Данные (текст, другие таблицы, изображения, гиперссылки) располагаются в контейнерах <td> </td>.

Простая таблица строится следующим образом

<table> Начало контейнера таблицы
<tr> Начало контейнера первой строки
<td> Начало контейнера первой ячейки первой строки
… Содержимое этой ячейки
</td> Конец контейнера первой ячейки первой строки
<td> Начало контейнера второй ячейки первой строки
… Содержимое этой ячейки
</td> Конец контейнера второй ячейки первой строки
<td> Начало контейнера третьей ячейки первой строки
… Содержимое этой ячейки
</td> Конец контейнера третьей ячейки первой строки
… Контейнеры других ячеек строки
</tr> Конец контейнера первой строки таблицы
<tr> Начало контейнера второй строки таблицы
… Далее аналогично
</tr> Конец контейнера последней строки таблицы
<table> Конец контейнера таблицы

Пример1.

 Таблица

№ Наименование Цена
1 Процессор Intel Core i7 14160

 

<tr> первая строка

        <td> 1 ячейка первой строки</td>

          . . .

</tr> конец первой строки

<tr> вторая строка

        <td> 1 ячейка второй строки</td>

         . . .

</tr> конец второй строки

Код страницы.

Пример2. Таблица с объединенными ячейками по горизонтали

Для объединения ячеек по горизонтали служит атрибут COLSPAN тега <TD>

Например: Необходимо  объединить по горизонтали 3 ячейки

<td colspan=3>  Содержимое объединенной ячейки  </td>

Таблица

  

Объединенная ячейка 1 строки
1 ячейка 2 строки  2 ячейка 2 строки
1 ячейка 3 строки 2 ячейка 3 строки

Фрагмент кода страницы.

 <table  border=1>

<tr>

<td colspan=2> Объединенная ячейка 1 строки </td>

</tr>

<tr>

<td>1 ячейка 2 строки </td>

<td> 2 ячейка 2 строки </td>

</tr>

 <tr>

 <td>1 ячейка 3 строки </td>

<td>2 ячейка 3 строки </td>

 </tr>

 </table>

Пример3. Таблица с объединенными ячейками по вертикали

Для объединения ячеек по вертикали служит атрибут ROWSPAN тега <TD>

Например: Необходимо  объединить по вертикали 3 ячейки

<td rowspan=3>  Содержимое объединенной ячейки  </td>

Таблица

 1 ячейка 1 строки 2 ячейка 1 строки
1 ячейка 2 строки
1 ячейка 3 строки 2 ячейка 3 строки

Фрагмент кода страницы.

<table border=1>

<tr>

<td rowspan=2>   1 ячейка 1 строки </td>

<td>2 ячейка 1 строки </td>

</tr>

 

<tr><td>1 ячейка 2 строки </td>

</tr>

<tr>

<td>1 ячейка 3 строки</td>

<td> 2 ячейка 3 строки  </td>

</tr>

</table>

Задания для выполнения:

Создать web-страницу tab.html, содержащую следующие таблицы