디자인에서 <table>을 사용하지 않는 이유는 무엇입니까?

테이블이있는 웹 사이트를 디자인하지 않아야하는 분명하고 논리적 인 이유는 무엇입니까? 이점은 어디에 있습니까? 업계에서이 아이디어를 이끌어 낸 것은 무엇입니까? 언제 테이블을 사용해도 괜찮습니까?

1) 표는 다음과 같은 이유로 페이지 레이아웃에 사용해서는 안됩니다.

• 브라우저가 제대로 렌더링하기 위해 대부분의 테이블을 다운로드해야하므로 렌더링 속도가 느려짐

• 테이블이 아닌 레이아웃보다 더 많은 HTML이 필요하므로 로딩 및 렌더링 속도가 느려지고 대역폭 사용량이 증가합니다.

• 그들은 빨리 복잡해질 수 있기 때문에 유지하기 위해 악몽이 될 수 있습니다

• 텍스트 복사가 중단 될 수 있습니다

• 화면 판독기에 부정적인 영향을 미치므로 일부 사용자가 콘텐츠에 액세스하지 못할 수 있습니다.

• 적절한 의미 론적 마크 업을 사용하는 것만 큼 유연하지 않습니다.

• 그들은 페이지 레이아웃에 사용되도록 의도되지 않았습니다

• 반응 형 레이아웃으로 테이블을 만드는 것은 제어하기가 매우 어렵습니다.

2) 테이블 형식 데이터에 테이블을 사용하십시오. 이것이 바로 테이블입니다.

또한 사람들이 왜 div로 테이블을 만드는가?

테이블은 디자인이 아니라 테이블 형식의 데이터를위한 것입니다. 사람들은 종종 페이지를 "표가없는"것으로 만드는 동기를 오해합니다.

테이블을 사용하여 레이아웃을 만드는 것은 잘못되었습니다. 레이아웃에는 다른 요소 (div, 목록, 섹션, 아티클, 머리글, 바닥 글, 옆면 등)를 사용해야합니다. 또한 최소한의 HTML / CSS로 의미있는 의미, 가벼우 며 유지 관리가 쉬운 코드를 유지하면서 뛰어난 효과를 얻을 수 있습니다.

물론 테이블 형식 데이터는 테이블 요소 안에 있어야합니다. 원하는 경우 thead, tfoot, tbody, th, caption 등을 추가하여 테이블 의미를 향상시킬 수 있습니다. 이러한 모든 요소는 테이블과 함께 사용되도록 만들어졌으며 테이블을 훨씬 더 자기 설명 적으로 만들 수 있습니다. .

따라서 테이블 기반 디자인을 사용하지 말고 적합한 HTML / CSS 솔루션을 사용하십시오. HTML 시맨틱 마크 업에서 시작한 다음 CSS를 사용하여 디자인을 빌드하십시오. 이것은 누군가를 안전하게 지켜야합니다. 이것을 경험 법칙으로 사용하십시오.

테이블은 디자인 요소가 아닌 데이터를 포함해야합니다.

테이블은 테이블 형식 데이터를 표시 할 때만 사용해야합니다. 그렇지 않으면 일반적으로 표시하기에 적합하지 않습니다.

테이블을 사용하지 않는 실제 원인은 다음과 같습니다.

테이블의 기본 레이아웃은 다음과 같습니다. table-layout:fixed

브라우저가 테이블을 분석하고 셀 내부에 요소를 포함하도록 셀을 수정하도록 지시하는데 시간이 오래 걸립니다. (이것이 복잡한 데이터에 테이블이 좋은 이유입니다)

결론 : 테이블은 DIV 요소와 같은 테이블 내부의 모든 내용 이 렌더링 된 후 렌더링됩니다.

나는 액체와 웹 디자인 구조에 테이블을 고정과 혼합하여 사용하고 많은 사람들이 테이블이 멍청한 사람들을위한 것이라고 알고 있습니다. 다른 것.

더 나은 무엇입니까 <br>또는 <p></p>? 똑같은 것

새로운 2015 년 웹 디자인의 저와 저의 오래된 테이블은 각각 ​​친숙한 모바일 100 % 너비와 2 개의 사이드 컬럼이 각각 200px 인 사람들에게 맞대기를 할 수 있습니다.

분명히 테이블 내부는 점점 더 많은 테이블을 배치하기가 못하기 때문에 DIVS가 편리합니다. 테이블은 div가 할 수없는 일을 할 수 있고 div는 테이블이 할 수없는 일을 할 수 있습니다.

기본 테이블 레이아웃을 말하는 사람들은 고정되어 있습니까? 나는 당신에게 예를 들어

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>

지금 잠재력이 보입니까? PC와 휴대폰에서 살펴보십시오. 아 그래, 나는 심지어 부트 스트랩이 필요하지 않습니다.

이제 div와 동일한 작업을 수행하려면 정렬 float 및 crap을 표시하기 위해 많은 CSS 코드를 작성해야합니다. 누가 적은 코드를 작성 했습니까? 나를! 고객에게 무엇이 필요합니까? 1 년 또는 1 개월 안에 페이지를 끝내는 사람이 있습니까?

이제 div로 디자인을 향상시킬 수 있습니다

<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>
<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="200">left</td>
    <td width="100%">middle</td>
    <td width="200">right</td>
  </tr>
</table>
<div style="width:100%; min-width:1000px; height:200px;">top menu or nav</div>

div와 테이블을 사용하여 5 열 디자인 레이아웃이 너무 아름답습니다.

당신의 대답은 : 그들은 둘 다 더 잘 작동하고 빠르며 TV와 소형 휴대 전화에서도 모든 디자인에서 좋아 보일 것입니다.