Таблицы html

Безимени-189Создавать сайты можно различными способами, но сегодня мы поговорим о наиболее востребованном варианте,  с помощью таблиц HTML. Этот способ наиболее востребован среди веб мастеров, благодаря, хорошей системе буквенных или цифровых обозначений персонального компьютера. В этой статье я постараюсь легко и доступно обучить вас создавать страницы сайта в таблицах и задавать ему определенные параметры. Такие параметры, как цвет, размер шрифта, переход с одной страницы на другую, так же вставлять различные картинки или гифки.

В первую очередь нужно объяснить вам из чего же состоит веб сайт, что в него входит. С помощью этого мы сможем создать веб сайт. Каждая таблица html представляет собой ящик который состоит из открывающегося и закрывающегося тегов html:

открывающейся таблицы <table>

закрывающейся таблицы </table>

Внутри этого ящика находятся ячейки таблиц html, которые задаются тэгами

<tr></tr>

и

<td></td>

Благодаря различным комбинациям мы будем задавать различные параметры для страниц.

<tr></tr> – задаёт количество горизонтальных рядов таблицы
(строчки).

<td></td> – задаёт количество вертикальных рядов таблицы
(столбцы).

Без этих тегов невозможно построить таблицы, поэтому при прописи каждого тега нужно быть очень внимательным, из-за любой мелочи может получиться ошибка и заданные вами параметры не будут работать.
Таблицы html, которая состоит из трёх строк и двух столбцов :

строчка1 столбец1 строчка1 столбец2
строчка 2 столбец1 строчка 2 столбец2
строчка 3 столбец1 строчка 3 столбец2

А вот как выглядит код HTML вышесказанного примера:

Вся наша работа начинается с открывающегося тега <table>, после этого мы в зависимости от того сколько нам нужно строк, задаем их их с помощью тегов <tr></tr>, в них мы будем прописывать количество столбцов <td></td>. Это не очень сложно, надеюсь вы поняли.

Создания веб сайта не означает, что к вам потянутся миллионы зрителей, но тем немее это уже кое-что, получается мы создали, что-то вроде ядра. А теперь нужно создать красивую обертку. Для этого нам понадобятся дополнительные параметры для необычного оформления. Нашей задачей будет увеличение посещаемости и заработка денег. Для начала создадим рамку таблицы html. Рамка вводится свойством border и его нужно прописать в тэге <table>:

Кроме этого, мы можем сделать нашу рамку цветной. В этом нам поможет аксессуар для таблиц html bordercolor:

Далее вставляем наши аксессуары в наш пример:

посмотреть результат

 

Дальше нам нужно выбрать наиболее подходящую высоту и ширину ячеек нашей таблицы html, в этом нам помогут аксессуары height и width. Свойства height задается всего для одной ячейки, а все остальные выровняются по этому размеру. К примеру, вы задаете высоту первой ячейки 100, а второй ячейки 170, то автоматически все ячейки окажутся с размером 170, так как им задана команда сравняться по наибольшему размеру. Свойства width задаётся для каждой ячейки в строке, а для следующих строк просто повторяется. Ширина ячеек, также как и высота уравниваются по самому большому размеру:

 посмотреть результат

 

Конкретно в этом примере мы задали команду высоты и ширины в пикселях, но есть еще один способ задать такую команду, только уже в процентах. Общая сумма высоты height также как и сумма ширины всех ячеек width не должна быть больше 100%. Например:

  посмотреть результат

 

Если мы сложим высоту строчек height всех строчек (25+45+30), то в общем получим 100%. Это же можно проделать со строчками width (60+40) и мы все равно получим 100%.

И в заключение, для своей таблицы html вы можете задать любую высоту и ширину, после того как вы это сделаете, все столбцы и ряды поделят данное пространство им поровну. Например:

   посмотреть результат

 

Когда я создавал первый веб-сайт, он был посвящен фан клубу Лондонского Арсенала. Сначала у меня не получалось и основная ошибка была в моей невнимательности. Поэтому хочется дать вам небольшой совет. Когда вы будете создавать свой сайт, будьте внимательны и следите за каждым тегом, за каждым знаком. Иногда из-за одной скобки компьютеру не поступает команда или поступает совсем другая команда и ваш сайт получится не тем, каким бы вы его хотели видеть.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

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

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика