Империя - Таблицы
Империя работы в интернете

Главная | Регистрация | Вход
Четверг, 08.12.2016, 01:13
Приветствую Вас Гость | RSS
Меню сайта

Подбор по параметрам
Категории раздела
Новости бирж контента [3]
РАЗНОЕ [188]
Строительство [2]
интересные места [9]
Обустройство дома, квартиры [1]
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1
Mag123

Создание таблиц в HTML

Тэги table и /table, являются началом и концом таблицы.Строки таблицы начинаются открывающимся тэгом tr и заканчивается закрывающим тэгом /tr, а каждая ячейка (столбец) таблицы начинается тегом td и заканчивается /td.

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

А1 Б1 С1
А2 В2 С2

Где А,В,С -столбцы, 1,2-строчки:

Как видим, таблица вроде и ничего, но нехватает рамочки. Добавим параметр BORDER="1" в тэг table, по умолчанию, этот параметр =0, поэтому рамочки и не видно. Ну а число в кавычках обозначает толщину рамки. Ну и заодно попробуем изменить фон таблички добавив к тэгу table параметр bgcolor="#336699"

А1 Б1 С1
А2 В2 С2

Рамочка появилась, причем нужной нам толщины. Да и фон у таблички появился. Добавим параметр bordercolor="#FF00CC"в тэг table. с рамочкой нужного нам цвета. И заодно добавим параметры bgcolor="#336699" и bgcolor="#FFCC33" соответсвенно в теги tr первой и второй строки, не убирая уже добавленный параметр bgcolor="#336699" в тэге table. Получим таблицу

А1 Б1 С1
А2 В2 С2

Получили рамочку заданного цвета и два фона, разных для каждой строки таблицы. Значит фон заданный в строке таблице имеет приоритет, над фоном, заданным для всей таблице.

Следуя логике, изменить длину строки невозможно, ну а вот ее высоту вполне реально, добавим в тэг tr первой строки параметры height="35" width="300", ну и попробуем добавить в тэг td параметр bgcolor="#FFCC33" и bgcolor="#336699" оставив, остальной HTML - код без изменений./p>

А1 Б1 С1
А2 В2 С2

Убедились, что фон ячейки имеет приоритет, над заданным цветом фона в строке и таблице. Для проверки параметра valign добавим в тег tr второй строки параметр height="35", что бы строки стали одной высоты. Теперь попробуем в первой строке задать параметр valign="top" (выравнивание по высоте), а в нижней valign="bottom" По умолчанию valign="center" , выравнивание по высоте, по центру. Может принимать значения:

  • valign="top" - выравнивание по верху
  • valign="center" - выравнивание по центру
  • valign="bottom" - выравнивание по низу
  • valign="middle" - выравнивание по высоте
А1 Б1 С1
А2 В2 С2

Получается, параметром valign можно выровнять текст по высоте в каждой строчке и ячейке, при добавлении его в тэг table никакого выравнивания по высоте не происходит. Ну а параметром align можно задать положение таблицы на экране, по умолчанию слева и выровнять текст в ячейкаах, по умолчанию выравнивает текст в ячейках по левому краю. Добавим в тег table, параметр align="CENTER", увеличим ширину ячеек, добавив в тэги td первой строки параметр width="40", что бы визуально увидеть выравнивание текста. Добавим в тэг tr второй строки параметр align="CENTER". После добавлений в пример предыдущего HTML-кода, таблица примет вид:

.
Заголовок таблицы
А1 Б1 С1
А2 В2 С2

Как видим, параметр align, выровнял как таблиц, так и текст. Параметр align может принимать следующие значения: LEFT (по левому краю); RIGHT ( по правому краю); CENTER (по центру)

Для добавления заголовка таблицы в HTML-код таблицы необходимо добавить, после тэга table такую строчку CAPTION ALIGN="RIGHT">Заголовок таблицы/CAPTION> где CAPTION - тэг для заголовка, ну а параметр ALIGN, задает расположение заголовка:

  • align="top" - заголовок, над таблицей по центру (значение по умолчанию)
  • align="LEFT" - над таблицей слева
  • align="RIGHT" - над таблицей справа
  • align="bottom" - заголовок, под таблицей по центру
Заголовок таблицы
А1 Б1 С1
А2 В2 С2

Получили таблицу с заголовком, над правым, верхнем углом таблицы

Хотелось юы, отметить, что толшину внутренних рамок таблицы изменитья нельзя, а вот их цвет - возможно, если добавить параметр bordercolor="#нужный цвет", в тэги строчек или ячеек.

Внешней окантовкой таблицы, управляет параметр FRAME, значение которого задается в тэге table. У параметра FRAME возможны, следующие значения:

  • FRAME="ABOVE" - только граница сверху.
  • FRAME="BELOW" - только граница снизу.
  • FRAME="HSIDES" - только границы сверху и снизу.
  • FRAME="VSIDES" - только границы слева и справа
  • FRAME="LHS" - только границы сверху и снизу.
  • FRAME="RHS" - только границы слева и справа

А вот параметр RULES, управляет окантовкой ячеек и может принимать, следующие значения:

  • RULES="GROUPS" - линии будут только между группами рядов..
  • RULES="BELOW" - только граница снизу.
  • RULES="ROWS" - только между рядами..
  • RULES="COLS" - только между колонками.

Попробуем добавить, в тэг table, параметры FRAME="HSIDES" и RULES="COLS". Получится вот такая таблица:

Заголовок таблицы
А1 Б1 С1
А2 В2 С2

Осталось еще два параметра для построения таблицы. COLSPAN Растягивание ячейки по горизонтали. ROWSPAN - Растягивание ячейки по строке. Причем эти параметры должны быть равны целому чилу, то есть числу столбцов или строк на которые мы хотим растянуть ячейку. Параметры эти записываются в тэге td.
Попробуем Растянуть первую ячейку на 2 столбца:

Заголовок таблицы
А1 Б1 С1
А2 В2 С2

Как видим, третья ячейка в третей строке как бы стала лишней

Вход на сайт

Поиск
Календарь
«  Декабрь 2016  »
ПнВтСрЧтПтСбВс
   1234
567891011
12131415161718
19202122232425
262728293031
Архив записей
Друзья сайта
  • Официальный блог
  • Сообщество uCoz
  • FAQ по системе
  • База знаний uCoz

  • Copyright MyCorp © 2016 | Яндекс.Метрика