검수요청.png검수요청.png

테이블 (HTML)

위키원
Asadal (토론 | 기여)님의 2020년 8월 19일 (수) 16:41 판 (같이 보기)
(차이) ← 이전 판 | 최신판 (차이) | 다음 판 → (차이)
이동: 둘러보기, 검색

테이블(table)은 HTML 문서에서 로 이루어진 를 말한다. <table> 또는 <div> 태그를 이용하여 만든다. HTML 언어에서 테이블은 웹페이지 요소들을 공간적으로 구성하거나 목록이나 규격 등과 같은 표 형식의 데이터들이 화면에 보기 좋게 표시될 수 있는 구조를 만들기 위해 사용된다.

HTML에서 테이블 활용

  • <table> : HTML 문서에서 표를 만드는 태그이다. 행과 열을 표현하기 위해 <tr>, <td> 등의 태그와 함께 작성하게 된다.
예전에는 웹 페이지의 레이아웃을 구성할 때, <table> 태그를 이용하여 많이 구성하였는데, XHTML에서 발전하면서부터 레이아웃 구성 시에는 <div> 태그와 CSS를 이용한다.[1]

<td>, <tr>

  • <tr> : 표의 행을 나타낸다.
  • <td> : 표의 열을 나타내며, <tr> 태그 하위에 위치한다.[1]
 <table>
 	<tr>
 		<td>섹션1</td>
 		<td>섹션2</td>
 	</tr>
 	<tr>
 		<td>섹션3</td>
 		<td>섹션4</td>
 	</tr>
 	<tr>
 		<td>섹션4</td>
 		<td>섹션5</td>
 	</tr>
 </table>

<thead>

  • <thead> : 표의 제목 영역을 나타낸다. <table> 하위, <tr> 상위에 위치한다.
  • <tbody> : 표의 본문 영역을 나타낸다. <thead>와 같은 위치에 존재한다.
  • <th> : 제목 셀을 나타낸다. <td> 태그 대신 사용된다.[1]
 <table>
 	<thead>
 		<tr>
 			<th>학교</th>
 			<th>창립년도</th>
 		</tr>
 	</thead>
 	<tbody>
 		<tr>
 			<td>서울대학교</td>
 			<td>1946</td>
 		</tr>
 		<tr>
 			<td>고려대학교</td>
 			<td>1905</td>
 		</tr>
 		<tr>
 			<td>연세대학교</td>
 			<td>1885</td>
 		</tr>
 	</tbody>
 </table>

<rowspan>, <colspan>

  • <rowspan> : <td> 태그에서 사용하며, 열을 좌우로 확장한다.
  • <colspan> : <td> 태그에서 사용하며, 열을 상하로 확장한다.[1]
 <table>
 	<tr>
 		<td colspan 또는 rowspan="2">2x1 셀</td>
 	</tr>
 	<tr>
 		<td>1x1 셀</td>
 		<td>1x2 셀</td>
 	</tr>
 </table>

각주

  1. 1.0 1.1 1.2 1.3 ofcourse,〈HTML table 태그 〉,

같이 보기


  검수요청.png검수요청.png 이 테이블 (HTML) 문서는 프로그래밍에 관한 글로서 검토가 필요합니다. 위키 문서는 누구든지 자유롭게 편집할 수 있습니다. [편집]을 눌러 문서 내용을 검토·수정해 주세요.