Это ОЧЕНЬ ВАЖНАЯ тема. Этот раздел пожалуй самый сложный. Но пропускать его не следует.
Дело в том, что таблицы в 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>
и выглядеть она будет вот так:
ВНИМАНИЕ ВАЖНО. Для описания таблицы обязательно используется именно такой порядок : сначала пишутся теги таблицы, затем теги строки, затем теги ячеек.
