Делаем сайт – таблицы. Урок HTML – 2

Делаем сайт – таблицы. Урок HTML – 2

Делаем сайт – таблицы. Урок HTML – 2

Делаем сайт – таблицы. Урок HTML – 2

Создавать таблицу в HTML придется, если вы новичок , то без нее никуда, ваш текст, картинки и меню должны быть на своих местах, а не в одну строку. Кроме того, если собираетесь нарисовать свой шаблон сайта и затем разрезать его в фотошопе, то придется немного поразбираться в таблицах.


Таблица начинается и заканчивается тегом <table> </table> — закрывающий тег со слешем, (теги можно писать и строчными буквами, и прописными, например <TABLE></table> — это не ошибка).

Теперь вы можете легко определить, где начало, а где конец таблицы…если конечно нет вложенных таблиц.

У любой таблицы есть свои параметры и записываются они после слова <table >, делаем пробел и начинаем писать внутри тега. Например <table align=center >, главное не ставить пробелов перед словом table, если нужно прописать больше параметров отделяем их пробелами.

Перечислим параметры таблицы.
1. Выравнивание по горизонтали: align=center, align=right, align=left Все эти параметры отвечают за выравнивание всей таблицы по горизонтали (по центру, по правому краю страницы, по левому краю страницы) Очень полезный тег, таблица сбившаяся влево (по умолчанию) смотрится плохо.
2. Выравнивание по вертикали: valign=top — выравнивание по верхнему краю страницы, чтобы таблица не оказывалась в центре; valign=bottom – по нижнему краю страницы, никогда не встречал; valign=center – по центру, тоже крайне редко применяется.
3. Ширина таблицы: Width – измеряется в процентах, пикселях, точках. Например: Width=800px или Width=90%. Ошибка – Width=870
4. Высота таблицы: Height – единицы измерении те же, запоминать этот параметр наизусть не стоит, поработаете само запомнится. Пример: Height=90% — если параметр valign=top в низу страницы будет 10% пустого места.
5. bgcolor – цвет фона таблицы – устанавливается для всей таблицы сразу, но можно отдельно указать и цвета ячеек. Цвет указывается в формате RGB – числа от 000000 до FFFFFF – каждые два числа кодируют прозрачность определенного цвета (красного, зеленого или голубого), числа можно подбирать методом тыка, но можно и в Adobe Photoshop или воспользоваться таблицами цветов, или специальными программками.
6. background – устанавливает фон таблицы в виде рисунка. Вы должны указать путь к рисунку, кстати, поместите рисунок в папку images, которая находится (должна находиться) в папке с вашим сайтом. Пример: background=images/fon-table.jpg проанализируем – здесь указан относительный путь к вашему рисунку с расширением .jpg Пример абсолютного пути: background=http://vash-sait.narod.ru/images/fon-table.jpg легко видеть, что тут неувязочка – вы не знаете как называется ваш сайт и поэтому первый вариант указания пути вам подходит, а второй нет, когда вы выложите сайт все будет работать, недостающая часть адреса будет добавляться автоматически. Обращаю ваше внимание, что никаких русских названий папок и файлов.
7. border – совсем забыл – рамка или границы, border=1 – цифра указывает толщину линии рамки.
8. cellspacing – расстояние между границами ячеек таблицы. Пример: cellspacing=0 – расстояние между границами ячеек ноль пикселей.
9. cellpadding – расстояние между границами ячеек таблицы и содержимым этих ячеек. Пример: cellpadding=0 – расстояние между границами ячеек таблицы и содержимым этих ячеек ноль пикселей.
10. Пример тега со всеми параметрами <table align=center valign=top Width=800px Height=90% bgcolor=003300 background=images/fon-table.jpg cellspacing=0 cellpadding=0 border=1 ></table> Как вы видите никаких лишних пробелов до знака равно (=) и после. Язык HTML терпимо относится к ошибкам, поэтому некоторые придется искать самостоятельно.

Внутри таблицы находятся строки <tr></tr> — теги тоже парные, они находятся внутри таблицы.
Пример: <table align=center valign=top Width=800px Height=90% bgcolor=003300 background=images/fon-table.jpg cellspacing=0 cellpadding=0 ><tr></tr> </table> — это таблица внутри которой всего одна строка.
А это таблица с двумя строками.

<table align=center valign=top Width=800px Height=90% bgcolor=003300 background=images/fon-table.jpg cellspacing=0 cellpadding=0 border=1 ><tr></tr> <tr></tr> </table>

Так разобраться тяжеловато, попробуем просто расположить теги чуть по другому.

<table align=center valign=top Width=800px Height=90%
bgcolor=003300 background=images/fon-table.jpg cellspacing=0 cellpadding=0 border=1 >
<tr>
</tr>
<tr>
</tr>
</table>

Это все еще не полная таблица, т.к. внутри строк содержатся ячейки, допустим таблица состоит из трех строк, в первой строке одна ячейка, во второй три, и в третьей тоже одна ячейка. Давайте попробуем так сделать, только сначала познакомимся с тегами ячеек и их параметрами.

Ячейка <td></td> тег парный, внутри тега уже помещается текст, ячейке идут одна за одной в каждой строке отдельно.

