Электронное приложение

Технология создания web - сайтов

HTML

 

Раздел 2. Язык гипертекстовой разметки HTML.

 
  Оглавление
§ 6. Структура html-документа. Теги и атрибуты.
§ 7. Создание моей первой странички.
§ 8. Форматирование текста.
§ 9. Списки.
§ 10. Простые таблицы.
§ 11. Сложные таблицы.
§ 12. Изображения и управления рисунками.
§ 13. Гиперссылки. Оформление гиперссылок.
§ 14. Формы.

Тест по теме «Язык гипертекстовой разметки HTML.

 

 

§ 11. Сложные таблицы.

Создание сложных таблиц

Простые таблицы — довольно большая редкость. Гораздо чаще встречаются сложные таблицы, в которых ячейки располагаются одновременно в нескольких соседних столбцах или строках.

Для объединения ячеек используют следующие атрибуты тега <TD>:

• colspan – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько столбцов.

Например, если нужно объединить ячейки двух столбцов, напишем <TD colspan = "2"> .

• rowspan – сообщает программе просмотра, что нужно раздвинуть клетку таблицы на несколько строк.

Например, <TD rowspan = "2">  растягивает клетку таблицы на две строки.

 К примеру нам надо создать вот такую таблицу:

Сложная таблица

Большая ячейка A Маленькая ячейка 1 Маленькая ячейка 2
Большая ячейка B

Если присмотреться, у нас таблица состоит из двух строк и трех столбцов.

Но, в первом столбце обе ячейки объединены в одну - это ячейка под названием  "Большая ячейка А"

А также в нижней строке объединены в одну еще две ячейки.

Вот фрагмент кода создания таблицы с различной шириной строк и столбцов. Атрибут border тега <TABLE> устанавливает ширину бордюра (рамки таблицы) и может принимать любое значение от 0 до 10. Ширина бордюра = 0 обозначает его отсутствие.

 

<TABLE border="4">
 <TBODY>
  <TR>
   <TD rowspan="2">Большая ячейка А</TD>
   <TD>Маленькая ячейка 1</TD>
   <TD>Маленькая ячейка 2</TD>
  </TR>
  <TR>
   <TD colspan="2"></TD>
  </TR>
 </TBODY>
</TABLE>

В первой строке мы описали три ячейки, причем первая ячейка как бы захватывает и вторую строку. Поэтому во второй строке мы должны были описать две ячейки (то есть два тега <TD>), но поскольку мы эти две ячейки объединили, во второй строке остался всего один тег <TD>.

Упражнение

Попытаемся создать таблицу следующего вида:


Таблица цветов



blue


green


red


pink


yellow


 

Вот фрагмент кода для данной таблицы:

<table width="80%">
<tbody>
<tr>
<td colspan="5" bgcolor="#8bfef7"> </td> 
</tr>      
<tr>        
<td colspan="5">
<h3 style="text-align: center;">Таблица цветов</h3></td> 
</tr>      
<tr>          
<td colspan="5" bgcolor="#8bfef7"><br /></td> 
</tr>
<tr>
<td width="30%"></td>
<td width="10%"><img src="" alt="" title="" align="ight" /> </td>
<td width="20%">blue</td>
<td width="20%" bgcolor="#0000ff"> </td>
<td width="30%"></td>
</tr>      
<tr>
<td></td>
<td><img src="" alt="" title="" align="ight" /></td>
<td>green</td>
<td bgcolor="#00ff00"> </td>
<td></td>
</tr>      
 /*** Остальные строки пишем аналогично   ***/
</tbody>
</table>

 

 


© Васильева Ю.В. Электронное приложение "Уроки сайтостроения"
© 2012 год.  При использовании материалов обязательна ссылка на владельца