티스토리 뷰

HTML

[HTML] <table>

<table>

<table> 태그는 표를 만들 때 사용합니다. 테이블은 테이터를 포함하는 셀의 행과 열로 구성된 정보표입니다. 예전에는 테이블을 이용해서 레이아웃을 표현한 적도 있지만 웹표준을 준수해야 하는 현재는 테이블을 이용해서 레이아웃을 만드는 것은 적절하지 않습니다. 테이블을 쓰기 위해서는 즉 표를 만들기 위해서는 제목, 설명, 셀, 셀합치기, 표 구조, 셀 그룹 등 여러가지를 신경써야 합니다.

테이블은 제목을 표시하기 위해 <caption>을 사용하고 셀 요소를 그룹화하기 위해 <colgroup>과 <col>을 사용합니다. 테이블 전체 구조를 분리하기 위해 <thead>, <tbody>, <tfoot>를 사용하며, 행과 열을 나타내는 <tr>, <td> <th> 등을 사용합니다. 여기에 접근성을 위해 scope 속성을 사용하고 셀의 병합을 위해 colspan과 rowspan을 사용하게 됩니다.


<table>

<table> 태그는 표를 정의합니다.

정의(Definition)

  • <table> 태그는 표를 정의합니다.
  • <table> 태그는 기본적으로 <tr>, <td>, <th>로 구성되어 있습니다.
  • <table> 태그는 추가적으로 <caption>, <col>, <colgroup>, <thead>, <tbody>, <tfoot> 요소를 포함하고 있습니다.
  • <table> 태그는 주로 게시판 영역이나 회원가입 영역에 사용합니다.
  • 레이아웃을 목적으로 사용은 적합하지 않지만, 예외적으로 메일을 보낼 때는 레이아웃을 목적으로 사용이 가능합니다.

비교(Compare)

  • <table> 태그는 표를 정의합니다.
  • <tr> 태그는 표의 행을 정의합니다.
  • <td> 태그는 표의 셀을 정의합니다.
  • <th> 태그는 표의 행이나 열에 머리말을 정의합니다.
  • <caption> 태그는 <table> 요소의 제목을 설정합니다.
  • <col> 태그는 <table> 내의 열의 공통 속성을 정의합니다.
  • <colgroup> 태그는 <col> 요소의 그룹화를 정의합니다.
  • <thead> 태그는 표의 헤더를 그룹화합니다.
  • <tbody> 태그는 표의 본문을 그룹화합니다.
  • <tfoot> 태그는 표의 푸터를 그룹화합니다.

크로스브라우징(CrossBroswing)

  • HTML5에서는 "align", "bgcolor", "border", "cellpadding", "cellspacing", "frame", "rules", "summary", "width" 속성을 지원하지 않습니다.

샘플(Sample)

thead와 tbody를 사용한 표입니다.

Sample1
테이블 제목1 테이블 제목2
셀 내용1 셀 내용2
html
<table>
    <thead>
        <tr>
            <th>테이블 제목1</th>
            <th>테이블 제목2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>셀 내용1</td>
            <td>셀 내용2</td>
        </tr>
    </tbody> 
</table>

샘플(Sample)

thead와 tbody를 사용한 표입니다.

Sample1
table 태그 속성
속성 설명
align left 테이블을 왼쪽으로 정렬합니다.
bgcolor bgcolor="blue" 테이블의 배경색을 설정합니다.
border border="1" 테이블의 보더 값을 설정합니다.
html
<table>
    <thead>
        <tr>
            <th>테이블 제목1</th>
            <th>테이블 제목2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>셀 내용1</td>
            <td>셀 내용2</td>
        </tr>
    </tbody> 
</table>

속성(Property)

속성 값(예) 설명 버전
align left
center
right
테이블을 왼쪽으로 정렬합니다.
테이블을 가운데로 정렬합니다.
테이블을 오른쪽으로 정렬합니다.
html5
bgcolor bgcolor="blue" 테이블의 배경색을 설정합니다. html5
border border="1" 테이블의 보더 값을 설정합니다. html5
cellpadding cellpadding="3px" 셀과 컨텐츠 사이의 간격을 설정합니다. html5
cellspacing cellpadding="3px" 셀과 셀사이의 간격을 설정합니다. html5
frame void
above
below
hsides
lhs
rhs
vsides
box
border
테이블의 프레임 모양을 설정합니다. html5
rules none
groups
rows
cols
all
테이블 내부의 모양을 설정합니다. html5
summary summary="text" 테이블의 내용을 요약하여 설정합니다. html5
width width="100" 테이블의 가로 값을 설정합니다. html5

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<table> 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
align 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
bgcolor 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
border 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
cellpadding 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
cellspacing 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
frame 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
rules 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
summary 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
width 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