Повторяющиеся таблицы (стиль интернет магазина)

@OrionIX · Регистрация: 19.12.2012

Студворк — интернет-сервис помощи студентам

Необходимо сделать поле с табличками такого типа:

Повторяющиеся таблицы (стиль интернет магазина)

Так сказать подобие оформления интернет магазинов.
Таких таблиц сначала будет допустим 3, потом их количество будет менятся и заполнятся другой информацией.
При нажатии на любое их 3х полей таблицы - срабатывает ссылка (т.е. <a> снаружи таблицы).

В итоге хочется получить отдельный скрипт/код с параметрами таблицы, а внутри "голубого" поля писать только сокращенные данные. Грубо такого вида:

HTML5
1
<td class="tabl" txt1="ТЕКСТ 1" txt2="мелкий текст 1" pict="../pict/pict-1.gif" src="https://www.cyberforum.ru/"></td>

ps: Если эта тема относится не к яве - направьте/переместите пожалуйста. Буду благодарен.

@kalabuni · 29.12.2012, 03:03

можно сделать следующим образом:

1) прописать js-функцию, которая будет создавать табличку и помещать её на странице

2) передавать этой функции в качестве параметров:

а. текст#1
б. текст#2 (вы его назвали "мелким")
в. путь к картинке
г.* место, куда эту табличку надо вставить (например, в виде значения id тега), либо координаты левого верхнего угла для её позиционирования на странице
д.* возможно, ещё и значение для id этой таблички, если потом его как-то предполагается использовать

3)* и, по-любому, необходимо определиться с геометрией этой таблички - надо заранее определить габариты всех её трёх ячеек

если точно ответите на вопросы, отмеченные звёздочками, то написать таковую функцию - дело десятка минут

@OrionIX · 29.12.2012, 23:42 **[ТС]**

Так чтоб было понятно о чем вообще идет речь...
Страница будет такого плана:

Сделана она как "домашняя стартовая страница". При выборе меню/раздела слева - справа загружается iframe и появляются ряд ссылок на сайты (разные). Собственно здесь справа и будут использоватся данные таблички (с фоновым рисунком!).
Меню 9шт, табличек на странице справа 3-10шт, в итоге 27-90 раз прийдется рисовать эти таблицы.
Поэтому и хотелось бы их загнать как-то в общий CSS-стиль.

Ответы:
Г) Она будет в фрейме. Т.е. в body:

HTML5
1
2
3
4
5
6
7
<table width=697 height=546 cellSpacing=20px>
<tr>
/* Таблица */
/* Таблица */
</tr>
/* и т.д. */
</table>

Д) Непонятен вопрос. "id=table1" может.

3) 320х90 общий габарит, 90х90 поле рисунка, 10 невидимая рамка рисунка, 220х48 текст1, 220х42 текст2.
Но думал что код будет не сильно страшный и смогу габариты ячеек подправить.

Как я понимаю, использовать один общий стиль таблиц для всех страниц-фреймов - более разумно, чем на каждой из 9 этих страниц рисовать десятки одинаковых кодов для каждой такой таблички. Что скажете по этому поводу?

@kalabuni · 30.12.2012, 06:50

ещё раз:

1) вы сами назвали вашу тему "Повторяющиеся таблицы"
не "Повторяющиеся части таблицы" и не "Повторяющиеся кусочки таблицы",
а именно "Повторяющиеся таблицы"

2) таблица - это HTML-код, содержащий теги <table>и ВСЁ, что между ними</table>

3) всякий HTML-код можно вставить в какое-то конкретное место страницы
-- можно вставить внутрь <div id="place1"></div>, а можно внутрь <td id="place2"></td>...
-- а можно вставить просто на страницу, используя позиционирование <table style="position: absolute; top: 123px; left: 234px">...</table>
именно это конкретное место я и имел в виду, когда писал пункт г)
а уж где сама эта страница будет - во фрейме, в ифрейме или в отдельном окне - вопрос шестнадцатый

4) если потом, после вставки, с этими вновь вставленными таблицами надо будет что-то с помощь скрипта делать (вдруг захочется их "скрывать/показывать" по каким-то событиям или сортировать на странице по какому-то критерию и т.д.), то к каждой из этих вновь вставленных таблиц надо будет конкретно обратиться
обратиться будет проще всего, если у каждой таковой вставленной таблицы будет свой уникальный id:
вставили первую <table id="tbl0">...</table>, потом вторую - <table id="tbl1">...</table>... потом двенадцатую <table id="tbl11">...</table>
js-функции нужно каждый раз сообщать - какое именно значение для данной вставляемой таблицы ему нужно назначить
именно это я и имел в виду, когда писал пункт д)

