Блог

Главная - Вопросы по программированию - DIV vs table — для информации, что лучше для хранения информации на рекламном сайте?

DIV vs table — для информации, что лучше для хранения информации на рекламном сайте?

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я разработал HTML-шаблон, представляющий собой DIV с боковой панелью и заголовками (с выпадающим списком); две версии, одна с боковой панелью, одна без.

Сайт представляет собой чистый HTML для сайта подержанных автомобилей / транспортных средств (хотя данные будут храниться как PHP / MySQL, в любом случае, это здесь не так актуально, поскольку здесь основное внимание уделяется части дизайна контроллера представления модели).

Я начал переходить с HTML-таблицы на элементы div или, в некоторых тестовых случаях, на таблицу внутри div.

Для справки сравнение двух:

 table {
width: 600px;
}
td {
border-spacing:2px;
}
img {
width: 200px;
}

.vehicleinfo123 {
width: 600px;
display: block;
}

.vehicleinfo {
        display:  table;
        width:1020px;
        height: 340px;
        background-color:#eee;
        border:0px solid  #666666;
        border-spacing:5px;/*cellspacing:poor IE support for  this*/
       /* border-collapse:separate;*/
        margin-left: 100px;
        margin: 2em;
        margin-bottom: 4px;
}

.vehicleinfo table, td, p {
color: #333333;
}
.vehicleinfo table, td {
width: 100%;
}
.vehicleinfo-b img {
width: 364px;
float: left;
padding: 10px;
display: table-column;
padding-right: 20px;
}
.vehicleinfocontent {
color: #333333;
display: inline;
padding-left: 10px;
padding-right: 40px;
left: 40px;
width: 650px;
margin-left: 140px;
margin-right: 140px;
}

.vehicleinfo8content li {
display: table-cell;
margin-right: 200px;
list-style-position: outside;

}


.vehicleinfocontent body, p {
margin-right: 20px;
margin-left: 20px;
}
.vehicleinfoheader {
margin-top: -2px;
background-color: white;
width: 100%;
color: red;
border: 0px solid;
}

.vehicleinfoheader td {
    font-family: Helvetica, sans-serif;
    font-weight: 800;
    font-size: 18px;
    line-height: 22px;
    background-color: #225140;
    color: #FFFFFF;
    border: 0px; 
 <div class="vehicleinfo123">
<table>
    <tr>
        <td><img src="https://media.ed.edmunds-media.com/ford/fusion/2014/oem/2014_ford_fusion_sedan_titanium_fq_oem_3_815.jpg"></td>
        <td><h3>2016 FORD FUSION SEL 2.0 ECOBOOST</h3>
        flame red</td>
        <td>POA</td>
    </tr>
    <tr>
        <td><img src="https://media.ed.edmunds-media.com/oldsmobile/cutlass-ciera/1993/oem/1993_oldsmobile_cutlass-ciera_sedan_sl_fq_oem_1_500.jpg"></td>
        <td><h3>1993 CHEVROLET OLDSMOBILE CUTLASS 3.1 V6</h3>, 4 door sedan, blue</td>
        <td>POA</td>
    </tr>
</table>
</div>

    <div class="vehicleinfo">
    <table class="vehicleinfoheader">
    <tr>
        <td><h3>2021 HONDA CIVIC TOURING 2.0</h3></td>
        <td><h3>POA</h3></td>
    </tr>
</table>
      <div class="vehicleinfo-b"><img src="https://media.ed.edmunds-media.com/honda/civic/2021/oem/2021_honda_civic_sedan_touring_fq_oem_6_815.jpg"></div>
      <div class="vehicleinfo-content">
        <p>Bright red </p>
      </div>
    </div>

Это немного грубо сделано, но это просто для объяснения вещей.

В общем, если я создаю шаблон, что лучше, когда вы имеете дело с информацией; таблица, DIV внутри таблицы или, как я экспериментировал, flexbox и grid?

У меня хорошо работают основы дизайна шаблонов моего сайта, но я ищу совета у профессионалов, прежде чем они станут стандартом для публичного выпуска.

Комментарии:

1. Не используйте таблицы для структуры страницы. Этот стиль вышел из моды 20 лет назад. Самый современный способ сделать это — использовать flexbox

2. @ Rory McCrossan: Только что пробовал использовать flexbox, и он работает хорошо. Один вопрос… как мне преобразовать этот второй пример в моем исходном сообщении для работы с tlexbox, тот, у которого зеленый фон, а затем белый во втором div (пример Honda Civic)?

3. Изображение автомобиля, описание автомобиля, цена автомобиля для меня выглядят как табличные данные (хотя в примере это очень плохо написано)

4. @Quentin: Не был уверен, что правильно использовать для такого рода проектов. Это плохо написано, но это была компиляция различных дизайнов.

5. @Quentin спорно, однако, если что-то изменится в дизайне макета, поддерживать его будет кошмаром. Я бы всегда использовал гибкий макет вместо таблиц, если только это буквально не таблица данных.

Ответ №1:

Я не рекомендую использовать таблицу для отображения данных, потому что она не реагирует так же быстро, как элемент div.

или использование элемента таблицы в качестве шаблона устарело.

Если вы являетесь экспертом по системам flexbox и grid, лучше всего использовать div. Если вы знакомы с bootstrap, вы можете попробовать bootstrap fexbox.

При использовании flexbox, если у вас возникла проблема, пожалуйста, сделайте скриншот вашего шаблона и поделитесь им!