Как сохранить свои сбережения? В чем лучше хранить деньги? Тайное, неизвестное, мистическое Юрий Болдырев-нам нужен порядочный и умный президент Как  удалить вирус с компьютера? Учимся удалять вирусы и очищать компьютер

Быстро строим сайт

Сайт в интернет

Ремонт ПК

Denver на WordPress

Почтовая рассылка

Ответы на вопросы

Построение таблиц в HTML


Посмотрите, что Вам напоминает сайт. Однозначно - таблицу. Вот с построения таблиц мы и придем к пониманию архитектуры сайта. Таблица это скелет сайта. Научившись свободно создавать таблицы вы сможете не только построить сайт табличным методом, но и, после небольшой практики, перейти без затруднения на DIV-верстку, использовать CSS и, даже, применять некоторые элементы PHP.

Пример №1: Построим таблицу из трех ячеек.

Тег table всегда начинает построение таблицы

< table border="3">< tr>< td>1-ячейка< /td> < td>2-ячейка< /td>< td>3-ячейка< /td> < /tr>< /table>



1-ячейка 2-ячейка 3-ячейка


< table border="3">- вычерчивает таблицу при ="0" очертания таблицы браузер не покажет а при ="10" будет толще
< tr>--открывает строку таблицы
< td>1-ячейка-открывает 1 столбец таблицы
< /td>-закрывает 1 столбец
< td>2-ячейка-открывает 2 столбец таблицы
< /td>-закрывает 2 столбец
< td>3-ячейка-открывает 3 столбец таблицы
< /td>-закрывает 3 столбец
< /tr>-закрывает строку
< /table>-закрывает таблицу



Пример №2: Построим таблицу из восьми ячеек.

Выравниваем атрибутом colspan ячейки по горизонтали

< table border="1"bgcolor="red">< tr> < td>1-ячейка< /td>< td>2-ячейка< /td> < td>3-ячейка< /td>< td>4-ячейка< /td>< /tr> < tr>< td>5-ячейка< /td> < td colspan="3">6-ячейка,7-ячейка,8-ячейка< /td> < /tr>< /table>



1-ячейка 2-ячейка 3-ячейка 4-ячейка
5-ячейка 6-ячейка,7-ячейка,8-ячейка


< table border="1"bgcolor="red">
< tr>
< td>-1-ячейка< /td>
< td>-2-ячейка< /td>
< td>-3-ячейка< /td>
< td>-4-ячейка< /td>
< /tr>
< tr>
< td>-5-ячейка< /td>
< td colspan="3">-6-ячейка,7-ячейка,8-ячейка>< /td>
< /tr>
< /table>



Я думаю понятно, что тегом < tr> можно до бесконечности открывать строки таблицы
а тегом < td> можно до бесконечности открывать столбцы таблицы.

Соответственно тег < /tr> закрывает строки таблицы.
а < /td> закрывает столбцы таблицы.

С помощью Атрибута colspan мы расширяем столбец по горизонтали ="3"до трех ячеек.



Для того, чтобы произвести интерпретацию HTML в то, что Вы видите на экране дисплея необходимо открыть программу БЛОКНОТ:

Теперь копируйте или переписывайте код HTML, который мы написали выше в БЛОКНОТ.(Для тех кто не знает эту программу, более подробно описано здесь Как работать в Блокноте)
Выбираем в меню блокнота:
-"файл-сохранить как"
Затем вводим имя файла под которым мы сохраняем нашу страницу-например-"Longbak.html"
-В "типе файла" устанавливаем-"все файлы"
-В "кодировке" выбираем-"ansi"
-Нажимаем кнопку-"сохранить"

Обратите внимание, что между скобкой "< и тегом" не должно быть расстояния,я этот пробел делаю для того, чтобы браузер не отобразил написанное как код.
Должно быть так <td>
А не так < td>

Пример №3: Строим таблицу из семи ячеек

Выравниваем атрибутом rowspan столбец по вертикали

< table border="1"bgcolor="red">< tr> < td rowspan="2">1-ячейка,5-ячейка< /td> < td>2-ячейка< /td>< td>3-ячейка< /td> < td>4-ячейка< /td>< /tr>< tr> < td>6-ячейка< /td>< td>7-ячейка< /td> < td>8-ячейка< /td>< /tr>< /table>



1-ячейка,5-ячейка 2-ячейка 3-ячейка 4-ячейка
6-ячейка 7-ячейка 8-ячейка


< table border="1"bgcolor="red">
< tr>
< td rowspan="2">1-ячейка,5-ячейка< /td>
< td>2-ячейка< /td>
< td>3-ячейка< /td>
< td>4-ячейка< /td>
< /tr>
< tr>
< td>6-ячейка< /td>
< td>7-ячейка< /td>
< td>8-ячейка< /td>
< /tr>
< /table>



С помощью Атрибута rowspan мы расширяем столбец по вертикали ="2" до двух ячеек.



Пример №4: Строим с помощью таблицы скелет сайта


Для наглядности построим таблицу на основе которой сверстан сайт, который вы в данный момент просматриваете.


1-ячейка,2-ячейка,3-ячейка
4-ячейка 5-ячейка 6-ячейка



< table border="1"bgcolor="red" width="600"height="600">
< tr>
< td colspan="3" width="600"height="80">1-ячейка,2-ячейка,3-ячейка
< /td>
< /tr>
< tr>
< td width="100"height="720">4-ячейка
< /td>
< td width="400"height="720">5-ячейка
< /td>
< td width="100"height="720">6-ячейка
< /td>
< /tr>
< /table>


Мы собрали стандартный трехколоночный сайт. У нас появилось еще несколько незнакомых для нас атрибутов:
width="600"- ширина всей таблицы
или width="100", width="400",width="100"-ширина отдельных столбцов
height="600"- высота всей таблицы
С помощью Атрибута colspan мы расширяем столбец по горизонтали ="3"до трех ячеек.

Для построения таблиц, применяется еще несколько тегов но я не буду расширять эту тему, думаю, остальное Вы постепенно освоите сами с помощью ТАБЛИЦА ОСНОВНЫХ ТЕГОВ.

На следующей страничке мы начнем строить сайт а пока, чтобы закрепить этот урок, попытайтесь самостоятельно построить несколько таблиц:
Задание№1-Постройте таблицу чтобы было 3-ячейки и 3-столбца.
Задание№2-Постройте таблицу в 5-ячеек и 5-столбцов.

Еще раз обратите внимание, что между скобкой "< и тегом" не должно быть расстояния,я этот пробел делаю для того, чтобы браузер не отобразил написанное как код.

Перейдем непосредственно к практике: СТРОИМ САЙТ-ТАБЛИЦУ



Пока человек не сдаётся,
он сильнее своей судьбы.

"inpropart"

Как заработать

Графики цен на нефть-золото-нефть-валюта Графики котировок на нефть-золото-серебро-валюту
Радио онлайн

Mультимедиа

Делаем сайт в CSS

Переводим сайт на PHP

Перевал Дятлова



Как повстречать партнера для интимных отношений. Секс знакомства. Как создать свой сайт бесплатно?  Как вылечить насморк? Как заработать в Интернете? Как быть здоровым? Как создать свой сайт бесплатно? Все ответы на вопросы КАК...? Как заработать в Интернете? Создание сайтов на заказ. <Буду писать про мелких предпринимателей.Обсуждать законы которые касаются малого бизнеса в России.