<table> 태그

그림 1

<td> : table data의 약자이다. 

<td> 이외에 테이블 셀 안에 데이터를 나타내기 위한 것으로 <th> 태그도 있다.

<td> 태그만 사용할 경우, [그림 1]처럼 테이블 표로 완성되진 않는다.

• Header cells - contains header information (created with the <th> element)
• Stardard cells - contains data (created with the <td> element)

The text in <th> elements are bold and centered by default.

The text in <td> elements are regular and left-aligned by default.

 

 

 

 

 

그림 2

[그림 2]에서 <table>, <tr>, <td> 태그를 사용했다.

<tr> 태그는 table row의 약자이다.

테이블 표를 만들기 위해, 가장 겉에 <table> 태그를 사용하고, 그 안에 <tr> 태그를 사용해서 각 행(row)에 넣고자 하는 값들을 grouping한다. 

 

 

 

 

 

그림 3

<table> 태그에 border 속성을 추가하면 테두리가 생긴다.

[그림 3] 처럼, table안의 구조는 <thead>, <tbody>, <tfoot>으로 구분해서 볼 수 있다.

<thead> : table head의 약자로, 카테고리 부분으로 보면 된다.

<tbody> : table body의 약자로, 실질적인 데이터가 이곳에 들어간다고 보면 된다.

<tfoot> : table foot의 약자로, table의 마지막 부분을 담당한다.

 

 

 

 

 

그림 4

<thead>, <tbody>, <tfoot>로 묶어주게 되면, [그림 4]처럼 순서가 엉망이 되어도 <thead>에 묶인 내용은 윗부분으로, <tbody>에 묶인 내용은 가운데로, <tfoot>에 묶인 내용은 맨 밑으로 자동적으로 표현된다.

참고로, <thead> 부분의 셀들이 중앙정렬, 굵은 글씨로 만들고 싶다면 <td>대신 <th>를 쓰면 된다.

이 외에도 row 셀들의 병합, col 셀들의 병합에 관한 속성들이 존재하는데, 이는 셀을 담당하는 <td>와 같은 태그에서 그 속성값을 부여해주면 된다.