Пример с ошибкой:
<table align=center valign=top Width=800px Height=90% bgcolor=003300 background=images/fon-table.jpg cellspacing=0 cellpadding=0 border=1 >
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td>
</tr>
</table>

Ошибка №1 – в первой строке таблицы сайта всего одна ячейка, а во второй их три, если мы хотели, чтобы одна ячейка растягивалась и по длине была равна трем ячейкам второй строки, то нам придется добавить параметр к тегу <td> первой строки.
Ошибка №2 – мы не указали тега выравнивания для ячеек, текст в таких ячейках будет по центру, и если ячейка высотой 500px – 500 пикселей, то можете себе представить как будет выглядеть текст находящийся посередине, представьте газету весь текст которой выравнивается от центра.
Ошибка №3 — мы не указали длину и высоту ячеек — в таком случае высота, и ширина будут определяться содержимым.

Хотя это все не проблема, работать все будет – только криво :)

Перечисли параметры ячейки:
Дело в том, что параметры таблицы схожи по значению с параметрами ячейки (исключение пункт 9 и 10), только применяются к определенной ячейке. Рассмотрим дополнительные.
1. Colspan – параметр объединения ячеек по горизонтали. Пример: Colspan=2 эта запись означает, что ячейка растягивается по горизонтали на две ячейки.
2. Rowspan – параметр объединения ячеек по вертикали. Пример: Rowspan=2 эта запись означает, что ячейка растягивается по вертикали.

Теперь зная параметры объединения ячеек, просто добавляем их к тем ячейкам, которые нужно растянуть.
Пример с ошибкой:
<table align=center valign=top Width=800px Height=90% bgcolor=003300 background=images/fon-table.jpg cellspacing=0 cellpadding=0 border=1 >
<tr>
<td Colspan=3 Width=800px Height=90px>1</td>
</tr>
<tr>
<td Width=150px Height=80%>1</td><td Width=500px
Height=80%>2</td><td Width=150px
Height=80%>3</td>
</tr>
<tr>
<td Colspan=3 Width=800px Height=90px >1</td>
</tr>
</table>

И добавляем теги выравнивания….

Попробуйте закрепить, просто создайте таблицы с другими
характеристиками – например с тремя ячейками в первой строке, первая ячейка растянута на три вниз (Rowspan), в других строках по две ячейки.

Я надеюсь вы обратили внимание на то, что я указал параметры длины и ширины ячеек в таблице, если вы так не будете делать высчитывая длину строки суммируя длины всех ячеек, а так же высоту, у вас будет кривой шаблон – рисунок будет по центру ячейки с непонятными размерами.
И еще вы должны определиться какие рисунки у вас будут фоном, бэкграундом, а какие просто вставлены. Дело в том, что бэкграунды – рисунки фон могут дублироваться, а если вы не хотите чтобы они дублировались нужно жестко в пикселях указывать длину и ширину этих ячеек, но помните что все ячейки взаимосвязаны – изменяете в одной, посмотрите длину и ширину других ячеек – все правильно? Обращаю ваше внимание, что если рисунок является фоном ячейки или таблицы, он не будет реагировать на добавление текста в ячейку смещением вниз.


Удачно поработать над сайтом – советую прочесть и другие статьи по теме создания сайтов.

И не бойтесь задавать вопросы.


Понравилась статья?
Закажи бесплатную подписку!

Сообщения по теме:

  • Как сделать сайт и быть на нем админом
  • Делаем сайт — как вставить картинки. Урок HTML – 3
  • Делаем сайт — текст — Уроки HTML — 5

  • Метки: , , ,

    Комментарии (8)

    1. жека 18.08.2010 #

      а как сделать таблицу, что бы она меняла свой размер в диапазоне, например ширена от 800px до 80%???

    2. жека 18.08.2010 #

      о! — нашел, в css:

      min-width: 800px;
      max-width: 80%;

    3. Северяночка 25.06.2013 #

      Как нарисовать таблицу «круги в круге» и в них писать? т.е. внутри маленький круг, дальше средний все это в третьем большом круге да еще в них и писать… Жду…

    4. admin 26.06.2013 #

      Северяночка, наверное только если делать таблицу в таблице а их фоном рисунки с кругами. Такими вопросами не задавался.

    5. Александр 09.03.2015 #

      Как понимаю сайт на вордпрессе работает. А в качестве шаблона можно свой использовать или надо выбирать из предлагаемых вордпрессом?

    6. admin 09.03.2015 #

      Александр, этот сайт да и шаблон можно выбирать любой из бесплатных или заказывать свой.
      Цены на шаблоны разные, но с руками людей мало.

    7. Daria 17.12.2015 #

      я вот вместо таблицы зашла на сайт где надо загрузить картинку и делается ссылка, и там есть параметры HTML код.. и там написано всё про высоту и т.д.. так можно же?

    8. admin 18.12.2015 #

      Daria, различие в том, что те картинки хранятся до тех пор пока на них кто-то смотрит, а если смотрят очень редко, то их удаляют.
      Поэтому можно и так и так, но обычно делают размещая все у себя на сайте.

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

    

    0.47MB/0.00042 sec