1. Задавайте здесь вопросы о коде, которые не подходят в другие разделы, такие как:
    Дизайн > Верстка
    PHP > Как сделать на PHP
    Скрыть объявление

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

Тема в разделе "Web Coding", создана пользователем stiv_, 7 апр 2013.

?

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

  1. Ага

    3 голосов
    60,0%
  2. Автор пойди отдохни

    2 голосов
    40,0%
Статус темы:
Закрыта.
Модераторы: latteo
  1. stiv_

    stiv_ Создатель

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

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

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

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

    Собственно образец таблицы (прошу не плеваться на эту табличку, т.к. это чисто схематичный вариант:( Образец.jpg
    (еще раз образец на всяк случай: http://tinypic.com/r/wwdguv/6)

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

    Спасибо!
     
  2. GriZone

    GriZone Управляющий

    Administrator
    Регистр.:
    17 мар 2006
    Сообщения:
    429
    Симпатии:
    2.011
    почему бы не сделать дивную таблицу?
    и еще - дизайн должен быть именно таким ?

    а, ну и да - это элементарно, учи матчасть! :D
    <-------------- добавлено через 19 сек. -------------->
    лично я сделаю в пять минут!
     
  3. stiv_

    stiv_ Создатель

    Регистр.:
    7 апр 2013
    Сообщения:
    7
    Симпатии:
    0
    :) Ну что же, получается лишь в div'e такое удастся собрать. буду пробовать)
     
  4. GriZone

    GriZone Управляющий

    Administrator
    Регистр.:
    17 мар 2006
    Сообщения:
    429
    Симпатии:
    2.011
    ну дык.. table - это же прошлый век.. css3 html5 - вот современный технологии на это и обратите внимание, тоесть - учи матчасть )
     
  5. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    вариант с таблицей и фоном проканал бы, если б не ограничение в отсутствие рамки. с помощью 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 КБ
      Просмотров:
      23
    stiv_ и latteo нравится это.
  6. stiv_

    stiv_ Создатель

    Регистр.:
    7 апр 2013
    Сообщения:
    7
    Симпатии:
    0
    Остается последний вопрос, как разместить в данной таблице текстурные файлы. Прикрепил готовый образец. Конечно, проще сделать грань в 1px и сделать background. Но что бы сохранить задумку художника, все таки нужно понять как пустить эти детали в правильном направлении. Образец2.jpg
    Чую ответ уже где-то рядом. если получится результат выложу здесь
     
  7. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    я не совсем понимаю, что нужно, что такое текстурные файлы?

    у вас есть два места, где вы это можете сделать, строка и часть ячеек, которыми фейкаются границы
     
  8. stiv_

    stiv_ Создатель

    Регистр.:
    7 апр 2013
    Сообщения:
    7
    Симпатии:
    0
    хм, извиняюсь за свой русский) долгое время жил вне нашей родины.
    Т.е. исходящие детали (концы этих линий) напоминают стрелки и если кадрировать эту таблицу (будто делаем шаблон для сайта) то получается, что мы имеем следующие ключевые элементы: Образец3.jpg
    Подкрасил стороны для наглядности. Получил 6 элементов (палочек) таблицы, осталось их только правильно сложить))
     
  9. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.722
    Симпатии:
    2.097
    всё равно не понял про палочки, но в принципе я кажется знаю о чём вы, в моём примере было colspan, а вы можете часть ячеек отделить и задать им другой фон. суть моего примера заключалась в том, что ячейки и строки использовались как места для фона (нужного) тоесть border в моём случае отсутствует и имитируется посредством tr/td. ну есть и альтернативный подход, как это сделать, но повторюсь, я не дизайнер разметки, я просто её достаточно долго использовал в прошлом.
     
  10. efir

    efir Создатель

    Регистр.:
    11 сен 2006
    Сообщения:
    46
    Симпатии:
    5
    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>
     
Статус темы:
Закрыта.