Сайт своими руками - Встреча друзей у IRINA

Создание таблиц начинаеться с элемента table. Этот элемент считаеться не пустым, поэтому он записываеться с использованием закрывающего и открывающего тега

Code

Ширина таблицы

Ширину таблицы можно задать двумя способам: в пикселях и в процентах.
Значение выраженное в пикселях считается фиксированным, поскольку ширина таблицы всегда будет соответствовать этому значению.

Code

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

Code

Это пример таблицы с динамическим значением ширины в 90%

Границы таблицы и интервалы

Язык HTML позволяет включить отображение границ таблиц

Code

В результате выполнения этой строки кода, вокруг таблицы, а также всех ее строк и ячеек будет отображена граница шириной в 1 пиксель.

Для добавления интервала между ячейками используеться атрибут cellspacing.
Для добавления интервала между содержимым ячейки и самой ячейкой используеться атрибут cellpadding:

Code

Это пример таблицы с динамическим значением ширины в 90% , и использование атрибутов border cellspacing cellpadding

Добавление строк таблицы

Строка в таблице добавляется с помощью элемента tr

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
Данные
</tr>
</table>

Таблица может содержать любое необходимое колличество строк.

Добавил: (Irina) Рейтинг: 0.0/0

HTML таблиц. Ячейки, заголовки

Добавление ячеек таблицы

Ячейкуи формируют вертикальные столбцы, используя теги

Code

Элементы table tr и td являються тремя неотъемлемыми состовляющими любой таблицы

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>

Пример простой таблицы: три ячейки, одна строка, ширина 90%, интервал 5

данные
данные
данные

Добавление заголовков таблиц
Заголовок таблицы обозначает заголовок столбца или строки таблицы.

Code

Чтобы заголовки описывали столбцы, находящиеся под нимит, разместите все заголовки в одной строке, а затем добавьте столбцы, которые будут находиться под заголовками в последующих строках.

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th>Местоположение</th>
<th>Погода</th>
<th>Часовой пояс</th>
</tr>
<tr>
<td>Россия, Москва</td>
<td>Жаркая</td>
<td>День долгий</td>
</tr>
</table>

местоположение
погода
часовой пояс
Россия,Москва
жаркая
день долгий

Заголовки также можно использовать и для описания заголовков строк.

местоположение
Россия,Москва
погода
жаркая
часовой пояс
день долгий

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th>Местоположение</th>
<td>Россия, Москва</td>
</tr>
<tr>
<th>Погода</th>
<td>Жаркая</td>
</tr>
<tr>
<th>Часовой пояс</th>
<td>День долгий</td>
</tr>
</table>

Добавил: (Irina) Рейтинг: 0.0/0

HTML таблицы. Объединение строк, заголовков

Объединение строк

В процессе создание таблиц может понадобиться растянуть столбец на несколько строк, для этого существует атрибут rowspan, значение которого определяет количество строк.

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th rowspan="2">Заголовок (объдинены 2 строки)</th>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<th>Заголовок (слияния нет)</th>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>

заголовок (объеденены 2 строки)
данные
данные
данные
данные
заголовок (слияния нет)
данные
данные

Можно объединять строки и внутри ячеек

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th rowspan="2">Заголовок (объдинены 2 строки)</th>
<td rowspan="3">Данные (объдинены 3 строки)</td>
<td>Данные</td>
</tr>
<tr>
<td>Данные</td>
</tr>
<tr>
<th>Заголовок (слияния нет)</th>
<td>Данные</td>
</tr>
</table>

заголовок (объеденены 2 строки)
данные (объедены 3 строки)
данные
данные
заголовок (слияния нет)
данные

Объединение столбцов

Точно также как объединене строк можно объеденить столбцы.

Для этого используем атрибут colspan.

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th colspan="2">Заголовок (объдинены 2 строки)</th>
<th>Заголовок (объединения нет)</th>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>

заголовок(объеденены 2 столбца)
заголовок(объединения нет)
данные
данные
данные
данные
данные
данные

Подобным образом можно объединять ячейки таблицы.

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th colspan="2">Заголовок (объдинены 2 столбца)</th>
<th>Заголовок (объединения нет)</th>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<td colspan="3">Заголовок (объдинены 3 столбца)</td>
</tr>
</table>

заголовок(объеденены 2 столбца)		заголовок(объединения нет)
данные	данные	данные
заголовок(объеденены 3 столбца)

Будьте внимательны - различия между colspan и rowspan вас могут запутать. Помните, обьединение строк - это вертикальное объединение, объединение столбцов - горизонтальное объединение.

Добавил: (Irina) Рейтинг: 0.0/0

Изменение дизайна шаблона таблицы

Изменение дизайна шаблона таблицы

Наш шаблон сайта имеет свои таблицы, и в принципе их форма нас устраивает, но вот дизайн нам нужно изменить. Как это сделать?

Первоначальный вариант:

Вариант после нашего оформления:

Для того,чтобы изменить дизайн таблицы на админпанели нажимаем "ДИЗАЙН" - "УПРАВЛЕНИЕ ДИЗАЙНОМ СТРАНИЦЫ". Для упрощенного варианта входим в ВИЗУАЛЬНЫЙ РЕДАКТОР. Нажимаем на таблицу, которую хотим изменить, и на панели редактора - "редактировать таблицу, ячейку". Так как форма таблицы нас устраивает, то выбираем "редактировать ячейку". Если необходимо откорректировать ширину и высоту, то выбираем нужные элементы. Затем переходим в "свойства". Выбираем в интернете или файловом менеджере рисунок, который будет фоном нашей таблицы(можно просто выбрать цвет). Нажимаем на "изображение" и вводим адрес фона нашей таблицы, сохраняем. Затем отформатируем текст, выбираем рамку, указываем как будет расположен наш текст, рисунок(слева, справа, посередине) и сохраняем. Все.. дизайн таблицы изменен.

Добавил: (Irina) Рейтинг: 0.0/0

Таблица в HTML кодах

Таблица в HTML кодах

Определить таблицу <TABLE></TABLE>
Окантовка таблицы <table border=?></TABLE>
Расстояние между ячейками <TABLE CELLSPACING=?>
Дополнение ячеек <TABLE CELLPADDING=?>
Желаемая ширина <TABLE WIDTH=?> (в точках)
Ширина в процентах <TABLE WIDTH="%"> (проценты от ширины страницы)
Строка таблицы <TR></TR>
Выравнивание <TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM>
Ячейка таблицы <TD></TD> (должна быть внутри строки)
Выравнивание <TD ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>
Без перевода строки <TD NOWRAP>
Растягивание по колонке <TD COLSPAN=?>
Растягивание по строке <TD ROWSPAN=?>
Желаемая ширина <TD WIDTH=?> (в точках)
Ширина в процентах <TD WIDTH="%"> (проценты от ширины страницы)
Цвет ячейки <TD BGCOLOR="#$$$$$$">
Заголовок таблицы <TH></TH> (как данные, но жирный шрифт и центровка)
Выравнивание <TH ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>
Без перевода строки <TH NOWRAP>
Растягивание по колонке <TH COLSPAN=?>
Растягивание по строке <TH ROWSPAN=?>
Желаемая ширина <TH WIDTH=?> (в точках)
Ширина в процентах <TH WIDTH="%"> (проценты ширины таблицы)
Цвет ячейки <TH BGCOLOR="#$$$$$$">
Заглавие таблицы <CAPTION></CAPTION>
Выравнивание <CAPTION ALIGN=TOP|BOTTOM> (сверху/снизу таблицы)