Table에 대해서

(예제를 화면에 표시)

table의 속성

border와 width,height,cellpadding,cellspacing등이 있다

table의 자식태그

• <caption> 테이블의 타이틀

• <thead><tbody><tfoot> 테이블의 헤더,바디,푸터를 분할하는 용도로 사용이며 선택사항이다.

  사용이유는 웹접근성향상과 css를 헤더 바디 푸터 묶어서 수정하기 편하기때문이다 (예제의 thead의 style 참조)

• <colgroup><col span="n"> 테이블의 세로 행을 묶어서 관리가능할수있음 (예제의 <col span="2">의 style 참조)

• <tr> 행을 의미함

• <th>,<td> 은 tr의 자식요소로 사용된다

  tr이 헤더인가 바디인가에 따라서 th(헤더용),td(바디용)를 가진다

  열을 의미한다

• rowspan은 행의 병합을 나타내고 기본값은 1이다

• colspan은 열의 병합을 나타내고 기본값은 1이다

<table border="1" width="300px" height="150px" style="table-layout: fixed;">
   <colgroup>
    <col span="1"> <!-- 1번열을 묶음 -->
    <col span="2" style="background:beige;" /> <!-- 2,3번열을 묶음 (span="2"가 설정되었으므로)-->
  </colgroup>
  <caption>
    caption
  </caption>
  <thead style="background:darkgrey;">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
   </thead>
  <tbody style="text-align:center;" >
    <tr>
        <td rowspan="2">rowspan = 2</td>
        <td colspan="2">colspan = 2</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
    </tr>
   </tbody>
  <tfoot style="text-align:center;" >
    <tr>
      <td colspan="3">colspan = 3</td>
    </tr>
  </tfoot>
</table>

테이블의 table-layout 속성

• 기본 <table style="table-layout: auto;"> 으로 설정되어있다

  auto로 설정되어있으면 컨텐츠의 길이에 따라서 자동으로 열의 너비가 설정된다

• 또한 <table style="table-layout: fixed;"> 으로 설정한다면

  컨텐츠의 길이를 참조하지않고 table의 width를 기준으로 균등하게 열의 너비를 설정한다

  그러므로 각 td의 width를 수동으로 적용하는것도 가능하다

위의 table-layout:fixed를 몰라서 colspan후 너비가 맞지 않는 문제점이 있었지만 벤이 위의 문제점을 알려줘서 해결가능했다

참조

테이블레이아웃