Читайте также:
|
Практическая работа №6.
Создание HTML документов с использованием таблиц.
Цель: Научиться создавать на web-страницах таблицы различных видов.
Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:
<tr> - строка таблицы
<td> - столбец таблицы
Объединение ячеек.
Размеры таблицы.
К тегу <tr> могут применятся точно такие же атрибуты как и к тегу <td>:
Тег <caption> позволяет озаглавить таблицу, подписать её каким либо текстом. Данный тег должен располагаться внутри таблицы сразу после <table>
Задание1.
<html><head><title>Таблица</title></head><body>
<table border="1"><tr>
<td>строка1 ячейка1</td><td>строка1 ячейка2</td><td>строка1 ячейка3</td></tr>
<tr><td>строка2 ячейка1</td><td colspan="2">строка2 ячейка2</td><td>строка2 ячейка3</td></tr>
<tr><td rowspan="3">строка3 ячейка1</td><td>строка3 ячейка2</td><td>строка3 ячейка3</td></tr>
<tr><td colspan="2">строка4 ячейка2</td></tr></table>
<center><table border="1" width="640" height="310"><caption>Образец таблицы</caption>
<tr><td rowspan="3" width="150">строка1 ячейка1</td><td height="30">строка1 ячейка2</td>
<td>строка1 ячейка3</td></tr>
<tr><td colspan="2" >строка2 ячейка2</td></tr>
<tr><td colspan="5" height="30"><center>Заголовок</center></td></tr>
<tr><td height="30" width="20%"><center>кнопка1</center></td>
<td width="20%"><center>кнопка2</center></td>
<td width="20%"><center>кнопка3</center></td>
<td width="20%"><center>кнопка4</center></td>
<td width="20%"><center>кнопка5</center></td></tr>
<tr><td valign="top">содержание:</td><td colspan="4"><center>куча текста</center></td></tr>
</table></center>
<center><table width="300" height="300"><tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td></tr>
<tr><td bgcolor="#c5ffa0">4</td><td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td></tr>
<tr><td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td></tr></table></center>
<table width="600" height="400" border="1"><tr><td colspan="2"><center>Заголовок</center></td></tr>
<tr><td valign="top">содержание:</td><td valign="top"><center><br>
В одну ячейку вложена целая таблица!!
<br><table width="200" height="200" cellspacing="0" cellpadding="15"><tr>
<td bgcolor="#c0e4ff" valign="top">1</td>
<td bgcolor="#c5ffa0" valign="top"><center>2</center></td>
<td bgcolor="#c0e4ff" align="right" valign="top">3</td></tr>
<tr><td bgcolor="#c5ffa0">4</td><td bgcolor="#ffa0c5"><center>5</center></td>
<td bgcolor="#c5ffa0" align="right">6</td></tr>
<tr><td bgcolor="#c0e4ff" valign="bottom">7</td>
<td bgcolor="#c5ffa0" valign="bottom"><center>8</center></td>
<td bgcolor="#c0e4ff" align="right" valign="bottom">9</td>
</tr></table></center></td></tr></table></center></body></html>
Самостоятельное задание.
Создать web-страничку по образцу (образец смотри на странице 3).
Контрольные вопросы.
<td>строка1 ячейка1</td>
<td width="20%">
<tr><td rowspan="3" width="150">строка1 ячейка1</td>
<td height="30">строка1 ячейка2</td>
<tr><td colspan="2" >строка2 ячейка2</td></tr>
<tr><td valign="top">
<td bgcolor="#c0e4ff" align="right" valign="top">3</td>
<td colspan="3" valign="top" bgcolor="#b2ff80">
<img src="6-2.gif" align="left" hspace="10" width="100" height="90" alt="Это моя фотка!!!" >
Дата добавления: 2015-07-16; просмотров: 57 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| Технико-экономическое сравнение фундаментов | | | Введение в метрологию |