Помогите перевести табличную вёрстку в html на div

Тема в разделе "Верстка", создана пользователем Evgeniy, 13 май 2015.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. Evgeniy

    Evgeniy Создатель

    Регистр.:
    7 июн 2007
    Сообщения:
    33
    Симпатии:
    4
    Код:
    <table class="maintable">
        <tr>
            <td id="left">
                <div class="sideblock">
                    <div class="menu">
                        меню<br>
                                  меню<br>
                                  меню<br>
                                  меню<br>
                                  меню<br>
                                  меню<br>
                    </div>
                   </div>
            </td>
            <td id="right">
              контент
          контент<br>
          контент<br>
          контент
            </td>
       </tr>
    </table>
    Код:
    table.maintable{
        width:100%;
        border-collapse: collapse;
        border-spacing: 0;
        cellspacing:0;
        border:0;
    }
    table.maintable td{
        border:0;
        vertical-align:top;
    }
    #left{
        width:197px;
        padding:5px 0 0 0;
        border-right:3px solid #eee;
      background-color: green;
    }
    #right{
        padding-top:5px;
    background-color: red; 
    }
     
  2. Sunday

    Sunday

    Регистр.:
    13 дек 2009
    Сообщения:
    732
    Симпатии:
    323
  3. Evgeniy

    Evgeniy Создатель

    Регистр.:
    7 июн 2007
    Сообщения:
    33
    Симпатии:
    4
    не правильно заголовок написал. не обязательно html5
     
  4. DevOrc

    DevOrc Создатель

    Регистр.:
    5 июн 2014
    Сообщения:
    31
    Симпатии:
    10
    Нет ничего проще онлайн: http://www.tabletodivconverter.com/
    Код:
    <style type="text/css">
            .table {
                display: table;
            }
    
            .row {
                display: table-row;
            }
    
            .column {
                display: table-cell;
                vertical-align: top;
            }
        </style>
       
    <div>
        <div>
            <div>
                <div>
                    <div>
                        меню<br>
                                  меню<br>
                                  меню<br>
                                  меню<br>
                                  меню<br>
                                  меню<br>
                    </div>
                   </div>
            </div>
            <div>
              контент
          контент<br>
          контент<br>
          контент
            </div>
       </div>
    </div>
    
     
  5. BaNru

    BaNru Постоялец

    Регистр.:
    20 ноя 2008
    Сообщения:
    126
    Симпатии:
    52
    DevOrc, а вы проверяли код, который показали?

    Я вот смотрю и не могу понять, а как классы в стилях привязываются к дивам?

    Evgeniy
    1) cellspacing у CSS не существует, вместо него используется border-spacing
    2) На скорую руку так http://jsfiddle.net/BaNru/nf2e1hay/
    хотя конечно надо смотреть задачу, ведь возможно таблицы и не нужны.
    И таблицы надо использовать там, где действительно необходимы таблицы, а не пытаться панически и фанатически их реализовать на дивах.
     
    Последнее редактирование: 14 май 2015
  6. DevOrc

    DevOrc Создатель

    Регистр.:
    5 июн 2014
    Сообщения:
    31
    Симпатии:
    10

    Вот, набросал, но идея наверно понятна http://codepen.io/anon/pen/QbNxdd
     
  7. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.130
    Симпатии:
    668
  8. bezzubtsev

    bezzubtsev

    Регистр.:
    14 май 2015
    Сообщения:
    245
    Симпатии:
    71
    Для списка меню лучше всего использовать <ul> и <li>
    <br> - это плохо и стилями изменять высоту не удобно будет.
     
  9. Evgeniy

    Evgeniy Создатель

    Регистр.:
    7 июн 2007
    Сообщения:
    33
    Симпатии:
    4
    <br> это для примера использовалось
     
Статус темы:
Закрыта.