Единый форум поддержки

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

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


Вы здесь » Единый форум поддержки » Справочная » Создаем таблицу


Создаем таблицу

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

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"

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

+10

2

мдя,а насчёт цветов,можно где-нить достать коды этих оттенков, например "FF0000" ???

0

3

http://www.ladin.ru/colors.htm

0

4

Таблица цветов
FF0000 - это красный

Отредактировано xxABTOPUTETxx (Сб, 12 Май 2007 22:17:59)

0

5

о,xxABTOPUTETxx
Sweet Lou
пасибо огромное!)

0

6

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

0

7

Пишем так <table bgcolor="Код цвета"></table>

0

8

Sweet Lou
Спасибо!

0

9

А как в таблице зделать шапку?

0

10

Не надо, пардон.
<tr>
    <th colspan="3" scope="col" height="28"><div align="center">инфа</div></th>
  </tr>

0

11

Как сделать таблицу уже по высоте? Дописываю параметр height - не помогает...

0

12

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

0

13

Вот код объявы. Там, где точки, находится текст.

<table width="100%" border="0" >
<tr>
<td width="17%" ><marquee direction="Up" scrollAmount="2" onMouseOver="this.scrollAmount='0';" onMouseOut="this.scrollAmount='2';">
<font face="Georgia">
<br/><i><b>14.05.07</b></i>
<br/><font color=red>Начало акции «Троллейбус»! ...
<br/> </font></font></marquee>
</td>
<td width="83%">
<center><font size="2" face="Georgia">...</br>
<b>Не забываем читать правила и исполнять их!</b> </br></br>
...</b></font>
</td>
</table>

0

14

а таблица это то где написаны названия форумов?Или нет? а если нет то как сделать не фон собственного стиля а "таблицу"?

0

15

Sacanya написал(а):

а таблица это то где написаны названия форумов?Или нет?

Таблица, это и есть таблица... В ней ты можешь написать, что угодно...
Поставь ее код, в объявление и увидишь, что это такое...))  :swoon:

0

16

это типа чата чтоль? на самом низу форума?

0

17

Нет, это типа то, что большинство в объявление вставляет, чтоб красиво выглядело :)

0

18

А моей подруГе нужен код вот этой таблОчки):
Вот=)

Отредактировано СонечкО (Сб, 19 Май 2007 20:34:57)

0

19

СонечкО
На

<table width="96%" border="1" align="center" >
<tr><td width="40%" aligne="middle" colspan="2"><center><img src="http://img143.imageshack.us/img143/5861/kgjgjql5.jpg"></center>
</font></td></tr>

<table border=#e6397a  bgcolor=#f6c060 cellpadding=1 cellspacing=1 width=812>
<tr><td colspan=7 bgcolor=#e6397a width=927 height=1></td></tr>
<tr><td bgcolor=#e6397a width=1 height=20></td>
<td background="http://img517.imageshack.us/img517/6008/71101370zx3.jpg" width=308 height=30></td>
<td bgcolor=#e6397a width=1 height=30></td>
<td background="http://img517.imageshack.us/img517/6008/71101370zx3.jpg" width=308 height=30></td>
<td bgcolor=#e6397a width=1 height=30></td>
<td background="http://img517.imageshack.us/img517/6008/71101370zx3.jpg" width=308 height=30></td>
<td bgcolor=#e6397a width=1 height=30></td></tr>
<tr><td colspan=7 bgcolor=#26A1B3 width=927 height=1></td></tr>
<tr>
<td bgcolor=#e6397a width=1></td>
<td width=307>
<font color=#e6397a ace=tahoma><span style="font size: 9pt">

