Створення таблиць - 10 Квітня 2013 - Блог - Ми переїхали сюди http://kmm.890m.com/

Меню сайту

Категорії розділу

Архітектура ПК [1]

Архітектура та експлуатація персонального комп'ютера

СПЗ [12]

Системне програмне забезпечення та операційні системи

Комп'ютерна графіка [25]

КСМ [28]

Комп'ютерні системи та мережі

ІСІТО [1]

Інформаційні системи і технології обліку

Бухгалтерський облік [0]

АМтП [10]

Алгоритмічні мови та програмування

Копирайт рерайт [1]

СУБД [18]

Системи управління базами даних

ОКТ практикум [2]

Основи комп'ютерних технологій практикум

Інформатика (практ) [1]

інформатика практикум, практичні заняття

ТіОБВ [61]

Технологія і організація будівельного виробництва

ОСАПр [6]

Основи систем автоматизованого проектування, AutoCAD, ArchiCAD

ТіОБВ (заочники) [1]

Пошук

Статистика

Онлайн всього: 1

Гостей: 1

Користувачів: 0

Форма входу

Календар

Головна » » Створення таблиць

13:50

Створення таблиць

Таблица состоит из строк и столбцов, которые могут содержать текст и рисунки. С помощью таблиц удобно верстать макеты страниц, расположив фрагменты текста и изображений нужным образом. Для добавления таблицы на веб-страницу используется тег TABLE.

Любая таблица состоит из строк и столбцов, которые задаются с помощью тегов TR и TD соответственно. Таблица должна содержать хотя бы один столбец.

Вместо тега TD допускается использовать тег TH. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру. Пример:

Таблица с помощью тегов TH и TD

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="1" width="100%" cellpadding="10">
<tr>
<th width="50%">Ячейка 1</th>
<th width="50%">Ячейка 2</th>
</tr>
<tr>
<td width="50%">Ячейка 3</td>
<td width="50%">Ячейка 4</td>
</tr>
</table>
</body>
</html>

К тэгу TABLE могут применяться параметры:
Width - Задает ширину таблицы.
Height - Устанавливает высоту таблицы.
Border - Устанавливает толщину рамки в пикселах.
Bgcolor - Устанавливает цвет фона таблицы.
Cellpadding - Определяет расстояние между границей ячейки и ее содержимым. Без этого параметра текст в таблице "налипает" на рамку, ухудшая тем самым его восприятие.
Cellspacing - Задает расстояние между внешними границами ячеек.
И так далее.

Например, для получения таблицы вида:

Оригинальная html таблица

Пишем:

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="2" bordercolor="black" width="100%" cellpadding="10" cellspacing="40" bgcolor="#CC00FF">
<tr>
<th width="50%" bgcolor="white">Ячейка 1</th>
<th width="50%" bgcolor="white">Ячейка 2</th>
</tr>
<tr>
<td width="50%" bgcolor="white">Ячейка 3</td>
<td width="50%" bgcolor="white">Ячейка 4</td>
</tr>
</table>
</body>
</html>

Как вы поняли, каждая ячейка таблицы, задаваемая через тег TD, тоже имеет свои параметры, часть из которых совпадает с параметрами тега TABLE.

Как правило, при верстке сайта применяются фиксированные по размеру таблицы. Это значит, что вместо процентов в качестве ширины и высоты таблицы указываются конкретные значения в пикселях:

<table border="1" width="500" height="200">

В примере я указал, что ширина таблицы должна быть равна 500 пикселям, а высота – 200 пикселей.

По умолчанию, таблица всегда выравнивается по левому краю окна браузера. Чтобы это изменить, можно использовать параметр ALIGN, который имеет три значения: left, right и center.

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="1" width="500" height="200" align="center">
<tr>
<td width="300"> </td>
<td> </td>
</tr>
<tr>
<td width="300" height="150"> </td>
<td height="150"> </td>
</tr>
</table>
</body>
</html>

В примере мы выровняли таблицу по центру.

Для объединения ячеек таблицы используются параметры rowspan и colspan тэга TD.

Для объединения ячеек по вертикали:

Объеденены ячейки по вертикали

Чтобы объединить ячейки по горизонтали

Объеденены ячейки по горизонтали

пишем:

Для выравнивания текста внутри ячейки используются параметры:

- ALIGN. Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left, center, right.

- VALIGN. Устанавливает вертикальное выравнивание содержимого ячейки. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание посередине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии.

Пример:

Выравниваем содержимое ячейки html таблицы

<table border="1" bordercolor="blue" width="400" cellpadding="10" cellspacing="0">
<tr>
<td width="192" align="center" valign="middle">Ячейка1</td>
<td width="192" align="right" valign="bottom">Ячейка2</td>
</tr>
</table>

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

В примере использованы изображения 113*113 пикселей. На рисунке видно, как разнится результат в зависимости от размера ячейки.

Более лучшего способа для верстки веб-страницы чем таблицы еще не придумали. Конечно, писать постоянно HTML код очень неудобно и трудоемко. Но если воспользоваться Namo WebEditor 8, то никаких сложностей не будет.

Категорія: КСМ | Переглядів: 691 | Додав: Gryzley | Рейтинг: 0.0/0

Всього коментарів: 0

« Квітень 2013 »
Пн	Вт	Ср	Чт	Пт	Сб	Нд
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30


Ім`я *:
Email *:

Код *: