Раскрутка форумов и ролевых

Объявление

Winx super
Раскрутка форумов и ролевых по полному)))
Ваша Админочка Мелисса Аватары и анимация на GIFr.ru Ваш модератор Bloom Новости форума Форум объявляется открытым, делайте заказики общайтесь,рекламируйте форумы , но не забывайте о взаимности рекламы))) ***********Да и попрошу не флудить где попало!!!********* А то я тогда запарюсь удаляя ваш флуд!И попрошу без наездов на форум и участников!!! Активные участники: Bloom
Ув. гости Гости регистрируйтесь вам у нас понравится, если вы будете сидеть просто как гости то ваш форум или сайт, не станет популярнее Ув. участники пожалуйста если вы зарегистрировались то посмотрите те правила и обязуйтесь их выполнять)))

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Раскрутка форумов и ролевых » Помощь с дизайном » Делаем таблицу!


Делаем таблицу!

Сообщений 1 страница 7 из 7

1

Сейчас будем учится создавать свою таблицу
Для начала рассмотрим несколько тегов и параметров
<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 - фон картинкой

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

Код:
<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>

Итак, пишем основной тег <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>

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

Прописываем в первый наш столбец вот такое 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>

Также можем сделать так, чтоб например в таблице было 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>

Ну и последнее.. Можем поработать над всей таблицей.
То есть теперь все будем вставлять только сюда <table все сюда!></table>
Поставим картинкой фон для всех ячеек где не указаны параметры фона
Пишем bgcolor="#FF0000" и цвет фона всей таблицы поменялся на красный...

И последнее. Если мы хотим совсем убрать границы таблицы то пишем вот такое border="0" cellspacing="0" cellpadding="0"

Вот вроде и все. Может немного запутано, зато если вы это выучите, тогда сможете создать таблицу любой сложности

Урок взят с ЕТП

0

2

Bloom тупой вопрос, а где это все делать?!

0

3

Мелисса
Где хочешь. Хоть в ворде, хоть в блокноте, хоть.. Да где угодно)) Главное потом это все вставить в правильное место

0

4

Я вот все прочла и мне все равно не понятно я что такая тупая?! http://www.kolobok.us/smiles/standart/pardon.gif

0

5

Мелисса
Ты же делала раньше таблицы? А с помощью этого все еще легче

0

6

Нет у меня на другом компе коды просто есть, а сегодня комп забрали недавно мин 20 назад и все у меня теперь нет кодов

0

7

Мелисса
Те же самые коды

Мелисса написал(а):

Я вот все прочла и мне все равно не понятно я что такая тупая?!

А вот это...  ты написала так, как будто таблицы не умеешь делать)))

0


Вы здесь » Раскрутка форумов и ролевых » Помощь с дизайном » Делаем таблицу!