5) разумеется, вновь вставляемые таблицы будут отображаться с учётом тех правил стиля, кои вы пропишете в стилевом блоке

@OrionIX · 01.01.2013, 18:56 **[ТС]**

Непойму чем мой ответ на "г" был непонятен.

вдруг захочется их "скрывать/показывать" по каким-то событиям или сортировать на странице по какому-то критерию и т.д

Тут согласен. Щас страница статичная, но в дальнейшем может послужить шаблоном для интернет-магазина с каталогом. Номерация: TBL_001, TBL_002 и т.д.

Сделал страницу полностю как она должна выглядеть:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<HTML>
<HEAD>
<TITLE> &nbsp Link &nbsp </TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<base target="_top">
<style>
.BTN {background-color: #7A3537; }  /* вместо цвета будет img_BG-1 */
.BTNon {background-color: #9F4210; cursor: pointer}   /* вместо цвета будет img_BG-2 */
.TXT_UP {font-family: Times New Roman; font-size: 32px; color: #FFFFFF; text-decoration:none; text-align: center; vertical-align: bottom;}
.TXT_DN {font-family: Times New Roman; font-size: 16px; color: #C0C0C0; text-decoration:none; text-align: center; vertical-align: middle;}
</style>
</HEAD>
 
<BODY bgcolor="#4C8354">
<table width=697 height=549 cellSpacing=19px cellPadding=0>
 
<tr>
    <td height=87 id=TBL_001 class=BTN onMouseOver=this.className='BTNon' onMouseOut=this.className='BTN'>
        <table width=320 height=87 cellSpacing=8px cellPadding=0>
        <a href="http://www.yandex.ru/">   /* разное для каждой таблицы */
            <tr>
                <td height=42 class=TXT_UP>YANDEX</td>   /* разное для каждой таблицы */
                <td width=75 bgcolor="#CCCC77" rowspan=2></td>   /* вместо цвета будет img-1 */
            </tr><tr>
                <td class=TXT_DN>www.yandex.ru</td>   /* разное для каждой таблицы */
            </tr>
        </a>
        </table>
    </td>
    <td height=87 id=TBL_002 class=BTN onMouseOver=this.className='BTNon' onMouseOut=this.className='BTN'>
        <table width=320 height=87 cellSpacing=8px cellPadding=0>
        <a href="http://www.google.com/">
            <tr>
                <td height=42 class=TXT_UP>GOOGLE</td>
                <td width=75 bgcolor="#CCCC77" rowspan=2></td>   /* вместо цвета будет img-2 */
            </tr><tr>
                <td class=TXT_DN>www.google.com</td>
            </tr>
        </a>
        </table>
    </td>
</tr><tr>
    <td height=87 id=TBL_003 class=BTN onMouseOver=this.className='BTNon' onMouseOut=this.className='BTN'>
        <table width=320 height=87 cellSpacing=8px cellPadding=0>
        <a href="http://www.yahoo.com/">
            <tr>
                <td height=42 class=TXT_UP>YAHOO</td>
                <td width=75 bgcolor="#CCCC77" rowspan=2></td>   /* вместо цвета будет img-3 */
            </tr><tr>
                <td class=TXT_DN>www.yahoo.com</td>
            </tr>
        </a>
        </table>
    </td>
 
</tr>
<tr></tr>
 
</table>
</BODY>
</HTML>

В этом коде мне очень ненравятся "повторяющиеся ЭЛЕМЕНТЫ" между <td ...> и </td>.
О них я и веду речь, чтоб заменить эти рукописи на более сокращенные.
Таких файлов будет 9 (под каждый пункт меню слева). Т.е. общий шаблон/стиль элементов желательно загнать в css файл.

Тут думаю понятны места, id, геометрия элементов.

@OrionIX · 04.01.2013, 19:46 **[ТС]**

Kalabuni, ну что, получится что-то сделать?
Или может кто-то другой делала подобные таблицы

@kalabuni · 05.01.2013, 03:16

Сообщение от PrinceSaint

ну что, получится что-то сделать?

нет, не получится

1) дочерними элементами тега <table> не могут быть теги <a>
2) все строки одной таблицы должны иметь одинаковое суммарное число colspan
3) значения атрибутов должны быть все закавычены, а не выборочно по какой-то вашей прихоти
4) если у атрибута имеется прямой аналог в правилах стиля, то надо использовать правила стиля
__________________

