Faq по таблицам

Страница: 1

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

Поделиться12009-03-20 16:13:15

Автор: Lady Jane
Will we ever meet again...
Зарегистрирован: 2008-04-01
Приглашений: 0
Сообщений: 3292
Уважение: +83
Позитив: +65
Пол: Женский
Провел на форуме:
10 дней 10 часов
Последний визит:
2012-11-07 18:40:33

Для начала разсмотрим несколько тегов и параметров:
<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></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".
Теперь граница нашей ячейки перекрасилась в желтый цвет .

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

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

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

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

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

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

Поделиться22009-03-20 16:23:10

Автор: Lady Jane
Will we ever meet again...
Зарегистрирован: 2008-04-01
Приглашений: 0
Сообщений: 3292
Уважение: +83
Позитив: +65
Пол: Женский
Провел на форуме:
10 дней 10 часов
Последний визит:
2012-11-07 18:40:33

<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 - фон картинкой

Поделиться32009-03-20 16:24:19

Автор: Lady Jane
Will we ever meet again...
Зарегистрирован: 2008-04-01
Приглашений: 0
Сообщений: 3292
Уважение: +83
Позитив: +65
Пол: Женский
Провел на форуме:
10 дней 10 часов
Последний визит:
2012-11-07 18:40:33

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

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

Код:

<table border="5" width="100%">
	<tr>
<td>СОДЕРЖИМОЕ 1</td>
<td>СОДЕРЖИМОЕ 2</td>
<td>СОДЕРЖИМОЕ 3</td>
	</tr>
	<tr>
<td>СОДЕРЖИМОЕ 4</td>
<td> СОДЕРЖИМОЕ 5</td>
<td>СОДЕРЖИМОЕ 6</td>
	</tr>
</table>

Поделиться42009-10-28 13:04:35

Автор: Таис
Потому что я так хочу...
Откуда: оттуда
Зарегистрирован: 2008-04-01
Приглашений: 0
Сообщений: 2128
Уважение: +625
Позитив: +501
Пол: Женский
Провел на форуме:
3 месяца 1 день
Последний визит:
2015-04-05 21:55:17

Как писать в табле?

Вот несколько примеров

название шрифта-font face="название шрифта"

и размер font size="4"

и цвет font color="номер цвета"

жирный <b>...</b>

наклонный <i>...</i>

подчеркнутый <u>.....</u>

<font face="название шрифта" font size="4" font color="номер цвета"><b><i><u>твой текст</b></i></u></font>

Поделиться52009-10-30 19:47:37

Автор: Таис
Потому что я так хочу...
Откуда: оттуда
Зарегистрирован: 2008-04-01
Приглашений: 0
Сообщений: 2128
Уважение: +625
Позитив: +501
Пол: Женский
Провел на форуме:
3 месяца 1 день
Последний визит:
2015-04-05 21:55:17

Поделиться62009-10-31 19:36:58

Автор: Таис
Потому что я так хочу...
Откуда: оттуда
Зарегистрирован: 2008-04-01
Приглашений: 0
Сообщений: 2128
Уважение: +625
Позитив: +501
Пол: Женский
Провел на форуме:
3 месяца 1 день
Последний визит:
2015-04-05 21:55:17

Как залить фоном(картинкой) таблицу на форуме

Первый способ-скриптом кодом, СТАВИТЬ В ХТМЛ ВЕРХ

Код:

<style type="text/css">
#pun #pun-announcement.section .container
{background-image: url("ССЫЛКА НА КАРТИНКУ")} !important;}
</style>

Второй способ- в самой таблице прописать эту картинку

<div style="width: 640px; height: 302px; background: url(http://s48.radikal.ru/i121/0909/25/0da89129bbda.jpg);">
<table border="0" style="width: 100%; height: 302px;">

640-302-РАЗМЕР КАРТИНКИ

border="0"

НОЛЬ В ДАННОМ СЛУЧАЕ ГОВОРИТ О ТОМ ЧТО ЯЧЕЕК ВИДНО НЕ БУДЕТ(ПРОЗРАЧНАЯ ТАБЛИЦА-ТОЛЬКО КАРТИНКА БУДЕТ ВИДНА), ЕСЛИ СТАВИТЬ 1-2-3-4 ЭТО БУДЕТ РАЗМЕР ГРАНИЦ

100%-ЭТО САМА ТАБЛИЦА, ТО ЕСТЬ ОНА БУДЕТ НА ВЕСЬ ФОРУМ( КАК У НАС) , МОЖНО ЕСТЕСТВЕННО МЕНЯТЬ %, НО ЛУЧШЕ ОСТАВЛЯТЬ ТАК И ПРОПИСЫВАТЬ ТОЛЬКО РАЗМЕР КАРТИНКИ(ФОНА)

Первый способ легче, если у вас просто фон , особенно бесшовный, второй более сложный , нужен если у вас определенная картинка.

пример такой картинки-

Поделиться72009-11-23 23:32:23

Автор: CRY-Baby
Зарегистрирован: 2009-08-24
Приглашений: 0
Сообщений: 6
Уважение: 0
Позитив: +1
Провел на форуме:
2 часа 38 минут
Последний визит:
2009-11-23 23:54:01

эм.. вопрос.. потом сообщение удалю, а можно найти скрипы такие, чтобы:
вот такой навигатор нужен:

и прошу, вот такую часть таблицы, чтобы при наведении открывала:

прошу мне помочь, буду благодарна..

Поделиться82011-05-26 20:42:08

Автор: Klay
Откуда: Ужгород,Украина
Зарегистрирован: 2010-01-22
Приглашений: 0
Сообщений: 966
Уважение: +27
Позитив: +36
Пол: Мужской
Возраст: 28 [1996-01-31]
Провел на форуме:
11 дней 18 часов
Последний визит:
2011-12-19 18:24:07

CRY-Baby
Первое называется облаком тегов. Поищите по форуму. Второе выпадающее меню

Ой, не посмотрел дату сообщения) Уже не актуально)

Поделиться92011-08-19 23:52:23

Автор: Iressa
Зарегистрирован: 2011-08-19
Приглашений: 0
Сообщений: 1
Уважение: 0
Позитив: 0
Провел на форуме:
5 часов 44 минуты
Последний визит:
2011-09-13 16:58:42

Очень нравится ваш стиль форума. Понимаю, что сами создавали - расскажите, где почитать об этом. Особенно нравится отсутствие границ в шапке и красивое название)