HTML5 table 엘리먼트(element)

HTML5 table 엘리먼트(element)

테이블의 경우 크게 변한것 없다. 일단 그전에 올린 포스팅을 참조하자 여기것이 거의 그 대로이다.

웹표준 테이블 코딩 2009/9

웹표준 테이블 코딩 좀더 보완 2010/7

대부분의 속성엘리먼트가 CSS로 대체하도록 되었고 남은 속성엘리먼트는 summury, span정도이다.

테이블 네임의 작성형태

테이블엘리먼트에서 별 다를 바가 없으나 다른 엘리먼트추가로 약간 테이블 설명에 변화를 줄 수 있다.

월드 와이드웹 홈에서 참고http://dev.w3.org/html5/spec/Overview.html#the-table-element

먼저 흔히 사용해오던 방법 caption에 strong으로 강조하고 있다.

<table>
<caption>
<strong>Characteristics with positive and negative sides.</strong>
  <p>Characteristics are given in the second column, with the
  negative......side in the right column.</p>
 </caption>
<thead>

detail엘리먼트로 보완하는 방법

<caption>
  <strong>Characteristics with ....gative sides.</strong>
  <details>
   <summary>Help</summary>
   <p>Characteristics are given in the second column, with the
   negative side in t......column.</p>
  </details>
</caption>

figure엘리먼트로 설명

<figure>
 <figcaption>Characteristics.....d negative sides</figcaption>
 <p>Characteristics are given in the second column, with the
 negative side in the left column....column.</p>
 <table>
  <thead>
   ......
    <td> Passing
 </table>
</figure>

figure엘리먼트에 figcaption엘리먼트로 설명

<figure>
 <figcaption>
  <strong>Character......ve sides</strong>
  <p>Characteristics are given in the second column, with the
  negative side in the le......column.</p>
 </figcaption>
 <table>
  <thead>
 ......
    <td> Passing
 </table>
</figure>

이 중에 어느 방법을 사용하냐는 때에 따라 다르며, 기본적으로 단순한 표(table)의 경우 caption과 strong을 사용 하도록 권유하고 있다.