<center><b>
<img src="http://img254.imageshack.us/img254/1159/gggdse7.jpg"><br><hr>
<a href="http://sexbezzapretov.mybb.ru/viewtopic.php?pid=140596#p140596"><font color=#e63778>Кастинг</font></a><BR>
<a href="http://sexbezzapretov.mybb.ru/viewtopic.php?id=1231"><font color=#e63778>Личное звание</font></a><BR>
<a href="http://sexbezzapretov.mybb.ru/viewtopic.php?pid=140581#p140581"><font color=#e63778>Заказ тем</font></a><BR>
<a href="http://sexbezzapretov.mybb.ru/viewtopic.php?pid=140524#p140524"><font color=#e6397a>Реклама</font></a><BR></font>
<a href="http://sexbezzapretov.mybb.ru/viewtopic.php?pid=140606#p140606">Заказ аватаров</font></a><BR></b>

<hr>
<font color=#e6397a face=tahoma><span style="font size: 8pt"><b><center>Админы:</center></b> Адам Броди,Виктория Боня ,Сабрина Гаджикаибова,Алекса Чвикова,Сергей Лазарев,Юлия Лысенко , Ксения Бородина.<hr>
<font color=#e6397a face=tahoma><span style="font size: 8pt"><b><center>Модеры:</center></b>Не нужны.
<center></font>

</center>

</td>
<td bgcolor=#e6397a width=1></td>
<td width=308>
<font color=#e6397a face=tahoma><span style="font size: 8pt">
<center><img src="http://img520.imageshack.us/img520/4824/fhfhfhfgc6.jpg">

<HR>
<B><center> Погода:</center> </b> <small>На улице теплеет и теплеет с каждым днём. Закупаемся детней одеждой.</small> <BR>
<HR>
<font color=#e6397a><b>События дня:</b> </font><marquee height="100" width="300" bgcolor="#f6c060" Scrollamount="1" Direction="up">
17 мая))НАМ ПОЛГОДА И МЫ СНОВА ОТКРЫВАЕМ НАШИ ДВЕРИ)) СБЗ возвращается с новыми силами)) Дорогие гости регестрируйтесь и занимайте ваши роли в нашем прекрасном доме) мы рады всем) С ВОЗВРАЩЕНЬЕМ НАС!!!
P.S УВАЖАЕМЫЕ НАШИ СТАРИЧКИ ПРОХОДИМ ЗАНОГО КАСТИНГ!!</marquee>
<hr>
<center><b>Пары проекта: </b></center><small>Проверяем старые чувства) и конечно ждём новые пары!</small>
<font color=#e6397a> <br>

 
<font color=#e6397a> <br>
</td>
<td bgcolor=#e6397a  width=1></td>
<td width=308>
<font color=#e6397a face=tahoma><span style="font size: 8pt">
<center> <font color=#e6397a>
<font color=#e6397a> <big><big> </font> <center><font color=#c4a69a> <font color=red> </font></center></big> </big>  </font></center> <center> <font color=#e63778>

<img src="http://img337.imageshack.us/img337/7339/dfdgdfgfgg6.jpg">
<hr><font color=#e6397a><b>Наши дорогие и любимые гости!!</b><br>Добро пожаловать к нам)быстрее регистрируемся и начинаем активно играть и рекламить!!<br></font><br><hr><b>Дизайн форума: </b><small>Оценить вы его сможете..</small><br> <a href="http://sexbezzapretov.mybb.ru/viewtopic.php?pid=140603#p140603"><b>=> здесь <=</b></a><b><hr> Список имеющихся ролей: </b> <a href="http://sexbezzapretov.mybb.ru/viewtopic.php?pid=140589#p140589" target="_blank"><b><br>=> здесь <=</b></a> <br><small>Список занятых ролей обновляется каждый день.Хорошей вам игры. Ваша администрация)</small></b>

</big></big> </font> </center>
<BR>
</td>
<td bgcolor=#e6397a width=1></td></tr>
<tr><td colspan=7 bgcolor=#e6397a width=927 height=1></td></tr>
</table>

Отредактировано Мигран (Сб, 19 Май 2007 20:46:58)

0

20

Мигран
Большое спасиБо от подруГи  :D

0


Вы здесь » Единый форум поддержки » Справочная » Создаем таблицу