НабивалкО Сакуры-чан

<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"> </td>
<td align="right" valign="top" colspan="2">Рас рас</td>
<td width="394" rowspan="3"> </td>
</tr>
<tr>
<td align="right" valign="top" colspan="2"> </td>
</tr>
<tr>
<td align="right" valign="top" colspan="2"> </td>
</tr>
<tr>
<td bordercolor="#FFFF00"> </td>
<td> </td>
<td> </td>
<td width="394"> </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"> </td>
<td align="right" valign="top">Рас рас</td>
<td width="394"> </td>
</tr>
<tr>
<td bordercolor="#FFFF00"> </td>
<td> </td>
<td width="394"> </td>
</tr>
</table>
Также можем сделать так, чтоб например в таблице было 2 строки, но в одной из строк была ячейка в которой еще несколько строк или столбцов..

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

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

Код:
<table border="5" width="100%">
<tr>
<td bgcolor="#008000" rowspan="3"> </td>
<td align="right" valign="top" colspan="2">Рас рас</td>
<td width="394" rowspan="3"> </td>
</tr>
<tr>
<td align="right" valign="top" colspan="2"> </td>
</tr>
<tr>
<td align="right" valign="top" colspan="2"> </td>
</tr>
<tr>
<td bordercolor="#FFFF00"> </td>
<td> </td>
<td> </td>
<td width="394"> </td>
</tr>
</table>
Ну и последнее.. МОжем порабоать над всей таблицей.
ТОесть теперь все будем вставлять только сюда <table все сюда!></table>
Поставим картинкой фон для всех ячеек где не указаны параметры фона
Пишем bgcolor="#FF0000" и цвет фона всей таблицы поменялся на красный...

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

Если вы делаете логотип для форума вставляя свою картинку НАД основной шапкой с логотипом и баннером, вот простейший код, который будет регулировать ее ширину в зависмости от браузера и разрешения и всегда сохранять ее одинаковой ширине основной таблицы форума.

В HTML-верх вставляем код вашей картинки следующим образом:

<img id="Mylogo" src="адрес картинки" />
<style type="text/css">
#Mylogo {width: 100%; margin: 0 0 0 0;}
</style>

А вообщем Шапка делается разными спосабами:

Самый простой способ, реализуемый при помощи css
<style type="text/css">
#pun-title .title-logo {background-image: url(адрес вашей картинки); background-repeat: no-repeat;}
</style>

Если остальной фон шапки вы хотите отделать в том же стиле
<style type="text/css">
#pun-title table {background-image: url(адрес вашей картинки);}
</style>

Если на вашем графическом логотипе некрасиво устроилось буквенное название форума
<style type="text/css">
#pun-title h1 span {display: none;}
</style>

Логотип-картинка во всю шапку (за исключением баннера)
<style type="text/css">
#pun-title .title-logo {display: none;}
#pun-title table {background-image: url(адрес вашей картинки);}
</style>

Картинка во всю шапку, с регулирующейся шириной под разные браузер/ расширение экрана. НЕ работает в Firefox, Safari
<style type="text/css">
#pun-title table {background-image: none !important;}
#pun-title, #pun-title table, .title-logo-tdr {background-color: transparent;}
#pun-title table {position: relative; top: -30px ; z-index: 100 !important; height: 0px;}
#pun-title .title-logo {display: none;}
#pun-title {height: 50px;}
</style>
<script type="text/javascript">
var logot=document.getElementById('pun-title').innerHTML
document.getElementById('pun-title').innerHTML="<img src='адрес картинки'"+" style='width: 100%; position: relative; top: 30px;' />"+logot
</script>

Изменяйте красные значения, пока не отпозиционируете фон и логотип идеально для вас.
________________________________________
<style type="text/css">
#pun-title .title-logo {display: none;}
#pun-title table {background-image: url("Ссылка"); margin: 0px 0px 0px 0px; width: 100%; height: 115px;};
#pun {padding: 0px 0px 0px 0px; height: 5px}
#pun-title .container {padding: 0px 0px 0px 0px !important; margin: 0px 0px 0px 0px;}
#pun-title {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px !important; width: 100%;};
#pun-ulinks .container {background-color: black}
#pun-navlinks .container {background-image: url("http://img59.imageshack.us/img59/3394/navlinkshj5.jpg"); height: 20px;}
#pun-main h2 {background-image: url("http://img59.imageshack.us/img59/3394/navlinkshj5.jpg");}
#pun-navlinks li#navrules a span {display : none;}
</style>

Код вставляется в HTML в форме ответа

Код:
<img onclick="insert_text(' -- ', '')" src="адрес_смайла" alt="Смайл" />
Будет отображаться смайл, по клику на который в текст сообщения будет вставлен необходимый BBCode

2 способ:
Код вставляется в HTML в форме ответа

Код:
<img onclick="return changeVisibility('id_смайлов', this)" src="адресс_смайла" alt="описание_смайлов" />
<div class="container" id="id_смайлов" style="display:none; width:199px; position: absolute; z-index: 2">
<div id="smilies-block">
<img src="адрес_смайла" alt="описание_смайла" style="cursor: pointer" onclick="insert_text(' -- ', ''); return changeVisibility('id_смайлов', this)" />
</div>
</div>

id_смайлов - название блока смайлов. Например: smiles-icq, smiles-area2, smiles.
описание_смайла - по желанию, вешь вообщем-то ненужная, ИМХО, так что можно смело удалять.
Добавлять смайлы просто копируя строчку:
<img src="адрес_смайла" alt="описание_смайла" style="cursor: pointer" onclick="insert_text(' -- ', ''); return changeVisibility('id_смайлов', this)" />
Адреса можно писать в формате: uploads/имя_форума/имя_файла , исключение - адрес между --, там адрес должен быть полным, начиная с http:// и т.д.

Со структурой html-странички мы с вами уже познакомились в соответствующей теме, поэтому с тегом body вы уже знакомы. Именно в этом теге можно задать цвет фона вашего сайта или прописать путь до фоновой картинки.

Смена цвета фона:

Код:
<body bgcolor="#код_цвета">
Коды смотрите в палитре цветов или в фотошопе. Вместо кода можно указывать английские названия цветов: blue, red, black, white, lime, yellow и т.д.

Графический фон:

Код:
<body background="fon.jpg">
где fon.jpg — ваше фоновое изображение.

Фон можно зафиксировать, т.е. при прокрутке текста фон двигаться не будет:

Код:
<body background="fon.jpg" bgproperties="fixed">
Не забывайте, что для каждой страницы, на которой присутствует графический фон, нужно прописывать фоновый цвет, т.к. гости вашего сайта могут отключить показ картинок в своем браузере, в результате чего могут увидеть не очень приятную картинку: к примеру, на белом фоне текст белым шрифтом )

http://help.forumbb.ru/ все отсюда

0