Таблица

Devastator · 03.04.2009

Здравствуйте, люди если кто-то дружит с дизайном объясните по-подробнее. Я хочу сделать графический дизайн таблицы, то есть что то вроде рамки. Гипотетически, я понимаю как это делается. Рамка делается в фотошопе и нарезается. Но я хрен пойму, как слепить куски воедино)
Пробовал и так, и через дримвивер.. постеил куча форумов.. Я чего то очень важного не знаю) подскажите пожалуйста..

Neval · 03.04.2009

Ответ: Таблица

В данном случае ХТМЛ должен выглядеть примерно так:
<table cellspacing="0" cellpadding="0">

<tr height="высота_границы_рамки">
<td width="ширина_границы_рамки"><img src="левый_верхний_угол_рамки.gif"></td>
<td style="background: url('верхняя_граница_рамки.gif') repeat-x;"> </td>
<td width="ширина_границы_рамки"><img src="правый_верхний_угол_рамки.gif"></td>
</tr>

<tr>
<td style="background: url('левая_граница_рамки.gif') repeat-y;"> </td>
<td>Собственно содержимое таблицы

</td>
<td style="background: url('правая_граница_рамки.gif') repeat-y;"> </td>
</tr>

<tr height="высота_границы_рамки">
<td><img src="левый_нижний_угол_рамки.gif"></td>
<td style="background: url('нижняя_граница_рамки.gif') repeat-x;"> </td>
<td><img src="правый_нижний_угол_рамки.gif"></td>
</tr>

</table>

Devastator · 03.04.2009

Ответ: Таблица

оо)) благодарю за сей шаблон!

Devastator · 12.04.2009

Ответ: Таблица

Вот тут еще проблемка. Таблица полностью грузиться не сразу, а после загрузки контента. Есть команда, которая говорит браузеру, что бы он загрузил сначала указанные графические элементы?

Neval · 12.04.2009

Ответ: Таблица

Ээээ... вроде нету.. если речь идёт о том, что по мере загрузки таблица изменяет свои размеры, то тут выход только с использованием DIV'ов. К сожалению, в них я не силён, потому подобного примера не приведу

alexey_wmrinvest · 12.04.2009

Ответ: Таблица

Neval написал(а):
В данном случае ХТМЛ должен выглядеть примерно так:
<table cellspacing="0" cellpadding="0">

<tr height="высота_границы_рамки">
<td width="ширина_границы_рамки"><img src="левый_верхний_угол_рамки.gif"></td>
<td style="background: url('верхняя_граница_рамки.gif') repeat-x;"> </td>
<td width="ширина_границы_рамки"><img src="правый_верхний_угол_рамки.gif"></td>
</tr>

<tr>
<td style="background: url('левая_граница_рамки.gif') repeat-y;"> </td>
<td>Собственно содержимое таблицы </td>
<td style="background: url('правая_граница_рамки.gif') repeat-y;"> </td>
</tr>

<tr height="высота_границы_рамки">
<td><img src="левый_нижний_угол_рамки.gif"></td>
<td style="background: url('нижняя_граница_рамки.gif') repeat-x;"> </td>
<td><img src="правый_нижний_угол_рамки.gif"></td>
</tr>

</table>

очень непрактично!

Более удобный вариант:
В CSS проприсываем:

HTML:

