12. <table>태그로 표 만들기 : VIOLET QUARTZ

2017. 2. 3. 17:41

설명

테이블(Table)은 표·목록을 뜻합니다.

웹 문서를 더욱 깔끔하게 만들고 정보를 조직적으로 나타내기 위해 테이블을 이용합니다.

이 테이블 안에는 텍스트, 이미지, 목록, 다른 테이블이 오게 할 수도 있고 문서의 레이아웃을 테이블로 구성할 수도 있습니다. (하지만 레이아웃에 <table>을 이용하는건 권장되고 있지 않습니다.)

테이블을 만들기 위해 사용하는 각 태그들은 종료 태그를 써주어야 합니다.

사용법

1) <table>

HTML 테이블을 정의하며 테이블의 시작과 끝을 나타냅니다. <table>안에는 최소한 하나 이상의 <tr>, <td>요소를 가지고 있어야 합니다.

2) <tr>

테이블의 행을 나타냅니다. 하나 이상의 <th>나 <td>요소를 포함해야 합니다.

3) <th>

테이블의 머릿글 셀을 나타냅니다. 예를 들어 표의 첫 번째 행이나 모든 첫 번째 열의 내용을 제목으로 나타내고 싶을 때 사용합니다. 내용이 기본적으로 굵은 글씨, 가운데 정렬로 나타나 강조되는 효과를 줄 수 있습니다.

4) <td>

테이블에서 표준 셀을 나타냅니다. 서술하고자 하는 내용을 이 곳에 써줍니다. 이 안의 내용은 별다른 효과 없이 왼쪽 정렬되어 나옵니다. 반드시 <tr>태그 내에서 사용해야 합니다.

5) <caption>

테이블에 캡션(간단한 주석)을 답니다. 사용 시 반드시 <table>태그 뒤에 작성해 주어야 하며, 테이블 당 한 개의 캡션을 달 수 있습니다. 기본적으로 테이블 위의 중앙 정렬되어 나옵니다.

6) <colgroup>, <col>

테이블의 서식 지정을 위한 태그입니다. 사용 시 <colgroup>으로 <col>을 묶어 준 후 각 열에 다른 속성을 지정해 줄 수 있습니다. <table>태그보다 뒤에, <caption>,<thead>,<tbody>,<tfoot>,<tr>태그보다 앞에 작성합니다.

7) <thead>, <tfoot>, <tbody>

<thead>는 표의 머릿말 내용을, <tfoot>은 꼬릿말 내용을, <tbody>는 본문 내용을 그룹화 하는데 사용됩니다.

이 각각의 태그들은 사용 시 내부에 하나 이상의 <tr>태그가 있어야 합니다.

테이블의 레이아웃에 영향을 주진 않고 CSS를 이용해 요소마다 스타일을 다르게 지정해 주는 것이 가능합니다.

<table>, <caption>, <colgroup>태그 다음에 <thead>, <tfoot>, <tbody>순으로 위치해야합니다.

속성 - <table>

속성	값	설명
HTML5 지원
sortable	sortable	테이블을 정렬 가능하도록 지정
HTML5 미지원
align	left/center/right	테이블의 정렬 상태 지정
bgcolor	rgb(x,x,x)/#xxxxxx/ colorname	테이블의 전체 배경색 지정
border	1/0	테이블의 테두리를 지정. (1:테두리 있음/0:테두리 없음)
cellpadding	pixels	셀과 그 안의 내용 사이의 간격(여백)을 지정
cellspacing	pixels	셀과 셀 사이의 간격을 지정
frame	void/above/below/ hsides/lhs/rhs/ vsides/box/border	표시되어야 하는 외부 테두리의 부분 지정
rules	none/groups/rows/ cols/all	표시되어야 하는 내부 테두리의 부분 지정
summary	text	테이블 내용의 요약
width	pixels/%	테이블의 너비 지정

속성 - <tr>

속성 - <th>,<td>

프로그래밍/웹표준 | 카테고리의 다른 글

댓글,

티스토리툴바