MMGP logo
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 649,757 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение - зарегистрируйтесь прямо сейчас.
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
Первый пост Опции темы
Старый 03.04.2009, 17:23
#1
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Таблица

Здравствуйте, люди если кто-то дружит с дизайном объясните по-подробнее. Я хочу сделать графический дизайн таблицы, то есть что то вроде рамки. Гипотетически, я понимаю как это делается. Рамка делается в фотошопе и нарезается. Но я хрен пойму, как слепить куски воедино)
Пробовал и так, и через дримвивер.. постеил куча форумов.. Я чего то очень важного не знаю) подскажите пожалуйста..
Devastator вне форума
Старый 03.04.2009, 18:31
#2
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 01.04.2007
Сообщений: 1,494
Благодарностей: 210
Ответ: Таблица

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

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

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

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

</table>
Neval вне форума
Сказали спасибо:
Devastator (03.04.2009)
Старый 03.04.2009, 22:33
#3
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

оо)) благодарю за сей шаблон!
Devastator вне форума
Старый 12.04.2009, 10:04
#4
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

Вот тут еще проблемка. Таблица полностью грузиться не сразу, а после загрузки контента. Есть команда, которая говорит браузеру, что бы он загрузил сначала указанные графические элементы?
Devastator вне форума
Старый 12.04.2009, 13:20
#5
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 01.04.2007
Сообщений: 1,494
Благодарностей: 210
Ответ: Таблица

Ээээ... вроде нету.. если речь идёт о том, что по мере загрузки таблица изменяет свои размеры, то тут выход только с использованием DIV'ов. К сожалению, в них я не силён, потому подобного примера не приведу
Neval вне форума
Старый 12.04.2009, 23:45
#6
Интересующийся
 
Пол: Мужской
Инвестирую в: Свой бизнес
Регистрация: 24.03.2009
Сообщений: 10
Благодарностей: 5
Ответ: Таблица

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

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

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

<tr height="высота_границы_рамки">
<td><img src="левый_нижний_угол_рамки.gif"></td>
<td style="background: url('нижняя_граница_рамки.gif') repeat-x;">&nbsp;</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>
alexey_wmrinvest вне форума
Старый 13.04.2009, 14:40
#7
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 01.04.2007
Сообщений: 1,494
Благодарностей: 210
Ответ: Таблица

А кто практичность обсуждал? Если трогать практичность, то и Ваш вариант "сосёт", потому-что не факт, что заливка должна быть одним цветом. Не редко нужны градиенты, а это картинки :P
Neval вне форума
Старый 13.04.2009, 17:43
#8
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

Цитата:
Сообщение от 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>
А чем этот вариант лучше предыдущего?
Devastator вне форума
Старый 13.04.2009, 18:13
#9
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 01.04.2007
Сообщений: 1,494
Благодарностей: 210
Ответ: Таблица

Тем, что стили вынесены в отдельный файл, а значит браузер может эти стили не грузить постоянно, а брать из кеша, тем самым ускоряя загрузку страницы. Кстати, попробуйте вынести все стили в отдельный файл, может это и решит описанную выше проблему.
Neval вне форума
Старый 21.04.2009, 14:19
#10
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

Хммм, ну я смотрю тут вставляются только углы рамки, тоесть, если я правильно понял - то рамка простая. Ну допустим, если у меня достаточно большая рамка, то в свою очередь, эти уголки прийдется делать массивными. Поясните пожалуйста
Devastator вне форума
Старый 23.04.2009, 02:01
#11
Интересующийся
 
Пол: Мужской
Регистрация: 24.02.2009
Сообщений: 13
Благодарностей: 3
Ответ: Таблица

код писать честно говоря лень, тем не менее рекомендую использовать вариант с 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
vladimir87 вне форума
Старый 24.04.2009, 13:06
#12
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

попробовал через css, как написал выше человек. ничего не получилось. хрень какая то - ничего не понимаю)) получились границы рамок красным, фиолетовым, синим и голубым. Не пойму, откуда это взялось) и бгколор содержание таблицы чего то был салатнивым) я 10 раз перепроверил код все норм)
Devastator вне форума
Старый 25.04.2009, 15:38
#13
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

нарыл, что помочь может блочная верстка сайта. Только я с ней совсем не знаком. Может кто нибудь понимает или скинет пример блочной верстки подобных таблиц
Devastator вне форума
Старый 28.04.2009, 22:42
#14
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 01.04.2007
Сообщений: 1,494
Благодарностей: 210
Ответ: Таблица

А что не получилось в предыдущем посте? Можно код глянуть? Или это уже давно забыто?))
Neval вне форума
Старый 04.05.2009, 15:05
#15
Заблокированный
 
Пол: Мужской
Инвестирую в: Свой бизнес
Регистрация: 16.06.2007
Сообщений: 2,663
Благодарностей: 426
Ответ: Таблица

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





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

Последний раз редактировалось klin; 04.05.2009 в 15:07.
klin вне форума
Старый 04.05.2009, 17:51
#16
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 01.04.2007
Сообщений: 1,494
Благодарностей: 210
Ответ: Таблица

Читать ТС не пробовали?
Цитата:
Сообщение от Devastator Посмотреть сообщение
Я хочу сделать графический дизайн таблицы, то есть что то вроде рамки.
Neval вне форума
Старый 16.05.2009, 08:42
#17
Интересующийся
 
Регистрация: 06.05.2007
Сообщений: 11
Благодарностей: 0
Автор темы Ответ: Таблица

Цитата:
Сообщение от Neval Посмотреть сообщение
Читать ТС не пробовали?
а что такое ТС?
Devastator вне форума
Войдите, чтобы оставить комментарий.
Быстрый переход