서식가이드

• table Mark up에 thead, th를 포함하고 있는 경우 무조건 데이터테이블로 간주
• 데이터 테이블일 경우 Mark up 작성 순서(필수) : table[summary]>caption>colgroup>thead>tfoot>tbody

  <table summary="데이터 테이블 구조에 대한 내용"><!-- 데이터 테이블일 경우 summary 작성 필수. html5에서는 summary 속성 사용하지 않음 -->
  	<caption>데이터 테이블 구조</caption><!-- 데이터 테이블일 경우 caption 작성 필수. -->
      <colgroup></colgroup>
      <col>
      <thead><!-- thead, th의 유무에 따라 데이터 테이블과 배치용 테이블을 구분 -->
          <tr>
              <th scope="col"></th><!-- thead, th의 유무에 따라 데이터 테이블과 배치용 테이블을 구분 -->
              <td></td>
          </tr>
      </thead>
      <tfoot>
          <tr>
              <th scope="row"></th><!-- thead, th의 유무에 따라 데이터 테이블과 배치용 테이블을 구분 -->
              <td></td>
          </tr>
      </tfoot>
      <tbody>
          <tr>
              <th scope="row"></th><!-- thead, th의 유무에 따라 데이터 테이블과 배치용 테이블을 구분 -->
              <td></td>
          </tr>
      </tbody>
  </table>
  

• 데이터 테이블일 경우 summary, caption의 속성 사용 필수. html5에서는 summary 제외.
  • XHTML, HTML4

    <table summary="XHTML, HTML4 데이터 테이블 구조에 대한 내용">
    	<caption>XHTML, HTML4 데이터 테이블 구조</caption>
        ...
    </table>
    

  • HTML5

    <table>
    	<caption>
        <strong>HTML5 데이터 테이블 구조</strong>
        <p>HTML5 데이터 테이블 구조에 대한 내용</p>
        </caption>
        ...
    </table>
    

• <col>,<th>,<td> 내 width 직접 기입 지양. 인라인 스타일로 기입.

<table>
    <caption>데이터테이블:scope-col</caption>
    <colgroup>
        <col style="width:20%">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">scope=col</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> </td>
        </tr>
    </tbody>
</table>

<table>
    <caption>데이터테이블:scope-row</caption>
    <colgroup>
        <col style="width:20%" span="5">
    </colgroup>
    <tbody>
        <tr>
        	<th scope="row">scope=row</th>
            <td> </td>
            <td> </td>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

<table>
    <caption>데이터테이블:id/headers 작성 예</caption>
    <colgroup>
        <col style="width:20%" span="5">
    </colgroup>
    <thead>
        <tr>
            <th scope="col" colspan="2" rowspan="2" id="exc1">id=exc1</th>
            <th scope="col" colspan="2" id="exc2">id=exc2</th>
            <th scope="col" rowspan="2" id="exc3">id=exc3</th>
        </tr>
        <tr>
            <th scope="col" id="exc4">id=exc4</th>
            <th scope="col" id="exc5">id=exc5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" id="exr1">id=exr1</th>
            <th scope="row" id="exr2">id=exr2</th>
            <td headers="exc2 exc4 exr1 exr2">headers=exc2 exc4 exr1 exr2</td>
            <td headers="exc2 exc5 exr1 exr2">headers=exc2 exc5 exr1 exr2</td>
            <td headers="exc3 exc6 exr1 exr2">headers=exc3 exr1 exr2</td>
        </tr>
        <tr>
            <th scope="row" colspan="2" id="exr3">id=exr3</th>
            <td headers="exc2 exc4 exr3">headers=exc2 exc4 exr3</td>
            <td headers="exc2 exc5 exr3">headers=exc2 exc5 exr3</td>
            <td headers="exc3 exr3">headers=exc3 exr3</td>
        </tr>
    </tbody>
</table>