Как создать таблицу.

Поделиться12008-01-30 19:56:11

Автор: rps
IceBB
Откуда: Россия Нижний Новгород
Зарегистрирован: 2008-01-28
Приглашений: 0
Сообщений: 141
Уважение: +3
Позитив: +3
Пол: Мужской
Возраст: 33 [1991-01-15]
Провел на форуме:
15 часов 33 минуты
Последний визит:
2008-07-28 21:29:03

Так, сейчас будем учится создавать свою таблицу.
Для начала разсмотрим несколько тегов и параметров:
<table></table>-тег самой таблицы.
Параметры
border- толщина границ таблицы
bordercolor- цвет границ таблицы
bordercolorlight- цвет светлой части границы таблицы (точнее такого цвета будет левая и верхняя граница таблицы.
bordercolordark- цвет темной части границы таблицы (правая и нижняя граница таблицы.
bgcolor- цвет фона таблицы.
background - фон таблицы картинкой (background="Адрес картинки")
width- ширина таблицы. Задается в процентах или пикселях
height - высота таблицы. Задается в процентах или пикселях

<td></td>- тег ячейки
<tr></tr> - тег строчки
Все параметры записываем исключительно в тег <td сюда разные параметры></td>

Параметры
align - выравнивание в ячейке по горизонтали
- left(по левому краю)
- right(по правому краю)
- center(по центру)
- justify(по ширине)

valign - выравнивание в ячейке по вертикали
- top(по верхнему краю)
- baseline (по линии шрифта)
- baseline (по нижнему краю)

height- высота
width- ширина
bordercolor- цвет границы ячейки
bgcolor- цвет фона ячейки
background - фон картинкой

0

Поделиться22008-01-30 19:57:36

Автор: rps
IceBB
Откуда: Россия Нижний Новгород
Зарегистрирован: 2008-01-28
Приглашений: 0
Сообщений: 141
Уважение: +3
Позитив: +3
Пол: Мужской
Возраст: 33 [1991-01-15]
Провел на форуме:
15 часов 33 минуты
Последний визит:
2008-07-28 21:29:03

Теперь попробуем создать простую таблицу которая будет иметь вот такой вид:

Код:

Код:
<table border="0" width="100%" bgcolor="#FF0000" cellspacing="0" cellpadding="0">
	<tr>
<td bgcolor="#008000" rowspan="3">&nbsp;</td>
<td align="right" valign="top" colspan="2">Рас рас</td>
<td width="394" rowspan="3">&nbsp;</td>
	</tr>
	<tr>
<td align="right" valign="top" colspan="2">&nbsp;</td>
	</tr>
	<tr>
<td align="right" valign="top" colspan="2">&nbsp;</td>
	</tr>
	<tr>
<td bordercolor="#FFFF00">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="394">&nbsp;</td>
	</tr>
</table>

0

Поделиться32008-01-30 19:59:13

Автор: rps
IceBB
Откуда: Россия Нижний Новгород
Зарегистрирован: 2008-01-28
Приглашений: 0
Сообщений: 141
Уважение: +3
Позитив: +3
Пол: Мужской
Возраст: 33 [1991-01-15]
Провел на форуме:
15 часов 33 минуты
Последний визит:
2008-07-28 21:29:03

Итак, пишем основной тег<table></table>
Затем прописываем две строки
<tr>
</tr>
<tr>
</tr>
А затем прописываем в каждую строку одинаковое количество столбцов.
Итак теперь у нас весь код должен выглядеть вот так:

Код:

<table border="5" width="100%">
	<tr>
<td></td>
<td></td>
<td></td>
	</tr>
	<tr>
<td></td>
<td></td>
<td></td>
	</tr>
</table>

0

Поделиться42008-01-30 20:06:15

Автор: rps
IceBB
Откуда: Россия Нижний Новгород
Зарегистрирован: 2008-01-28
Приглашений: 0
Сообщений: 141
Уважение: +3
Позитив: +3
Пол: Мужской
Возраст: 33 [1991-01-15]
Провел на форуме:
15 часов 33 минуты
Последний визит:
2008-07-28 21:29:03

Для наглядного примера, давайте в каждой ячейке сделаем что нибудь по другому..
Итак в первой мы поставим фон другого цвета:

Прописываем в первый наш столбец вот такое:bgcolor="#008000"
И видим,что фон в верхней левой ячейке стал зеленым.

Давайте во второй выравняем текст по верхнему правому краю:align="right" valign="top"
Пишем какой либо текст, и он у нас будет выравниватся по правому краю в верху

В следующей давайте изменим ширину ячейки(ВАЖНО! Если меняете ширину верхней, также стоит изменить параметры и той которая находится под нашей ячейкой)
То есть пишем в 3 тег верхней строки width="400"и тоже самое пишем в 3 тег нижней строки.

Теперь давайте изменим цвет границ ячейки
Выбираем какую нибудь ячейку, которую мы еще не калечели.
И пишем тудаbordercolor="#FFFF00".
Теперь граница нашей ячейки перекрасилась в желтый цвет

Итак, код нашей разукрашеной таблицы будет выглядить примерно вот так:

Код:

Код:
<table border="5" width="100%">
	<tr>
<td bgcolor="#008000">&nbsp;</td>
<td align="right" valign="top">Рас рас</td>
<td width="394">&nbsp;</td>
	</tr>
	<tr>
<td bordercolor="#FFFF00">&nbsp;</td>
<td>&nbsp;</td>
<td width="394">&nbsp;</td>
	</tr>
</table>

0

Поделиться52008-01-30 20:11:15

Автор: rps
IceBB
Откуда: Россия Нижний Новгород
Зарегистрирован: 2008-01-28
Приглашений: 0
Сообщений: 141
Уважение: +3
Позитив: +3
Пол: Мужской
Возраст: 33 [1991-01-15]
Провел на форуме:
15 часов 33 минуты
Последний визит:
2008-07-28 21:29:03

Также можем сделать так, чтоб например в таблице было 2 строки, но в одной из строк была ячейка в которой еще несколько строк или столбцов.
Берем всю туже нашу таблицу
Допустим что в средней ячейке мы хотим сдлеать еще 3 строки, тогда в ячейку которая находится слева и справа от нее пишем rowspan="3"
Где 3 будет количество дополнительных строк
Если хотим чтоб были дополнительные столбцы, тогда в ячейки над ней, и под ней пишем colspan="2",
Где 2 будет количество дополнительных столбцов.

Итак теперь код всего этого будет выглядеть вот так:

Код:

<table border="5" width="100%">
	<tr>
<td bgcolor="#008000" rowspan="3">&nbsp;</td>
<td align="right" valign="top" colspan="2">Рас рас</td>
<td width="394" rowspan="3">&nbsp;</td>
	</tr>
	<tr>
<td align="right" valign="top" colspan="2">&nbsp;</td>
	</tr>
	<tr>
<td align="right" valign="top" colspan="2">&nbsp;</td>
	</tr>
	<tr>
<td bordercolor="#FFFF00">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td width="394">&nbsp;</td>
	</tr>
</table>

Отредактировано rps (2008-01-30 20:11:57)

0