Вставить таблицу в html. Почти стандартный режим
Л юбая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.
Элемент TABLE, создаем таблицуДля создания таблиц в языке HTML применяется элемент table , а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:
- background - задается изображение (URL), которое может быть фоном для всей таблицы;
- bgcolor - цвет фона таблицы, задается если не задан фон в виде изображения;
- border - толщина линий таблицы, если неободимы видимые границы;
- bordercolor - цвет линий таблицы;
- cellpadding - расстояние от текста внутри ячеек до границ ячеек;
- cellspacing - расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
- width - задается значение ширины таблицы в px или % .
Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:
bgcolor="blue"
border
="1"
bordercolor
="white"
cellpadding
="10"
cellspacing
="2"
width
="100%"
>
В каждой таблице должна быть хотя бы одна строка, задается она тегами . В следующем примере смотрим пример добавления строки:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
Добавляем ячейкиЯчейки образуют вертикальные столбцы таблицы, обозначаются они тегами . Добавляем к нашей таблице ячейки:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
Ячейка №1
Ячейка №2
Ячейка №3
В увидим получившуюся таблицу:
Объединение строкВ некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan , значение которого определяет количество строк, необходимых для объединения. Смотрим пример:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
rowspan="2"
>Строки №1 и №2 объединены
Ячейка№1
Ячейка№2
Ячейка №3
Ячейка №4
Строка №3
Ячейка №5
Ячейка №6
Браузер отобразит:
| Ячейка№1 | Ячейка№2 |
| Ячейка №3 | Ячейка №4 |
| Ячейка №5 | Ячейка №6 |
Столбцы объединяются по такому же принципу, только с использованием атрибута colspan . Смотрим пример:
bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >
colspan="2"
>Столбцы №1 и №2 объединены
Столбец №3
Ячейка №1
Ячейка №2
Ячейка №3
Ячейка №4
Ячейка №5
Ячейка №6
Браузер отобразит:
Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:
Или вот так:
А ты попробуй написать код самостоятельно!
Размеры и выравнивание таблицыВысоту и ширину можно задавать как для всей таблицы в целом, так и для отдельных строк и столбцов делается это спомощью уже знакомых атрибутов width и height , значения задаются как в пикселях, так и в процентах.
Выравнивание таблицы по горизонтали задается атрибутом align , значения тебе уже знакомы: left, center, right . А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td . С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign . Он так же имеет свои значения - вертикальное выравнивание по центру middle , по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).
Фон таблицыФоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие цели ты преследуешь. Задается это - для изображения - атрибутом background , в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона - атрибутом bgcolor , здесь значением является наименование цвета.
В заключениеВот вобщем и все, что необходимо для начального уровня. По окончании раздела о построении таблиц в HTML, заканчивается твое первое знакомство с языком HTML. С помощью таблиц в HTML можно создавать несложные шаблоны web-страниц, так что я предлагаю тебе создать свою первую полноценную уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!
/ То, без чего не создать сайт: ∼ ∼
Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
Создание таблицыТаблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Обычно таблицы используются для упорядочения и представления данных, однако возможности таблиц этим не ограничиваются. C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений.
Для добавления таблицы на веб-страницу используется тег