mainblock_l_u {
  background: transparent url(Путь до картинки Левого верхнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}
.mainblock_r_u {
  background: transparent url(Путь до картинки Правого верхнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}
.mainblock_l_d {
  background: transparent url(Путь до картинки Левого нижнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}
.mainblock_r_d {
  background: transparent url(Путь до картинки Правого нижнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}

далее в самой теперь создаем таблицу:

HTML:

<table  width="100%" align="center" cellspacing="0" cellpadding="0">
<th class="mainblock_l_u"></th>
 <th  bgcolor="цвет фона"></th>
   <th class="mainblock_r_u"></th><tr>

<td bgcolor="цвет фона"></td>
<td bgcolor="цвет фона">
СОДЕРЖАНИЕ НАШЕГО БЛОКА
ВООПЩЕМ ТУТ ОСМЫСЛЕНЫЙ КОНТЕНТ
</td>
<td bgcolor="цвет фона"></td><tr>
<th class="mainblock_l_d"></th>
 <th bgcolor="цвет фона"></th>
   <th class="mainblock_r_d"></th><tr>
</table>

Neval · 13.04.2009

Ответ: Таблица

А кто практичность обсуждал? Если трогать практичность, то и Ваш вариант "сосёт", потому-что не факт, что заливка должна быть одним цветом. Не редко нужны градиенты, а это картинки

Devastator · 13.04.2009

Ответ: Таблица

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

очень непрактично!

Более удобный вариант:
В CSS проприсываем:

HTML:

mainblock_l_u {
  background: transparent url(Путь до картинки Левого верхнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}
.mainblock_r_u {
  background: transparent url(Путь до картинки Правого верхнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}
.mainblock_l_d {
  background: transparent url(Путь до картинки Левого нижнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}
.mainblock_r_d {
  background: transparent url(Путь до картинки Правого нижнего угла) no-repeat;
  width:  ширина картинки px;
  height: высота картинки px;
}

далее в самой теперь создаем таблицу:

HTML:

<table  width="100%" align="center" cellspacing="0" cellpadding="0">
<th class="mainblock_l_u"></th>
 <th  bgcolor="цвет фона"></th>
   <th class="mainblock_r_u"></th><tr>

<td bgcolor="цвет фона"></td>
<td bgcolor="цвет фона">
СОДЕРЖАНИЕ НАШЕГО БЛОКА
ВООПЩЕМ ТУТ ОСМЫСЛЕНЫЙ КОНТЕНТ
</td>
<td bgcolor="цвет фона"></td><tr>
<th class="mainblock_l_d"></th>
 <th bgcolor="цвет фона"></th>
   <th class="mainblock_r_d"></th><tr>
</table>

А чем этот вариант лучше предыдущего?

Neval · 13.04.2009

Ответ: Таблица

Тем, что стили вынесены в отдельный файл, а значит браузер может эти стили не грузить постоянно, а брать из кеша, тем самым ускоряя загрузку страницы. Кстати, попробуйте вынести все стили в отдельный файл, может это и решит описанную выше проблему.

Devastator · 21.04.2009

Ответ: Таблица

Хммм, ну я смотрю тут вставляются только углы рамки, тоесть, если я правильно понял - то рамка простая. Ну допустим, если у меня достаточно большая рамка, то в свою очередь, эти уголки прийдется делать массивными. Поясните пожалуйста

vladimir87 · 23.04.2009

Ответ: Таблица

код писать честно говоря лень, тем не менее рекомендую использовать вариант с CSS, как уже было сказано выше браузеру не нужно каждый раз грузить заново + браузер по определению CSS+HTML быстрее грузит.

Замечания:
1, width="100%" align="center" cellspacing="0" cellpadding="0" = жесть, тоже в css выноситься =
table
{
width: 100%;
border-collapse: collapse;
text-align: center;
padding: 0;
}

2.bgcolor - и это в CSS

Devastator · 24.04.2009

Ответ: Таблица

попробовал через css, как написал выше человек. ничего не получилось. хрень какая то - ничего не понимаю)) получились границы рамок красным, фиолетовым, синим и голубым. Не пойму, откуда это взялось) и бгколор содержание таблицы чего то был салатнивым) я 10 раз перепроверил код все норм)

Devastator · 25.04.2009

Ответ: Таблица

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

Neval · 28.04.2009

Ответ: Таблица

А что не получилось в предыдущем посте? Можно код глянуть?

Или это уже давно забыто?))

klin · 04.05.2009

Ответ: Таблица

<TABLE BORDER>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD> <TD>Item 3</TD> <TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD> <TD>Item 6</TD> <TD>Item 7</TD>
</TR>
</TABLE>

<TABLE BORDER>
<TR>
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD>
</TR>
<TR>
<TD>Item 3</TD> <TD>Item 4</TD> <TD>Item 5</TD>
</TR>
</TABLE>

<TABLE BORDER>
<TR>
<TH>Head1</TH> <TH>Head2</TH> <TH>Head3</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD>
</TR>
<TR>
<TD>D</TD> <TD>E</TD> <TD>F</TD>
</TR>
</TABLE>

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

<TABLE BORDER>
<TR>
<TH COLSPAN=2>Head1</TH>
<TH COLSPAN=2>Head2</TH>
</TR>
<TR>
<TH>Head 3</TH> <TH>Head 4</TH>
<TH>Head 5</TH> <TH>Head 6</TH>
</TR>
<TR>
<TD>A</TD> <TD>B</TD> <TD>C</TD> <TD>D</TD>
</TR>
<TR>
<TD>E</TD> <TD>F</TD> <TD>G</TD> <TD>H</TD>
</TR>
</TABLE>

вот пару шаблоидов

Neval · 04.05.2009

Ответ: Таблица

Читать ТС не пробовали?

Devastator написал(а):
Я хочу сделать графический дизайн таблицы, то есть что то вроде рамки.

Devastator · 16.05.2009

Ответ: Таблица

Neval написал(а):
Читать ТС не пробовали?

а что такое ТС?

Таблица

Devastator

Интересующийся

Neval

Профессионал

Devastator

Интересующийся

Devastator

Интересующийся

Neval

Профессионал

alexey_wmrinvest

Интересующийся

Neval

Профессионал

Devastator

Интересующийся

Neval

Профессионал

Devastator

Интересующийся

vladimir87

Интересующийся

Devastator

Интересующийся

Devastator

Интересующийся

Neval

Профессионал

klin

Новичок

Neval

Профессионал

Devastator

Интересующийся

Похожие темы