"Простая" проблема с созданием таблицы на HTML+CSS.

Вопрос имеет место быть?

  • Ага

    Голосов: 3 60,0%

  • Автор пойди отдохни

    Голосов: 2 40,0%
  • Всего проголосовало
    5
Статус
В этой теме нельзя размещать новые ответы.
stiv_

stiv_

Создатель
Регистрация
7 Апр 2013
Сообщения
7
Реакции
0
Приветствую! Прошу серьезно вникнуть в суть вопроса, потому что задача оказалась не простой, хотя большинство из вас скажет, что это пустяк на "пять минут". Если для вас это пустяк, то прошу поделиться как это сделать. Прошу только не посылать меня в html, css аналы и google. А background - style не предлагать;) ниже поймете почему.

Суть дела:
Нужно сделать таблицу цен. Казалось бы и все, но:

Внешний вид - таблица должна состоять из декоративных элементов таких как на образце прикрепленном к данной теме. Т.е. границы таблицы должны быть прозрачными. А бордюр(внутренние перегородки) таблицы представлен в виде декоративных элементов сверстанной дизайнером.

Функциональность - все свойства стандартной таблицы <table>. Так как предполагается частое изменение и добавление новых данных в такой тип таблицы.

Собственно образец таблицы (прошу не плеваться на эту табличку, т.к. это чисто схематичный вариант:( Образец.jpg
(еще раз образец на всяк случай: Для просмотра ссылки Войди или Зарегистрируйся)

С нетерпением жду ваших: "учи матчасть", "это элементарно" и "сделаю в пять минут".
Так как сам уже почти готов забить на html+css и собрать ее в в flv.

Спасибо!
 
почему бы не сделать дивную таблицу?
и еще - дизайн должен быть именно таким ?

а, ну и да - это элементарно, учи матчасть! :D
<-------------- добавлено через 19 сек. -------------->
лично я сделаю в пять минут!
 
:) Ну что же, получается лишь в div'e такое удастся собрать. буду пробовать)
 
ну дык.. table - это же прошлый век.. css3 html5 - вот современный технологии на это и обратите внимание, тоесть - учи матчасть )
 
вариант с таблицей и фоном проканал бы, если б не ограничение в отсутствие рамки. с помощью cellspacing таблички, background-image таблички, и background-color: white (скажем) td.
а так - да, вариант с div был бы в пору, я было начал писать пример, но мне это явно не пять минут займёт, я немного давненько не делал похожего.

и всё таки, это конечно жестячёк, но вот альтернативный вариант на скору руку :eek:
HTML: 
<html>
<head>
<style>
.bg
{
    background-image: url(bg.png);
}
td
{
    min-width: 50px;
    min-height: 50px;
}
tr.bg
{
    height: 5px;
}
td.bg, tr.bg td
{
    width: 5px !important;
    min-width: 5px !important;
}
tr.bg td
{
    height: 5px !important;
    min-height: 5px !important;
}
</style>
</head>
<body>
    <table class="table" cellpadding="0" cellspacing="0">
        <tr>
            <td>1</td>
            <td class="bg">&nbsp</td>
            <td>2</td>
            <td class="bg">&nbsp</td>
            <td>3</td>
            <td class="bg">&nbsp</td>
            <td>4</td>
        </tr>
        <tr class="bg">
            <td colspan="7"></td>
        </tr>
        <tr>
            <td>11</td>
            <td class="bg">&nbsp</td>
            <td>22</td>
            <td class="bg">&nbsp</td>
            <td>33</td>
            <td class="bg">&nbsp</td>
            <td>44</td>
        <tr class="bg">
            <td colspan="7"></td>
        </tr>
    </div>
</body>
</html>
table2.png
 

Вложения

  • bg.png
    bg.png
    436 байт · Просмотры: 8
  • table.png
    table.png
    1,7 KB · Просмотры: 23
Остается последний вопрос, как разместить в данной таблице текстурные файлы. Прикрепил готовый образец. Конечно, проще сделать грань в 1px и сделать background. Но что бы сохранить задумку художника, все таки нужно понять как пустить эти детали в правильном направлении.Образец2.jpg
Чую ответ уже где-то рядом. если получится результат выложу здесь
 
stiv_ написал(а):
Остается последний вопрос, как разместить в данной таблице текстурные файлы. Прикрепил готовый образец. Конечно, проще сделать грань в 1px и сделать background. Но что бы сохранить задумку художника, все таки нужно понять как пустить эти детали в правильном направлении.Посмотреть вложение 47485
Чую ответ уже где-то рядом. если получится результат выложу здесь
Нажмите для раскрытия...
я не совсем понимаю, что нужно, что такое текстурные файлы?

у вас есть два места, где вы это можете сделать, строка и часть ячеек, которыми фейкаются границы
 
хм, извиняюсь за свой русский) долгое время жил вне нашей родины.
Т.е. исходящие детали (концы этих линий) напоминают стрелки и если кадрировать эту таблицу (будто делаем шаблон для сайта) то получается, что мы имеем следующие ключевые элементы:Образец3.jpg
Подкрасил стороны для наглядности. Получил 6 элементов (палочек) таблицы, осталось их только правильно сложить))
 
stiv_ написал(а):
хм, извиняюсь за свой русский) долгое время жил вне нашей родины.
Т.е. исходящие детали (концы этих линий) напоминают стрелки и если кадрировать эту таблицу (будто делаем шаблон для сайта) то получается, что мы имеем следующие ключевые элементы:Посмотреть вложение 47487
Подкрасил стороны для наглядности. Получил 6 элементов (палочек) таблицы, осталось их только правильно сложить))
Нажмите для раскрытия...
всё равно не понял про палочки, но в принципе я кажется знаю о чём вы, в моём примере было colspan, а вы можете часть ячеек отделить и задать им другой фон. суть моего примера заключалась в том, что ячейки и строки использовались как места для фона (нужного) тоесть border в моём случае отсутствует и имитируется посредством tr/td. ну есть и альтернативный подход, как это сделать, но повторюсь, я не дизайнер разметки, я просто её достаточно долго использовал в прошлом.
 
css
Код: 
table {border-collapse: collapse; width:500px; line-height:1.3; border:none;}
td {padding: 5px; vertical-align: top; border-left:1px solid #cecece; border-bottom:1px solid #cecece;}
td.none {border-bottom:none;}

html
HTML: 
<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
        <tr>
            <td class="none">1</td>
            <td class="none">2</td>
            <td class="none">3</td>
            <td class="none">4</td>
            <td class="none">5</td>
        </tr>
    </tbody>
</table>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху