Фактическая таблица Vs. Таблица Div

Ответ 1

Семантически некорректно моделировать таблицы данных с помощью div и вообще не имеет отношения к производительности, поскольку рендеринг является мгновенным. Шея бутылки исходит из JavaScript или чрезвычайно длинных страниц с большим количеством вложенных элементов, которые обычно в старые времена составляют 100 вложенных таблиц для создания макетов.

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

Производительность, у вас есть пара более байт с примером div, lol:)

Ответ 2

В первом случае я бы не стал беспокоиться о производительности, но больше о семантике. Если это табличные данные, используйте <table>. Если это только элементы блока, представляющие элемент макета, используйте <div>.

Если вы действительно беспокоитесь о производительности, тогда ответ будет по-прежнему зависеть от используемого клиента. Известно, что MSIE медленнее в рендеринге таблицы. Вы должны, по крайней мере, проверять себя в разных браузерах.

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

Ответ 3

Вам действительно не стоит беспокоиться о производительности в рендеринге таблицы. Даже если он есть, вы не заметите его, пока не появятся сотни (тысяч?) Таблиц. Используйте то, что вам кажется более удобным для вас.

Ответ 4

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

Ответ 5

Об этом много обсуждений, и таблица div обычно получает верхнюю часть из-за ее гибкости в стилизации. Здесь одна ссылка - http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Ответ 6

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

Ответ 7

По-моему, единственная причина использования divs - это стиль и настройка макета на основе размера браузера. Если он не сломался, не исправляйте его. Divs легче стилизовать, но с помощью css.

Таблица: вы можете получить очень сложный макет, как вы этого хотите. Более надежный. Советы иногда немного странны с сложным стилем CSS. не подходит для ответственных веб-сайтов.

Divs: может настраиваться на основе входных данных браузера, более гибким и легким в стиле.

Ответ 8

Если вы представляете табличные данные, вам следует использовать таблицу - она ​​и связанные элементы, имеют всю необходимую семантику для представления таблицы данных. У беспорядка divs нет никого.

Ответ 9

Просто бросаю мои два цента на тему производительности. Для небольших (менее 100 строк, например) таблиц использование DIV не будет иметь значительную разницу в производительности.

Если вы хотите сгенерировать очень длинные наборы данных, с другой стороны, вы должны полностью использовать традиционные HTML-таблицы.

Краткое пояснение:

Все это возникло из моего проекта компании, где я написал класс Javascript для процедурного генерации таблиц для меня на основе данных SQL (это отчетный тип модуля). Во всяком случае, мне нравятся DIV, поэтому я написал его как основанный на DIV, как и пример OP.

После некоторой ужасающей производительности (особенно в IE8) я решил переписать ее, используя только таблицы, поскольку это довольно простые табличные данные в целом. Таблицы по какой-то причине примерно в два раза быстрее на моей машине в Chrome. То же самое верно для Safari.

Тем не менее, поскольку я не могу предоставить свой рабочий код, я написал небольшую контрольную вещь, которая просто позволит вам попробовать либо методологию. Вы увидите, что они почти идентичны, только один использует divs с стилем, чтобы имитировать стандартное поведение таблицы, а другой - только старая школьная таблица.

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

<script type="text/javascript">
var time_start = new Date().getTime();
var NUM_ROWS = 5000;
var NUM_CELLS = 8;
var OLD_STYLE = 1; // toggle 0/1, true/false
if(OLD_STYLE)
{
    var table = document.createElement('table');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
         var row = document.createElement('tr');
         for(var b = 0; b < NUM_CELLS; b++)
         {
             var cell = document.createElement('td');
             cell.innerHTML = 'cell';
             row.appendChild(cell);
         }
         table.appendChild(row);
     }
}
else
{
    var table = document.createElement('div');
    document.body.appendChild(table);
    for(var a = 0; a < NUM_ROWS; a++)
    {
        var row = document.createElement('div');
        row.setAttribute('style','display: table-row; padding: 2px;')
        for(var b = 0; b < NUM_CELLS; b++)
        {
            var cell = document.createElement('div');
            cell.setAttribute('style','display: table-cell; padding: 2px');
            cell.innerHTML = 'cell';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
}
var dt = (new Date().getTime() - time_start)/1000;
console.log( dt + ' seconds' );
</script>