Таблица - HTML & Веб-Дизайн | MMGP
Присоединяйтесь к нашему инвестиционному форуму, на котором уже 435,002 пользователей. Чтобы получить доступ ко многим закрытым разделам и начать общение -  .
Обсуждение веб-дизайна. Здесь можно получить помощь по вопросам HTML/CSS и т.д.
При поддержке
Сеть доставки контента, выбранная космическими агентствами
Важная информация
Есть опыт работы с криптовалютами? Заведи Крипто-Блог и заработай на нём!
Торгуешь криптовалютой? Оставь свой отзыв о бирже!
Разбираешься в криптовалюте? Прими участие в акции Крипторайтер 2.0 (2-10 поинтов за 1000 символов)
Изменения в акции "Оплата за сообщения".
Как на одной публикации заработать $100
Ответить
 
Первый пост Опции темы
Сообщения прочитаны и/или просмотрены Сегодня, 10:32
Старый 03.04.2009, 18:23
#1
Интересующийся
 
Регистрация: 07.05.2007
Сообщений: 9
Благодарностей: 0
УГ: 0
КП: 0.000
Таблица

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

В данном случае ХТМЛ должен выглядеть примерно так:
<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, 23:33
#3
Интересующийся
 
Регистрация: 07.05.2007
Сообщений: 9
Благодарностей: 0
УГ: 0
КП: 0.000
Автор темы Ответ: Таблица

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

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

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

Цитата:
Сообщение от 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, 15:40
#7
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 02.04.2007
Сообщений: 1,369
Благодарностей: 210
УГ: 0
КП: 0.000
Ответ: Таблица

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

Цитата:
Сообщение от 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, 19:13
#9
Профессионал
 
Пол: Мужской
Адрес: Киев
Инвестирую в: знания
Регистрация: 02.04.2007
Сообщений: 1,369
Благодарностей: 210
УГ: 0
КП: 0.000
Ответ: Таблица

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

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

код писать честно говоря лень, тем не менее рекомендую использовать вариант с 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, 14:06
#12
Интересующийся
 
Регистрация: 07.05.2007
Сообщений: 9
Благодарностей: 0
УГ: 0
КП: 0.000
Автор темы Ответ: Таблица

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

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

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

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





вот пару шаблоидов
Баннер: {{ slide.title }}

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

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

Цитата:
Сообщение от Neval Посмотреть сообщение
Читать ТС не пробовали?
а что такое ТС?
Devastator вне форума  
Ответить
Войдите, чтобы оставить комментарий.
Сообщения прочитаны и/или просмотрены Сегодня, 10:32
Опции темы

Быстрый переход


Случайные темы
Аватар Anastas
Видео: "Гранд Макет Россия" обзор
От Anastas в разделе «Разное: Медиа портал»
Аватар vadymkull
Киев
От vadymkull в разделе «Українці»
Аватар kislov
[ICO][BOUNTY] Planes Cloud Token (PST) 09-30.09.2017
От kislov в разделе «Завершенные и отмененные ICO»
Аватар Varkan
Платежное подразделение Alibaba начинает использование технологии блокчейн
От Varkan в разделе «Новости в мире финансов и инвестиций»
Аватар bakster
CalperStock - calperstock.biz
От bakster в разделе «Архив: Список проблемных/неактивных/закрытых программ»
.     
Пользователей
435,002
Тем
504,826
Сообщений
12,674,204

mmgp.telegram