-<table>
:표를 정의한다. 간단한 표는 table 요소와 하나 또는 그 이상의 tr, th, td 요소를 포함하며 더 복잡한 표에서는 caption, col, colgroup, thead, tfoot, tbody 같은 요소들을 포함 해서 나타낼 수 있다. tr 요소는 표의 행(row)을 나타내고 th 요소는 표의 헤더(header)를 나타내고, td 요소는 표의 셀(cell or col)을 나타낸다.
<table>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</table>
border : 표 주위에 테두리를 설정
cellpadding : 셀 내용과 셀 둘레에 공간을 설정
cellspacing : 셀 사이의 공간을 설정
frame : 표 테두리 바깥 영역에서 더 보여져야 할 부분을 지정
rules : 표 테두리 안쪽 영역에 보여져야 할 부분을 지정
summary : 표에 어떤 내용이 있는지 설명하는 내용을 나타냄
width : 표 너비를 지정
-<caption>
:표의 캡션(짧은 해설문)을 정의하며 table 태그 바로 뒤에 위치해야 한다. table 태그 하나당 한개의 caption 만 사용하며 table 의 상단 중앙에 표시된다.
<table>
<caption>월별지출내역</caption>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</table>
-<th>
:표의 머리글 셀을 정의한다. 표에는 두 가지 종류의 셀을 가지는데,
첫째, 머리글(header) 셀 – 머리글 정보를 포함하는 th 태그와
둘째, 표준(standaed) 셀 – 일반적인 데이타를 포함하는 td 태그이다.
th 는 굵은(bold) 폰트에 텍스트 정렬이 중앙(center)으로 렌더링되고, td 는 일반(regular) 폰트에 텍스트 정렬은 왼쪽으(left)로 렌더링 된다. 만약 여러 개의 셀을 합쳐서 나타내려면 colspan 과 rowspan 속성을 사용하여 가로 또는 세로 셀을 합친다.
<table>
<caption>월별지출내역</caption>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</table>
abbr : 셀 내용의 요약을 나타냄
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
axis : 셀을 카테고리화 시켜 분류함
char :
charoff :
colspan : 셀에 필요한 열(column)수를 지정(그 수만큼 합쳐서 나타냄)
rowspan : 셀에 필요한 행(row)수를 지정(그 수만큼 합쳐서 나타냄)
scope : 헤더 셀과 데이터 셀의 관계를 col, colgroup, row, rowgroup 값으로 정의
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
-<tr>
:표의 행을 정의하며 th 또는 td 요소를 한 개 또는 그 이상 반드시 포함한다.
<table>
<caption>월별지출내역</caption>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</table>
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
char :
charoff :
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
-<td>
:표의 일반적인 데이터 셀을 정의한다. 표에는 두 가지 종류의 셀을 가지는데,
첫째, 머리글(header) 셀 – 머리글 정보를 포함하는 th 태그와
둘째, 표준(standaed) 셀 – 일반적인 데이터를 포함하는 td 태그이다.
th 는 굵은(bold) 폰트에 텍스트 정렬이 중앙(center)으로 렌더링되고, td 는 일반(regular) 폰트에 텍스트 정렬은 왼쪽으(left)로 렌더링 된다. 만약 여러 개의 셀을 합쳐서 나타내려면 colspan 과 rowspan 속성을 사용하여 가로 또는 세로 셀을 합친다.
<table>
<caption>월별지출내역</caption>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</table>
abbr : 셀 내용의 요약을 나타냄
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
axis : 셀을 카테고리화 시켜 분류함
char :
charoff :
colspan : 셀에 필요한 열(column)수를 지정(그 수만큼 합쳐서 나타냄)
rowspan : 셀에 필요한 행(row)수를 지정(그 수만큼 합쳐서 나타냄)
scope : 헤더 셀과 데이터 셀의 관계를 col, colgroup, row, rowgroup 값으로 정의
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
-<thead>
:표 안의 헤더 콘텐츠를 그룹화시키는데 tbody(표 중심 콘텐츠를 그룹화), tfoot(표 문맥상의 하단 콘텐츠 그룹화) 요소와 함께 사용된다. 이 요소들은 기본적으로 표의 레이아웃에 영향을 주지 않지만, css를 이용하면 효과를 줄 수 있다.
<table>
<caption>월별지출내역</caption>
<thead>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
</thead>
<tbody>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</tbody>
</table>
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
char :
charoff :
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
-<tbody>
:표 안의 중심 콘텐츠를 그룹화시키는데 thead(표 헤더 콘텐츠를 그룹화), tfoot(표 문맥상의 하단 콘텐츠 그룹화) 요소와 함께 사용된다. 이 요소들은 기본적으로 표의 레이아웃에 영향을 주지 않지만, css를 이용하면 효과를 줄 수 있다.
<table>
<caption>월별지출내역</caption>
<thead>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
</thead>
<tbody>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</tbody>
</table>
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
char :
charoff :
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
-<tfoot>
:표 안의 문맥상 하단 콘텐츠를 그룹화시키는데 thead(표 헤더 콘텐츠를 그룹화), tbody(표 중심 콘텐츠 그룹화) 요소와 함께 사용된다. 주의할 점은 tfoot 요소는 소스상에서 위치가 tbody 앞에 반드시 와야하지만 실제로 브라우저에서는 tfoot 요소의 내용을 표 가장 하단에 나타낸다는 것이다. 이 요소들은 기본적으로 표의 레이아웃에 영향을 주지 않지만, css를 이용하면 효과를 줄 수 있다.
<table>
<caption>월별지출내역</caption>
<thead>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
</thead>
<tfoot>
<tr>
<td>이번 달</td>
<td>합계</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</tbody>
</table>
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
char :
charoff :
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
*표 내용들을 그룹화하기 위해 thead, tbody, tfoot 요소들을 사용할 경우 tfoot 요소는 선택적으로 사용 가능하지만, thead 와 tbody 는 반드시 함께 사용해줘야 한다.
-<col />
:표에서 열(column)의 속성 값을 정의하는데 각 열에 반복적으로 스타일을 적용하는 대신 전체 열의 스타일을 적용하는데 유용하다. col 태그는 colgroup 태그 내에서만 사용할 수 있으며 HTML 에는 닫는 태그가 없지만 XHTML 에서는 닫는 태그가 필요하다.
<table>
<caption>월별지출내역</caption>
<colgroup>
<col align="left" />
<col align="left" />
</colgroup>
<thead>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
</thead>
<tbody>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</tbody>
</table>
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
char :
charoff :
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
span : 필요한 span의 갯수를 지정
width : col 요소의 너비를 지정
-<colgroup>
:표 안에서 셀(열) 을 그룹화하는 데 사용되며 col 태그와 마찬가지로 반복적 스타일 적용을 피하고 전체 스타일을 적용하는데 유용하다. colgroup 은 table 태그 안에서만 사용할 수 있으며 브라우저 중 Firefox, Chrome, safari는 colgroup 속성 중 span 과 width 만 지원한다.
<table>
<caption>월별지출내역</caption>
<colgroup>
<col align="left" />
<col align="left" />
</colgroup>
<thead>
<tr>
<th>날짜</th>
<th>지출내역</th>
</tr>
</thead>
<tbody>
<tr>
<td>09-20</td>
<td>5,000원</td>
</tr>
</tbody>
</table>
align : 셀 내용의 정렬을 left, right, center, justify, char 값으로 지정
char :
charoff :
valign : 셀의 수직 정렬을 top, middle, bottom, baseline 값으로 정의
span : 필요한 span의 갯수를 지정
width : col 요소의 너비를 지정