실제 테이블 대.

실제 테이블 대. Div 테이블

---

이

<table>
    <tr>
        <td>Hello</td>
        <td>World</td>
    </tr>
</table>

다음과 같이 할 수 있습니다.

<div>
    <div style="display: table-row;">
        <div style="display: table-cell;">Hello</div>
        <div style="display: table-cell;">World</div>
    </div>
</div>

이제 성능 및 / 또는 렌더링 속도 측면에서이 둘 사이에 차이가 있습니까? 아니면 그냥 동일합니까?

---

div를 사용하여 데이터 테이블을 시뮬레이션하는 것은 의미 상 올바르지 않으며 일반적으로 렌더링이 즉각적이므로 성능과 관련이 없습니다. 병목 현상은 자바 스크립트 또는 많은 중첩 요소가있는 매우 긴 페이지에서 비롯됩니다. 예전에는 레이아웃을 만들기위한 중첩 테이블이 100 개였습니다.

의미에 대해서는 테이블을 사용하고 의미에 대해서는 div를 사용하십시오. 디스플레이 테이블 행 및 셀 속성은 데이터 표현을 위해 테이블을 생성하는 것보다 div 레이아웃을 더 많이 활용하는 것입니다. 신문이나 잡지에서 찾을 수있는 것과 동일한 레이아웃 열과 행으로보십시오.

성능면에서 div 예제로 몇 바이트가 더 있습니다. lol :)

---

먼저 성능에 대해 걱정하지 않고 의미론에 대해 더 많이 걱정합니다. 테이블 형식 데이터 인 경우 <table>. 레이아웃 요소를 나타내는 블록 요소 인 경우 <div>.

정말로 성능에 대해 걱정한다면 대답은 여전히 ​​사용되는 클라이언트에 달려 있습니다. 예를 들어 MSIE는 테이블 렌더링에서 느린 것으로 알려져 있습니다. 적어도 다른 브라우저에서 자신을 테스트해야합니다.

이 문제가 대용량 데이터로 인해 발생하는 경우 표시하려는 데이터의 페이징 / 필터링을 도입하는 것을 고려할 것입니다.

---

테이블 렌더링에서 성능에 대해 걱정할 필요가 없습니다. 하나가 있더라도 표시 할 테이블이 수백 (수천?)이 될 때까지 눈치 채지 못할 것입니다. 자신에게 더 편하다고 느끼는 것을 사용하십시오.

---

이것에 대한 많은 논의가 있으며 div 테이블은 스타일링의 유연성으로 인해 일반적으로 우위를 차지합니다. 여기 하나의 링크가 있습니다 -http : //css-discuss.incutio.com/wiki/Tables_Vs_Divs

---

div 대신 테이블 구조를 사용하는 경우 사용자가 CMD (또는 창에서 ALT)를 유지하여 복사 할 테이블에서 특정 데이터 영역을 선택할 수 있다는 것을 언급하고 싶었습니다. 이 데이터는 Excel 및 기타 유사한 통합 문서 프로그램에도 매우 쉽게 붙여 넣습니다.

---

모든 마크 업이 다운로드 될 때까지 테이블이 렌더링되지 않습니다. 개별 div는 마크 업이 다운로드되는 즉시 렌더링됩니다. 나는 총 시간이 같을 것이라고 생각하지만 div는 더 나은 성능과 더 많은 반응성에 대한 인식을 줄 것입니다.

---

제 생각에 div를 사용하는 유일한 이유는 브라우저 크기에 따라 레이아웃을 스타일링하고 조정하는 것입니다. 파손되지 않았다면 고치지 마십시오. Div는 CSS로 스타일링하기가 더 쉽습니다.

테이블 : 장점-원하는대로 정확하게 매우 복잡한 레이아웃을 얻을 수 있습니다. 더 듬직 해요. 단점은 때때로 복잡한 CSS 스타일링으로 인해 약간 이상해집니다. 책임감있는 웹 사이트에는 좋지 않습니다.

Divs : 브라우저 입력에 따라 조정할 수 있으며 더 유연하고 스타일이 더 쉽습니다.

---

테이블 형식 데이터를 제공하는 경우 테이블을 사용해야합니다. 테이블과 관련 요소에는 데이터 테이블을 나타내는 데 필요한 모든 의미가 있습니다. 혼란스러운 div에는 아무것도 없습니다.

---

공연 주제에 대해 2 센트를 투자했습니다. 작은 (예 : 100 개 미만의) 테이블의 경우 DIV를 사용해도 성능면에서 큰 차이가 없습니다.

반면에 매우 긴 데이터 세트를 생성하려면 기존 HTML 테이블을 사용해야합니다.

간략한 설명 :

이 모든 것은 SQL 데이터를 기반으로 테이블을 절차 적으로 생성하기 위해 Javascript 클래스를 작성한 회사 프로젝트에서 생성되었습니다 (보고 종류의 모듈입니다). 어쨌든 나는 DIV를 좋아하기 때문에 OP 예제와 같이 DIV 기반으로 작성했습니다.

끔찍한 성능 (특히 IE8에서) 후에는 전체적으로 매우 간단한 표 형식 데이터이므로 테이블 만 사용하여 다시 작성하기로 결정했습니다. 어떤 이유로 든 테이블은 Chrome의 내 컴퓨터에서 약 2 배 빠릅니다. 사파리도 마찬가지입니다.

즉, 내 작업의 코드를 제공 할 수 없기 때문에 또는 방법론을 시도해 볼 수있는 벤치 마크를 작성했습니다. 거의 동일하다는 것을 알 수 있습니다. 하나는 테이블의 표준 동작을 모방하기 위해 스타일이있는 div를 사용하고 다른 하나는 구식 테이블입니다.

유일한 실제 차이점은 생성되는 요소의 유형이므로 이것이 시간 델타에서 설명 할 수있는 유일한 것입니다. 브라우저에 따라 다르지만 테이블 요소가 더 빠르다고 생각합니다.

<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>

참조 URL : https://stackoverflow.com/questions/2617895/actual-table-vs-div-table