Что можно вставить в таблицу html. Почти стандартный режим
1. Что такое HTML таблицы и зачем они нужны?
html таблицы - это один из самых основных составляющих каждой html странички и соответственно каждого сайта. Например, сайт сайт весь состоит из таблиц: картинки, тексты, ссылки, формы регистрации – все размещено относительно друг друга при помощи таблиц html (собственно, весь сайт также расположен в одной большой таблице).
2. Какие теги у html таблиц?
Теги , задающие таблицу html пишутся так:
Но так как мы знаем, все таблицы состоят из строк и столбцов (ячеек), поэтому необходимо задать теги и для них:
А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:
Делается такая html таблица очень легко. Для начала поставим теги самой таблицы, внутрь которых помещаем необходимое количество строк (в нашем примере 2 строки):
Затем каждую строку разбиваем на ячейки с помощью тегов столбцов:
- ячейка 1.1 | - ячейка 1.2 | - ячейка 1.3 |
- ячейка 2.1 | - ячейка 2.2 | - ячейка 2.3 |
На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).
3. Как задать фоновый цвет html таблиц?
А сейчас давайте разберемся, как же задается фон таблицы или каждой ячейки отдельно.
Итак, для задания фона используется атрибут bgcolor="цвет_фона" .
Например, если нам необходимо задать один цвет для всей таблички, то делается это так:
- ячейка 1.1 | - ячейка 1.2 | - ячейка 1.3 |
- ячейка 2.1 | - ячейка 2.2 | - ячейка 2.3 |
Например, если необходимо сделать табличку желтого цвета, то мы пишем:
Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor="цвет_фона" применяем к тегу
|
1.1 | 1.2 | 1.3 |
2.1 | 2.2 | 2.3 |
В этом случае, атрибут номер ячейки задает белый цвет тексту, расположенному внутри тега.
Точно так же задается и цвет каждой ячейки отдельно . Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега
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 при употреблении с тэгом
Например, код html таблицы, текст которой выровнен по центру, выглядит так:
|
Прописав атрибут align="center" в открытии
1x1 | 1.2 | 1x3 |
2.1 | 2x2 | 2.3 |
А теперь рассмотрим на примере, как выровнять текст внутри html таблицы по верхнему или по нижнему краю, то есть, как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу.
Вертикальное выравнивание задается атрибутом:
valign="top" - содержание будет располагаться вверху ячейки
valign="middle" - содержание будет располагаться по центру ячейки
valign="bottom" - содержание будет располагаться внизу ячейки
Давайте рассмотрим данные атрибуты на нашем примере:
|
Вот что мы получим, если посмотрим в браузере результат работы атрибутов align и valign :
1x1 | 1.2 | 1x3 |
2.1 | 2x2 | 2.3 |
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. Принцип действия тут тот же:
|
1.1 | 1.2 | |
2.1 | 2.2 |
Таким образом, мы научились объединять ячейки в строках и столбцах html таблиц.
7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?
Итак, ранее мы создали html таблицу, между ячейками которой четко видны отступы. Чтобы их стало видно еще лучше, давайте добавим рамку для нашей таблицы. Делается это с помощью атрибутов:
border="ширина рамки в пикселях" - устанавливает ширину рамки
bordercolor="цвет рамки" - устанавливает цвет рамки
Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.
Для этого тегу
|
Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing ) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.
1.1 | 1.2 | |
2.1 | 2.2 |
Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0" и cellspacing="0" .
8. Как одну html таблицу вставить внутрь другой?
Мы подходим к завершающему этапу по изучению html таблиц. Сейчас мы научимся вставлять одну таблицу внутрь другой.
На примере, внутрь ячейки 1.2 мы вставим новую таблицу, состоящую из одного ряда и двух столбцов. Внутренней html таблице мы установим красную рамку шириной 2 пикселя и расстояние между ячейками 0 пикселей. Также, внутреннюю таблицу мы разместим вверху ячейки.
Делается это очень просто:
|
Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):
1.1 |
|
|||
2.1 | 2.2 |
На этом этапе данную статью мы закончим. Думаю она получилась удачной и не сложной для понимания, и надеюсь, больше с таблицами у Вас проблем не будет.
находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.Каждый тег
Как сделать таблицу в html
Приведем пример, html код:
Пример таблицы Столбец 1 Столбец 2
Обратите внимание на ячейку
Теперь рассмотрим подробно все атрибуты тега
или строкам | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
... | ... |
...
2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения. Пример
Преобразуется на странице в следующее: В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.gif . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым. 3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов) 4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель. 5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла. 6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях. 7. Свойство cellspacing="число" - расстояние между ячейками в пикселях. 8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы. 9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:
10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах. 11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:
|