. Например, если вам нужно задать высоту строки таблицы, просто задайте высоту одной из ячеек, входящих в эту строку
. Если же вам нужно установить значение ширины строки, то нужно задать ширину каждой из ячеек, которые входят в эту строку
. А есть способ еще проще: задайте ширину таблицы - и получите ширину строки. Вобщем, используйте параметры width
и height
только для ячеек и самих таблиц. Это поможет вам писать более простой код и избегать запутанных ситуаций. И еще один совет - прежде чем создавать таблицы на html-странице, рисуйте их от руки, на бумажных листах, желательно с будущими размерами.Параметры width
и height
имеют числовое значение. Как правило - это пикселы или проценты. В первом случае размеры становятся абсолютными, а во втором - относительными.
Абсолютные размеры таблиц
Сначала поговорим об абсолютных размерах. Наиболее распространенная единица измерения абсолютных размеров в HTML
- пикселы. Один пиксел равен по размерам светящейся точке вашего монитора, из которых состоит весь дисплей. В HTML
для пикселов применяется сокращение - px. Например, запись 100px в html-коде, переводится на русский как 100 пикселов. А теперь небольшой вопрос: 100 пикселов - это много или мало? Для ответа на такие вопросы я советую скачать электронную линейку, которая позволит измерить любой объект на экране, а также визуально оценить величину любого размера. Она очень проста в использовании, так что вы без труда с ней разберетесь. Теперь я приведу пример задания ячейки с абсолютными размерами. Предположим у вас есть ячейка и вы хотите, чтобы ее размеры составляли ни много ни мало, а 300х100 (в таких записях сначала пишется ширина, а затем высота). Чтобы осуществить задуманное, нужно написать такой код:
А можно и так: | Здесь, как и во всем языке HTML
, не имеет значения порядок появления параметров тега, поэтому возможны оба варианта записи.
Теперь создадим таблицу шириной в 360 пикселов и высотой в 80 пикселов. Таблица будет состоять из двух строк и двух столбцов (т.е. будет включать в себя 4 ячейки). Строки будут иметь равную высоту, а ячейки - равную ширину. Посчитайте самостоятельно размеры отдельно взятой ячейки, а затем нарисуйте и образмерьте будущую таблицу. Пишем код, пока не задавая конкретных размеров:
Первая ячейка |
Вторая ячейка |
Третья ячейка |
Четвертая ячейка |
К слову,подобный код вы уже видели. Он был приведен в качестве примера на предыдущей странице, только там было три строки и три столбца, а здесь по 2 тех и других. Сейчас вы дополните этот несложный код размерными параметрами. Сначала попытайтесь сделать это самостоятельно, а уже затем смотрите на готовый код, приведенный ниже:
Первая ячейка |
Вторая ячейка |
Третья ячейка |
Четвертая ячейка |
В результате помещения этого кода в браузер, вы увидите подобную картинку. | Первая ячейка
| Вторая ячейка
|
| Третья ячейка
| Четвертая ячейка
|
Относительные размеры таблиц
Теперь перейдем к относительной единице измерения - процентам. Система относительных размеров является более гибкой. Потому что в этом случае размеры ячейки, или таблицы подстраиваются под размеры того элемента, в котором эта ячейка или таблица находится. Такой внешний элемент, содержащий в себе рассматриваемую ячейку или таблицу, называют еще родительским элементом
. Для ячейки родительским элементом всегда является таблица, включающая в себя эту ячейку. Для таблицы, расположенной в ячейке "cell" другой таблицы, родительским элементом будет ячейка "cell". Для таблицы, находящейся непосредственно в контейнере тега родительским элементом будет тело страницы
. Итак, если для ячейки/таблицы задан размер в процентах, браузер посчитает эти проценты от размера родительского элемента
. Если вы пока не поняли, о чем идет речь - не страшно: примеры помогут уловить суть.Пример первый. Предположим, таблица находится непосредственно в теле страницы. И параметр ширины таблицы следующий: width="50%"
. В такой ситуации ширина таблицы всегда будет равна половине ширины страницы
. На каком бы мониторе эта страница не была открыта. И как бы не менялись размеры окна браузера. Пример второй. Допустим задана таблица в 500 пикселов шириной. А ширина какой либо ячейки задана так: width="10%"
. В этом случае ширина ячейки составит 10% от ширины таблицы, т.е. ширина ячейки будет равна 50 пикселам. Но вот вы решили изменить ширину таблицы на 700 пикселов. Как только вы это сделаете, ширина ячейки автоматически изменится на 70 пикселов. Пример третий. Ширина таблицы составляет 70% от ширины страницы. А размер ячейки width="10%"
. В этом случае ширина таблицы подстроится под ширину окна браузера, как в первом примере. А ширина ячейки подстроится под ширину таблицы. Т.е. при растяжении/сжатии окна браузера по ширине, автоматически меняется не только ширина таблицы, но и ширина ячейки. А теперь создадим ту же самую таблицу, что была приведена чуть выше, но размеры ячеек сделаем относительными.
Первая ячейка |
Вторая ячейка |
Третья ячейка |
Четвертая ячейка |
Заметьте, что таблица получилась совершенно идентичной той, что была задана абсолютными размерами. Так сложилось вследствие того, что размеры самой таблицы остались абсолютными. Если бы и они были относительными, таблица меняла бы свои размеры по мере растяжения или сжатия окна браузера. Попробуйте в предыдущем коде задать относительные
размеры для тега , а затем поэкспериментируйте с размерами окна вашего браузера. Если вы видите результат, то думаю, что вы уловили разницу между абсолютными и относительными размерами для таблиц и их ячеек. Кстати, такие же системы задания размеров действуют и для других элементов HTML
. Например, для изображений. Работа с размерами - это, пожалуй, самое сложное при создании таблиц в HTML
. Тут нужна внимательность и безошибочность. Именно поэтому я советую сначала прорисовывать ваши таблицы на листе бумаги. Так вы сократите вероятность ошибки в несколько раз. Не поленитесь и уделите время самостоятельным экспериментам с таблицами и их размерами, ведь реальные знания образуются только в процессе практики. После этого приступайте к изучению свойств таблиц, о которых я расскажу на следующей странице.
Нам нужно установить ширину таблицы, но иногда нам нужно изменить ширину таблицы.
И нам нужно разобраться. как же менять ширину таблицы. Ширину таблицы можно менять в пикселях, либо в процентах...
Мы уже теперь займемся изменением ширины таблицы в html!
В прошлый раз мы сделали таблицу шириной 500 пикселей, с тремя столбцами и тремя строками!(помним про атрибут border="1 – который отвечает за бордюр)
Вот код этой таблицы;
Теперь, для того, чтобы понять, как изменять ширину таблицы, либо столбца, поменяем и добавим некоторые цифры в наш код
table width="500" – изменим на 599.
Данная страница построена на таблицах, и ширина текстового поля, т.е. где расположены данные слова равна 600 пикселям.
У нас получится:
|
Ширину стобца №2 сделаем 200 пикселей:
|
Ширину стобца №3 сделаем 299 пикселей:
|
И у нас получится такой код:
| |
|
|
|
|
|
|
|
|
Смотрим на нашу таблицу
Теперь, давайте изменим значение атрибута ширины наполовину = 50%.
Смотрим на нашу таблицу, которая составляет 50%.
Вот и всё, что я хотел вам рассказать про то, как измененить ширины таблицы. Теперь перейдем к высоте таблицы!
1. Что такое HTML таблицы и зачем они нужны?
html таблицы
- это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
2. Какие теги у html таблиц?
Теги
, задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
|
- строчка html таблицы
| - столбец (ячейка) html таблицы.
А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
|
- ячейка 1.1
|
- ячейка 1.2
|
- ячейка 1.3
|
- ячейка 2.1
|
- ячейка 2.2
|
- ячейка 2.3
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
3. Как задать фоновый цвет html таблиц?
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона"
.
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
bgcolor="цвет_фона"
>
|
- ячейка 1.1
|
- ячейка 1.2
|
- ячейка 1.3
|
- ячейка 2.1
|
- ячейка 2.2
|
- ячейка 2.3
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду
html таблицы, то тогда атрибут bgcolor="цвет_фона"
применяем к тегу :bgcolor="#FFFF00"
>
bgcolor="#0000FF"
>
1.1 |
1.2 |
1.3 |
2.1 |
2.2 |
2.3 |
|
В этом случае, атрибут номер ячейки
задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно
. Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега атрибут bgcolor="цвет_фона"
:
4. Как установить размер ширины и высоты ячеек html таблицы?
Итак, для того, что бы вручную установить ширину и высоту ячеек, используют атрибуты height и width. Их можно задать для всей таблицы, для одного ряда, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек).
height
- атрибут, устанавливающий высоту ячейки
width
- атрибут, задающий ширину ячейки
А теперь на примере:
Теперь объясню, почему мы задали высоту ячеек только один раз в каждой строке.
Если в ряду Вы задаете для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей. А ширину каждого ряда лучше всего задавать отдельно!
Вы можете задать высоту и ширину для всей таблицы. В этом случае все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им данные параметры персонально (в процентах от общей ширины (высоты) таблицы или пикселях).
Так же, очень часто приходится задавать высоту height и ширину width в процентах
:
| содержимое ячейки |
Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.
5. Как выровнять текст внутри html таблицы?
А теперь давайте разберемся, как выровнять текст в нашей html таблице по левому краю, по правому краю и по центру.
Делается это с помощью атрибута:
align=”left”
- выравнивает текст внутри html таблицы по левому краю
align=”center”
- выравнивает текст html таблицы по центру
align=”right”
- выравнивает текст внутри html таблицы по правому краю
Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом атрибут align принимать не может.
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
align="center"
>
align="left"
> 1x1 |
align="center"
>1.2 |
align="right"
> 1x3 |
align="left"
>2.1 |
align="center"
> 2x2 |
align="right"
>2.3 |
|
Прописав атрибут align="center"
в открытии , мы выровняли html таблицу по центру странички браузера.
Вот такой результат Вы получите в браузере:
А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top"
- содержание будет располагаться вверху ячейки
valign="middle"
- содержание будет располагаться по центру ячейки
valign="bottom"
- содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
valign="top"
> 1x1 |
1.2 |
valign="top"
> 1x3 |
valign="bottom"
>2.1 |
2x2 |
valign="bottom"
>2.3 |
|
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align
и valign
:
6. Как объединить ячейки и столбцы html таблицы?
В этой части нашей статьи мы поговорим об атрибутах colspan
и rowspan
.
colspan
- определяет количество столбцов, на которые распространяется данная ячейка
rowspan
- определяет количество рядов на которые распространяется данная ячейка
Значения colspan
и rowspan
могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).
Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:
Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.
С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».
А теперь, когда мы разобрались с параметром colspan
, давайте разберемся с параметром rowspan. Принцип действия тут тот же:
colspan="2"
> 1.1 |
1.2 |
2.1 |
2.2 |
|
Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях"
- устанавливает ширину рамки
bordercolor="цвет рамки"
- устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу добавляем атрибуты:
Теперь мы четко видим отступы между ячейками html таблицы и отступы от внутренних краев ячеек до текста. Следовательно, без проблем можем управлять этими отступами. Для этого предназначены атрибуты:
cellspacing="ширина отступа в пикселях"
- отступ между ячейками
cellpadding="ширина отступа в пикселях"
- отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)
Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:
cellpadding="20"
cellspacing="10"
>
1.1 |
1.2 |
2.1 |
2.2 |
|
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing
) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0"
и cellspacing="0"
.
8. Как одну html таблицу вставить внутрь другой?
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
 
Создать сайт в настоящее время не вызовет особых сложностей, так как в интернете достаточно порталов, которые предлагают свои услуги по созданию сайта. Но сайт, созданный по такой услуге, это не свое создание, а подобие выращенного в пробирке клона.
Самостоятельно созданный сайт - будет всегда любимым чадом, выстраданным в радостных муках творчества. Создать сайт можно при помощи языка программирования HTML, так называемый статический сайт.
Для создания сайта используют редактор HTML. Для самостоятельного создания сайта, на основе HTML, необходимы знания языка программирования HTML, отдельные понятия работы Photoshop, некоторые навыки написания статей, немного фантазии и дизайнерского искусства.
Сайт, созданный при использовании языка программирования PHP – динамический сайт. Большинство существующих сайтов в интернете созданы на основе PHP, на движках CMS (система управления контентом). На этом сайтеможно познать, как создать сайт и получить квалифицированную помощь при самостоятельном создании сайта на движках CMS:
- создание сайта на Joomla;
Начинать что – то делать – всегда трудно. Главное здесь задаться определенной целью. Для начала выбрать тематику и образец сайта, какой желаете сделать, составить план его реализации. И двигаться по пути достижения главной цели.
| |
