HTML에서 테이블 태그 사용 - html table tag

 

1.테이블의 기본 형식

 

• 행과 열로 이루어 진 테이블
  • <table> 태그를 이용하여 테이블을 만들고
  • <tr><td> 태그를 사용하여 행과 열을 표현한다.
  • <tr> : 행을 표현
  • <th> : 열의 제목을 표현한다.
  • <td> : 열을 표현

<table>태그

• HTML에서 테이블을 정의하는 태그이다.
• m행n열이 기본적인 형식이다.
• m개의 <tr>태그
  • 각 <tr>태그 내에는 n개의 <td>태그가 사용된다.

<tr>태그 'table row'

• 테이블에서 하나의 줄에 해당하는 행(row)를 정의하는 태그이다
• <td>또는 <th>태그를 포함해야만 사용이 가능하다.

<td>태그 'table data'

• 테이블에서 데이터(텍스트,이미지등)가 표시되는 표준 셀을 정의한다.
  • 반드시 <tr>태그 내에서 사용해야 한다.
  • 셀 내용 : 왼쪽 정렬로 표시된다.

<th>태그 'table header'

• 테이블 내부에서 행 열의 제목을 표시하는 헤더 셀을 정의한다.
  • 사용하는 경우에는 반드시 <tr>태그 내에서 사용해야 한다.
  • 셀 내용 : 진하게 가운데 정렬로 표시된다.

<caption></caption>

• 테이블 전체에 해당하는 제목을 나타낸다.
• 반드시 <table> 시작 태그 바로 다음에 위치해야 한다.
  • <table>과<cation>태그 사이에는 다른 어떤 태그도 위치가 불가하다
  • <tr> 또는 <td>태그 내에서 사용하면 무시된다.
• 테이블 상단에 진하게 가운데 정렬로 표시된다.
  • CSS caption-side 속성과 text-align 속성으로 변경이 가능하다.

border 속성

• <table border = "1"> 등의 형식을 사용하여
• 테이블의 테두리 및 셀의 테두리를 만들 수 있다.
• border 값이 크면 클수록 테이블 테두리가 굵어진다.

 

2.셀 병합과 요소 배치

 

셀 병합

• 인접한 여러 셀을 합쳐서 하나의 셀로 만드는 경우
  • 보다 다양한 모양의 테이블 생성이 가능하다.
• rowspan 속성, colspan 속성
  • 셀을 나누는 거기 떄문에 <tr>에서는 사용이 안된다.
  • <td> 또는 <th> 태그 내에서만 사용된다.
• rowspan="n"
  • 현재 셀의 위치에서 n개의 행을 병합한다.
  • 세로 방향으로 인접한 n개의 셀을 병합한다.
• colspan="n"
  • 현재 셀의 위치에서 n개의 열을 병합한다.
  • 가로 방향으로 인접한 n개의 셀을 병합.

테이블을 이용한 요소 배치

• 테이블을 이용하면
  • 바둑판식 배열처럼 질서 정연한 요소의 배치가 가능해진다.
• 각 셀의 내용으로 다양한 HTML요소가 사용이 가능하다.
  • 텍스트, 이미지,목록,테이블 등이 사용이 가능해진다.

 

3.테이블 콘텐츠 그룹핑과 열 단위 스타일 지정

 

행 단위 콘텐츠의 그룹핑

• 테이블에서 행 단위 콘텐츠를 각각 헤더,몸체,푸터 부분으로 구분하여 그룹핑하는 태그.
• 테이블 레이아웃에서는 아무런 영향을 끼치지 않는다.
• 태그 사용의 위치는 아래와 같다.
  • <table><cation><thead><tr>.....</table>
  • <thead>,<tbody> 그리고 <tfoot>의 순서대로 사용할 수 있다.
• <thead>
• <tbody>
• <tfoot>

열 단위 스타일 지정

• <colgroup>태그
  • 하나 이상의 열들을 모아서 한꺼번에 스타일을 지정하는 태그
  • 태그 사용 위치
    • <table> <caption> <colgroup> <thead> <tr> ..... </table>
• <col> 태그
  • 지정한 열에 대해서 서로 다른 포맷팅을 정의하는 태그
  • <colgroup>태그 내에서만 사용
  • 종료 태그 없이 사용한다.