пятница, 11 ноября 2016 г.


тема:  Таблицы

Это ОЧЕНЬ ВАЖНАЯ тема. Этот раздел пожалуй самый сложный. Но пропускать его не следует.

Дело в том, что таблицы в HTML не похожи на традиционные таблицы с данными. Эти таблицы применяют для создания ДИЗАЙНА сайта (каркаса страницы), в котором уже размещается содержимое страницы.

Таблица описывается парным тегом <table> и </table>

Тег <table> говорит браузеру что начинается таблица, а </table> говорит о том что таблица заканчивается. Таким образом при создании таблицы пишем сразу 2 тега

<table>
</table>

Для создания строки в таблице используется парный тег <tr> </tr>

<table>
<tr></tr> 
</table>

Столбцы в HTML описываются с помощью тегов <td> и </td> , которые должны находиться между тегами <tr> и </tr> 

<table> 
<tr><td></td></tr> 
</table>

Данная таблица состоит из одной строки и одного столбца и будет выглядеть вот так:
ВНИМАНИЕ ВАЖНО. Если в таблице нет данных - то вы может и не увидите таблицу.
Для того чтобы увидеть контур таблицы, надо задать параметр таблицы border. По умолчанию он равен 0, поэтому саму таблицу без данных не видно. Вставим в тег таблицы значение border="1"

<table border="1" >

Также часто требуется задать размеры таблицы, для этого служат уже известные параметры WIDTH и HEIGHT. Эти параметры мы применяли в уроке по вставке картинки.

Например вот так:

<table border="1" width="300" height="250" > - это будет таблица шириной 300пикселей и высотой 150,

Пример:
Для закрепления давайте внесем изменения в наш HTML шаблон:

<html> 
<head> 
<title>Online обучение: HTML</title> 
</head> 
<body bgcolor="#00CCFF" text="#FFFF00"> 
<center> 
<table border="1" width="300" height="250" > 
<tr> 
<td> 
<font size="4"> <P>Я изучаю язык разметки (маркировки) гипертекста – HTML. Он мне нужен для создания персонального сайта.</P><font>
<font size="3"> <P>Это мой первый опыт по созданию интернет странички. Я хочу создавать свои сайты и получать пассивный доход в интернете. </P><font>
<td> 
<tr> 
</table> 
</center> 
</body> 
</html>

Рассмотрим следующие виды создания таблицы
Если таблица состоит из 1 строки и 3 столбцов, то вид ее будет вот такой:
И прописана она будет вот так:

<table>
<tr> <td> </td> <td> </td> <td> </td> </tr>
</table>

Если нам надо добавить еще одну строку в таблицу из 3 ячеек, то следует прописать вот такую таблицу:

<table>
<tr> <td> </td> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> <td> </td> </tr>
</table>

и выглядеть она будет вот так:
ВНИМАНИЕ ВАЖНО. Для описания таблицы обязательно используется именно такой порядок : сначала пишутся теги таблицы, затем теги строки, затем теги ячеек.







Автор: на
Рубрики:

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)