Как создать таблицу без обычного тега таблицы?

Как создать таблицу без тега <table>? Поэтому он должен выглядеть точно как обычная таблица, но без использования общих табличных тегов.Как создать таблицу без обычного тега таблицы?

источник

2015-11-02 Alex

вы можете использовать уль Li для создания или использования –

дел. Создайте вложенные div-s. Он настолько популярен в отзывчивом дизайне. Вы можете проверить http://stackoverflow.com/questions/17773186/how-to-use-divs-instead-of-tables. Также искать google для ** css div вместо таблицы ** – Soley

Вы можете использовать ul li вот так.

<html> 
 

 
<body> 
 
    <ul style="list-style: none outside none;"> 
 
    <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li> 
 
    <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li> 
 
    <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li> 
 
    </ul> 
 
</body> 
 

 
</html>

источник

2015-11-02 06:43:03

И, пожалуйста, избегайте использования встроенных стилей. Задайте для них отдельные классы CSS. –

Вы можете использовать CSS tables, которые имеют ту же функцию, что и HTML tables. Подробнее о свойствах здесь: The Anti-hero of CSS Layout - "display:table". Это было введено в CSS, чтобы избежать использования тегов table, но не обязательно, чтобы избежать использования табличного макета. Они все еще нуждаются в отображении табличных данных.

.table { 
 
    display: table; 
 
} 
 
.table-row { 
 
    display: table-row; 
 
} 
 
.table-cell { 
 
    display: table-cell; 
 
    padding: 10px; 
 
    border: 1px solid black; 
 
} 
 
.table-row:nth-child(even) { 
 
    background: lightblue; 
 
}

<div class="table"> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     First item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Second item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Third item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Fourth item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Fifth item 
 
    </div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     First item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Second item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Third item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Fourth item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Fifth item 
 
    </div> 
 
    </div> 
 
    <div class="table-row"> 
 
    <div class="table-cell"> 
 
     First item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Second item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Third item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Fourth item 
 
    </div> 
 
    <div class="table-cell"> 
 
     Fifth item 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-11-02 06:48:19

Я подтверждаю ответ Маноя –

@Marius Balaj: Вы делаете это, сохраняя, а не комментарий. В поле комментариев даже говорится: «Избегайте комментариев, таких как +1 или спасибо». – BoltClock

Вы можете создать с помощью DIV. И облегчите отзывчивость.

Используйте для этого display:table.

.table{ 
 
    display:table;   
 
    width:auto;     
 
    border:1px solid #666666;   
 
    
 
} 
 
.table-row{ 
 
    display:table-row; 
 
    width:auto; 
 
    clear:both; 
 
} 
 
.table-col{ 
 
    float:left; 
 
    display:table-column;   
 
    width:200px;   
 
    border:1px solid #ccc; 
 
}

<div class="table"> 
 
      <div class="table-row"> 
 
        <div class="table-col">1</div> 
 
       <div class="table-col">2</div> 
 
       <div class="table-col">3</div> 
 
      </div> 
 
      <div class="table-row"> 
 
       <div class="table-col">a</div> 
 
       <div class="table-col">b</div> 
 
       <div class="table-col">c</div> 
 
      </div> 
 
     </div>

источник

2015-11-02 06:50:04 ketan

Как создать таблицу без обычного тега таблицы?

ответ

Смежные вопросы