в общем, тиражировать скриптом тот грязно-бредовый код, который вы написали, мне не хочется
если разберётесь и исправите, то, мейби, и помогу

@OrionIX · 05.01.2013, 13:47 **[ТС]**

1) Я незнаю как правильно и куда его вынести.
2 и 4) Мне непонятно что именно вы хотите.
3) Да, расставить кавычки дурное дело. Раньше как-то не предавал этому особого значения.

Кликните здесь для просмотра всего текста

С кавычками

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<td height="87" id="TBL_001" class="BTN" onMouseOver=this.className="BTNon" onMouseOut=this.className="BTN">
        <table width="320" height="87" cellSpacing="8px" cellPadding="0">
        <a href="http://www.yandex.ru/">
            <tr>
                <td height="42" class="TXT_UP">ßíäåêñ</td>
                <td width="75" bgcolor="#CCCC77" rowspan="2"></td>
            </tr><tr>
                <td class="TXT_DN">http://www.yandex.ru/</td>
            </tr>
        </a>
        </table>
    </td>

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

@OrionIX · 08.01.2013, 12:14 **[ТС]**

Народ, ну неповерю что никто с таким не сталкивался.
Помойму сайты инет-магазинов на таких таблицах и построены.
Может у кого-то хоть похожий скриптик есть? Или встречали на форуме, хоть подскажите где искать?

@OrionIX · 13.01.2013, 00:05 **[ТС]**

Вопрос выше решен небыл. Т.е. страницу буду делать копированием этих самых таблиц.
Чтоб не плодить темы - спрошу здесь.

На странице (выше) есть стили:

HTML5
1
2
3
4
5
6
<style>
.BTN {background-color: #7A3537; }  
.BTNon {background-color: #9F4210; cursor: pointer}   
.TXT_UP {font-family: Times New Roman; font-size: 32px; color: #FFFFFF; text-decoration:none; text-align: center; vertical-align: bottom;}
.TXT_DN {font-family: Times New Roman; font-size: 16px; color: #C0C0C0; text-decoration:none; text-align: center; vertical-align: middle;}
</style>

На самой странице несколько ячеек типа:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<td height="87" id="TBL_001" class="BTN" onMouseOver="this.className='BTNon'" onMouseOut="this.className='BTN'">
        <table width="320" height="87" cellSpacing="8px" cellPadding="0">
        <a href="http://www.yandex.ru/">
            <tr>
                <td height="42" class="TXT_UP">Яндекс</td>
                <td width="75" bgcolor="#CCCC77" rowspan="2"></td>
            </tr><tr>
                <td class="TXT_DN">http://www.yandex.ru/</td>
            </tr>
        </a>
        </table>
</td>

Цель сократить код таблиц, загнав максимум данных в стили.

Вопросы:
1) Куда и как перенести тег <a> чтоб он правильно распологался в коде и корректно работал? Нужно чтоб срабатывал по всей этой ячейке.
2) Можно ли width/height/cellSpacing/rowspan/onMouseOver и т.п. занести в стили, а в ячейках писать только <td (или table) class="xxxxx">?

Если кому не сложно, отредактируйте пожалуйста код (согласно пожеланиям выше). Возможно надо будет создать пару дополнительных стилей. Вроде бы код готов, но хотелось бы расставить все на свои места )

@kalabuni · 13.01.2013, 02:50

Сообщение от PrinceSaint

1) Куда и как перенести тег <a> чтоб он правильно распологался в коде и корректно работал? Нужно чтоб срабатывал по всей этой ячейке.

поменяйте местами строки <table> и <a>, а также </a> и </table>

Сообщение от PrinceSaint

2) Можно ли width/height/cellSpacing/rowspan/onMouseOver и т.п. занести в стили, а в ячейках писать только <td (или table) class="xxxxx">?

я вам выше писал: те атрибуты, которые имеют прямые аналоги в стилях - их следует заменить на правила стилей

прямой аналог для width знаете? меняйте <td width="123"> на <td style="width: 123px">
прямой аналог для height знаете? меняйте <td height="234"> на <td style="height: 234px">
прямой аналог для cellSpacing не знаете? не меняйте
и т.д.

желаете потом всё вынесенное в стили убрать из тега и оформить классом? оформляйте

@OrionIX · 13.01.2013, 19:42 **[ТС]**

Сообщение от kalabuni

прямой аналог для height знаете? меняйте <td height="234"> на <td style="height: 234px">
прямой аналог для cellSpacing не знаете? не меняйте
и т.д.

