Официальный Форум технической поддержки сервиса ForumBB

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

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


Вы здесь » Официальный Форум технической поддержки сервиса ForumBB » Архив » Создаем таблицу на форуме


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

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

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

:O

0

3

*~Zoey~* написал(а):

8. Пользователям запрещается отправлять сообщения или создавать темы с одним(и) смайликами при этом не содержащие сообщение для чтения.
8 пункт из правил! держи предупреждение!

0

4

хорошо :rolleyes:

0

5

*~Zoey~* написал(а):

хорошо

плохо! И хватит аффтопить!

0

6

<center>
<table width="100%" border="1" boldercolor="#666666">
<tr>
<td width="15%" align="center">
<span style="color:#FFFFFF; font-weight:700">
<p><center>Наш
баннер</center> <a href="http://hpholidays.forumbb.ru/" target=_blank>
<img src=http://r.foto.radikal.ru/0706/14/f0aef235398f.gif border=0 /></a></center><center>

<td width="55%" align="center">
<span style="color:#000000; font-weight:700">
<p><!-- BEGIN CBOX - http://www.cbox.ws -->
<div align="center" id="cboxdiv">
<iframe frameborder="0" width="500" height="305" src="http://www4.cbox.ws/box/?boxid=3302818&amp;boxtag=4020&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#000000 1px solid;" id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="500" height="75" src="http://www4.cbox.ws/box/?boxid=3302818&amp;boxtag=4020&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#000000 1px solid;border-top:0px" id="cboxform"></iframe>
</div>
<!-- END CBOX -->

<td width="15%" align="center">
<span style="color:#000000; font-weight:700">
<p><center>Наши друзья</center>

<center><a href="http://fludilka.forumbb.ru/" target=_blank><img src=http://img247.imageshack.us/img247/3083/70384747jq4.gif border=0 /></a></center>
<center><a href=http://garpot.НЕ НАШ СЕРВИС!><img src="http://u.foto.radikal.ru/0704/f4/944a70446e73.gif" border=1 bordercolor=#3366CC></a></center>
       </center>

вот вобщем вопрос по этой таблице:
почему нижний банер смещается вбок?
вот так вот
http://s.foto.radikal.ru/0706/bb/fe700cb0ecc6.jpg
что там неправильно написано?
я просто мало соображаю и могла не заметить  ^_^

0

7

SPIRIT, Попробуйте поставить в конце </table>
Да, в примере не закрыт тег <table>

0

8

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

Попробуйте поставить в конце </table>

точна))ну я как всегда слепая  ^_^
спасибо за помощь  ;)

0

9

Дайте вот код  таблицы

0

10

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

Дайте вот код  таблицы

Глазки подыми солныщко!

0

11

не вижу!!!

0

12

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

не вижу!!!

<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>

0

13

А куда там вписывать слова?

0

14

Didier Drogba написал(а):

А куда там вписывать слова?

в тегах тр

0

15

вот я никак не пойму как эту таблицу делать?
а есть какие нибудь готовые?

0

16

Didier Drogba написал(а):

а есть какие нибудь готовые?

готовых нет но могу дать!

Didier Drogba написал(а):

вот я никак не пойму как эту таблицу делать?

что именно?

0

17

Didier Drogba
Готовые можно взять с других форумов..но лучше спросить у админа разрешения..любой код можно получить..если нажать на мышке правую кнопку...и нажать "ПОказать Хтмл код" и копируй.

0

18

DREД написал(а):

готовых нет но могу дать!

В смысле?

DREД написал(а):

что именно?

не получается!

0

19

Didier Drogba написал(а):

В смысле?

готовую всмысле!

0

20

Didier Drogba написал(а):

не получается!

а что именно? епти..

0


Вы здесь » Официальный Форум технической поддержки сервиса ForumBB » Архив » Создаем таблицу на форуме