Таблицы HTML
Мы прошли основы html и осталать последняя тема, таблицы html – самая важная и трудная. Не в коем случае не пропускайте ее. Таблицы html будут являться основой сайта.
Возможно, не все будет понятно с первого раза, так что настройтесь серьезно. И не надо пугаться, как говориться: глаза боятся, а руки делают.
Итак, приступаем к изучению таблиц html.
Почему же создание таблиц html – это такая важная тема? Все дело в том, что эти таблицы будут использоваться не для занесения в них данных, а для создания каркаса сайта, его дизайна.
То есть, сначала происходит создание html таблиц, которые являются скелетом сайта, а потом происходит наращивание графики и тому подобных вещей.
Итак, создание таблицы html начинается с написания тегов <table> </table>. Аналогично другим парным тегом, они обозначают начало и конец таблицы html.
Внутри тегов <table> </table> пишем пару тегов <tr> </tr>, это создание строки в таблице.
Получилось так:
<table>
<tr>
</tr>
</table>
Эта таблица html имеет одну строку, если нужно четыре строки пишем так:
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
Но любая таблица должна содержать ячейки, для этого нужно добавить столбцы, за них отвечают теги <td> </td> и пишутся они только между тегами <tr> </tr>
<table>
<tr> <td> </td> </tr>
</table>
Таблица html с одной ячейкой.
| Чтобы таблицу было видно, в ней нужно что-нибуть написать |
Теперь займемся созданием html таблицы с четырьмя ячейками.
<table>
<tr> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</table>
Готово. Две строки и два столбца, в итоге четыре ячейки. Помните о правилах вложенности.
| 1 ячейка | 2 ячейка |
| 3 ячейка | 4 ячейка |
Сначала пишутся теги таблицы - <table> </table>, затем теги строк - <tr> </tr>, затем теги столбцов или ячеек - <td> </td>. И только в такой последовательности.
Теги <tr> </tr> должны находиться между тегами <table> </table>, а теги <td> </td>, между тегами <tr> </tr>. И нельзя ничего путать, особенно <tr> с <td>.
А вот содержимое ячеек нужно писать между <td> </td>. Это тоже очень важный момент в создании html таблиц.
Теперь, когда мы написали код таблицы html, давайте заполним ячейки. Делаем это так:
<table>
<tr> <td>1 ячейка, строка 1</td> <td>2 ячейка, строка 1</td> </tr>
<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>
</table>
Наша таблица получится такой:
| 1 ячейка, строка 1 | 2 ячейка, строка 1 |
| 3 ячейка, строка 2 | 4 ячейка, строка 2 |
Сейчас, для закрепления материала, вставим html код таблицы на нашу страницу.
<html><head>
<title>Название страницы моего первого сайта</title>
</head>
<body text="#CC0000" bgcolor="#494949">
<center>
Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>
<br><br>
<a href="http://htmlsait.ru">
<img src="kartinka.jpg" width="184" height="110" title="Эмблема сайта" border="0">
</a>
<br><br>
<i>учимся выделять html текст курсивом</i>
<br>
<b>изучаем новые html теги текста</b>
<br><br>
<a href="http://htmlsait.ru">Создание сайта HTML</a>
<br><br>
<table>
<tr> <td>1 ячейка, строка 1</td> <td>2 ячейка, строка 1</td> </tr>
<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>
</table>
</center>
</body>
</html>
А теперь посмотрим, что получилось > создание таблицы html
Важно понимать, как создаются html таблицы, ведь придется использовать несколько таблиц на странице, и даже создавать одну таблицу внутри другой таблицы html.
Попробуем это сделать.
<table>
<tr> <td>
<table>
<tr> <td></td> <td></td> </tr>
<tr> <td></td> <td></td> </tr>
</table>
</td> <td>2 ячейка, строка 1</td> </tr>
<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>
</table>
|
| 2 ячейка, строка 1 | ||||
| 3 ячейка, строка 2 | 4 ячейка, строка 2 |
Возникает вопрос, почему не видно внутреннюю таблицу html? Все дело в том, что если в таблице нет данных, то ее не будет видно, а для того чтобы увидеть таблицу, нужно прописать параметр border="" в теге
| 2 ячейка, строка 1 | ||||
| 3 ячейка, строка 2 | 4 ячейка, строка 2 |
Ее html код такой:
<table border="1">
<tr> <td>
<table border="1">
<tr> <td>1 ячейка</td> <td>2 ячейка</td> </tr>
<tr> <td>3 ячейка</td> <td>4 ячейка</td> </tr>
</table>
</td> <td>2 ячейка, строка 1</td> </tr>
<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>
</table>
Таблицы html и изменение их размеров
Теперь поговорим о том, как задавать размер при создании html таблиц. Для этого вспомним параметры, изученные при вставке картинок html. Это width="" height="", ширина и высота соответственно.
Эти параметры нужно писать в теге <table>, а значение указывать в пиксилях, вот так:
<table width="120" height="90">
Этой командой мы указали, что таблица должна иметь размер 120 на 90 пикселей.
Параметры ширины и высоты можно задавать не только самой таблице, но также и ее ячейкам, для этого width="" height="" нужно прописывать в тегах изменяемых ячеек, то есть так:
<td width="70" height="50">
Это значит, что ячейка будет размером 70 на 50.
Также при создании html таблиц, можно одновременно задавать параметры и таблице и ее ячейкам.
Теперь к практике, задайте размеры нашей таблице и ее ячейкам например так:
<html>
<head>
<title>Название страницы моего первого сайта</title>
</head>
<body text="#CC0000" bgcolor="#494949">
<center>
Содержимое моего сайта.<br><font color="#00AA00">Я прохожу уроки создания сайта.</font>
<br><br>
<a href="http://htmlsait.ru">
<img src="kartinka.jpg" width="184" height="110" title="Эмблема сайта" border="0">
</a>
<br><br>
<i>учимся выделять html текст курсивом</i>
<br>
<b>изучаем новые html теги текста</b>
<br><br>
<a href="http://htmlsait.ru">Создание сайта HTML</a>
<br><br>
<table width="320" height="90" border="1">
<tr> <td width="20" height="90">1 ячейка, строка 1</td>
<td width="300" height="90">2 ячейка, строка 1</td> </tr>
<tr> <td>3 ячейка, строка 2</td> <td>4 ячейка, строка 2</td> </tr>
</table>
</center>
</body>
</html>
Должно получиться так > создание html таблиц
Далее будет рассказано, как применяются таблицы html.
Урок 8: таблицы в html, продолжение.
Урок 9: создание дизайна сайта.
Урок 10: создание сайта из 2-х страниц.