"Знаете-незнаете". Я в шоке от вашей позиции.
Если спрашую - то видимо незнаю. Не сталкивался я раньше с заменой атрибутов на стили.

Щас код выглядит так:

HTML5
1
2
3
4
5
6
7
8
<style>
.BTN {background-color: #7A3537; }
.BTNon {background-color: #9F4210; cursor: pointer; }
.TXT_UP {height: 42px; font-family: Times New Roman; font-size: 32px; color: #FFFFFF; text-decoration:none; text-align: center; vertical-align: bottom; }
.TXT_DN {font-family: Times New Roman; font-size: 16px; color: #C0C0C0; text-decoration:none; text-align: center; vertical-align: middle; }
.TBLL {width: 320px; height: 87px; border-spacing: 8px; padding: 0px; }
.TDIMG {width: 71px; }
</style>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
    <td class="BTN" onMouseOver=this.className="BTNon" onMouseOut=this.className="BTN">
        <a href="http://www.yandex.ru/">
        <table class="TBLL">
            <tr>
                <td class="TXT_UP">Яндекс</td>
                <td class="TDIMG" rowspan="2"><img src="https://www.cyberforum.ru/Ico/Ya.gif"></td>
            </tr><tr>
                <td class="TXT_DN">http://www.yandex.ru/</td>
            </tr>
        </table>
        </a>
    </td>

1) Тег <a> в ИЕ неработает (в опере работает)
2) стили border-spacing и padding в ИЕ неработают
3) Можно ли rowspan занести в стили?
4) Можно ли onMouseOver/onMouseOut занести в стили? (вроде б есть hover, но непойму как срабатывает)

Новые блоги и статьи Все статьи Все блоги /
Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	29.12.2012, 03:03
	можно сделать следующим образом: 1) прописать js-функцию, которая будет создавать табличку и помещать её на странице 2) передавать этой функции в качестве параметров: а. текст#1 б. текст#2 (вы его назвали "мелким") в. путь к картинке г.* место, куда эту табличку надо вставить (например, в виде значения id тега), либо координаты левого верхнего угла для её позиционирования на странице д.* возможно, ещё и значение для id этой таблички, если потом его как-то предполагается использовать 3)* и, по-любому, необходимо определиться с геометрией этой таблички - надо заранее определить габариты всех её трёх ячеек если точно ответите на вопросы, отмеченные звёздочками, то написать таковую функцию - дело десятка минут 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	30.12.2012, 06:50
	ещё раз: 1) вы сами назвали вашу тему "Повторяющиеся таблицы" не "Повторяющиеся части таблицы" и не "Повторяющиеся кусочки таблицы", а именно "Повторяющиеся таблицы" 2) таблица - это HTML-код, содержащий теги <table>и ВСЁ, что между ними</table> 3) всякий HTML-код можно вставить в какое-то конкретное место страницы -- можно вставить внутрь <div id="place1"></div>, а можно внутрь <td id="place2"></td>... -- а можно вставить просто на страницу, используя позиционирование <table style="position: absolute; top: 123px; left: 234px">...</table> именно это конкретное место я и имел в виду, когда писал пункт г) а уж где сама эта страница будет - во фрейме, в ифрейме или в отдельном окне - вопрос шестнадцатый 4) если потом, после вставки, с этими вновь вставленными таблицами надо будет что-то с помощь скрипта делать (вдруг захочется их "скрывать/показывать" по каким-то событиям или сортировать на странице по какому-то критерию и т.д.), то к каждой из этих вновь вставленных таблиц надо будет конкретно обратиться обратиться будет проще всего, если у каждой таковой вставленной таблицы будет свой уникальный id: вставили первую <table id="tbl0">...</table>, потом вторую - <table id="tbl1">...</table>... потом двенадцатую <table id="tbl11">...</table> js-функции нужно каждый раз сообщать - какое именно значение для данной вставляемой таблицы ему нужно назначить именно это я и имел в виду, когда писал пункт д) 5) разумеется, вновь вставляемые таблицы будут отображаться с учётом тех правил стиля, кои вы пропишете в стилевом блоке 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	04.01.2013, 19:46 [ТС]
	Kalabuni, ну что, получится что-то сделать? Или может кто-то другой делала подобные таблицы 0

@OrionIX 11 / 11 / 2 Регистрация: 19.12.2012 Сообщений: 177
	08.01.2013, 12:14 [ТС]
	Народ, ну неповерю что никто с таким не сталкивался. Помойму сайты инет-магазинов на таких таблицах и построены. Может у кого-то хоть похожий скриптик есть? Или встречали на форуме, хоть подскажите где искать? 0