정렬

align

수평정렬 : left, center, right
테이블에 설정 : 테이블이 브라우저 안에서 수평정렬을 수행.
tr 설정 : 자식 th나 td에 내용이 모두 수평정렬 수행.
td, th설정 : 하나의 td, th만 수평정렬 수행.

valign

수직정렬. top, middle, bottom
tr설정 : 자식 th나 td에 내용이 모두 수직정렬 수행.
td, th설정 : 하나의 td, th만 수직정렬 수행

테이블 여백 설정

  • cellpadding : "수치" -td, th내의 여백 설정, 설정되면 전체크기에 반영이 된다.
  • cellspacing : "수치" -td, th사이의 여백, 설정되더라도 td, th크기에 반영되지 않는다.

복잡한 모양의 테이블 생성

td나 th에 colspan, rowspan 속성 사용.

칸 합치기

colspan = "합칠 칸의 수". 입력한 수만큼 길이가 늘어남

<table>
  <tr>
    <td colspan="2(합칠 칸의 수)">데이터</td>
    <td>데이터</td>
  </tr>
  <tr>
    <td>데이터</td>
    <td>데이터</td>
  </tr>
</table>

칸 합치기

rowspan = "합칠 행의 수".

<table>
  <tr>
    <td rowspan="2(합칠 행의 수)">데이터</td>
    <td>데이터</td>
  </tr>
  <tr>
    <td>데이터</td>
    <td>데이터</td>
  </tr>
</table>

thead, tbody, tfoot

사용자에게 보이는 태그는 아니고 의미와 기능은 제공되는 태그

<thead> : 테이블내에서 제목을 표현하기 위한 의미적 태그(항상 제일 위에 보여짐)
  <tbody> : 테이블내에서 내용을 표현하기 위한 의미적 태그(항상 가운데에 보여짐)
    <tfoot> : 테이블내에서 결과을 표현하기 위한 의미적 태그(항상 제일 아래에 보여짐)

0개의 댓글