Таблица в HTML. Создание таблиц.
|
Любая таблица состоит из строк и столбцов, которые задаются с помощью тегов TR и TD соответственно. Таблица должна содержать хотя бы один столбец. Вместо тега TD допускается использовать тег TH. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру. Пример:
<html> К
тэгу TABLE могут применяться параметры: Например, для получения таблицы вида: Пишем: <html> Как вы поняли, каждая ячейка таблицы, задаваемая через тег TD, тоже имеет свои параметры, часть из которых совпадает с параметрами тега TABLE. Как правило, при верстке сайта применяются фиксированные по размеру таблицы. Это значит, что вместо процентов в качестве ширины и высоты таблицы указываются конкретные значения в пикселях: <table border="1" width="500" height="200"> В примере я указал, что ширина таблицы должна быть равна 500 пикселям, а высота – 200 пикселей. По умолчанию, таблица всегда выравнивается по левому краю окна браузера. Чтобы это изменить, можно использовать параметр ALIGN, который имеет три значения: left, right и center. <html> В примере мы выровняли таблицу по центру. Для объединения ячеек таблицы используются параметры rowspan и colspan тэга TD. Для объединения ячеек по вертикали: <table border="1" bordercolor="black" width="400"
cellpadding="10" cellspacing="0"> Чтобы объединить ячейки по горизонтали пишем: <table border="1" bordercolor="black" width="400"
cellpadding="10" cellspacing="0"> Для выравнивания текста внутри ячейки используются параметры: - ALIGN. Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left, center, right. - VALIGN. Устанавливает вертикальное выравнивание содержимого ячейки. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание посередине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии. Пример: <table border="1" bordercolor="blue" width="400"
cellpadding="10" cellspacing="0"> Таблицы очень удобно использовать для оформления вэб-страницы. В частности для создания стоящего фонового рисунка. Все дело в том, что для каждой ячейки можно выбрать свой фоновый рисунок. А ячеек в таблице можно создать сколько угодно. Единственная проблема заключается в том, что размер ячейки должен точно совпадать с размером рисунка в пикселях. Если размер рисунка окажется больше, чем размер ячейки, то изображение будет обрезано. Если же ячейка по размеру окажется больше рисунка, то изображение будет размножено по горизонтали и вертикали: <table border="1" width="411"
height="119"> В примере использованы изображения 113*113 пикселей. На рисунке видно, как разнится результат в зависимости от размера ячейки. Более лучшего способа для верстки веб-страницы чем таблицы еще не придумали. Конечно, писать постоянно HTML код очень неудобно и трудоемко. Но если воспользоваться Namo WebEditor 8, то никаких сложностей не будет. Далее мы разберем html ссылки. |
Таблица
состоит из строк и столбцов, которые могут содержать текст и рисунки. С помощью
таблиц удобно верстать макеты страниц, расположив фрагменты текста и изображений
нужным образом. Для добавления таблицы на веб-страницу используется тег
TABLE.
