본문 바로가기

개발/HTML5

02.HTML - Table 태그의 종류 및 사용법

by pastry 2014. 12. 2.

table 태그의 종류

<table> 표를 나타내는 태그

<thead> 표의 머리

<tbody> 표의 본문

<tfoot> 표의 꼬리

<tr> 표의 행

<th> 표의 제목 요소

<td> 표의 일반 요소

예제 코드

	<!--table - 표를 만드는 요소-->
	<!--tr 행을 만드는 요소-->
	<!--tr rowspan 열을 합치는 요소-->
	<!--td 열을 만드는 요소-->
	<!--td colspan 열을 합치는 요소-->
	<body>
	<!--기본테이블-->
	<table border="1">
	<tr>
	<td colspan="2">1행1열</td>
	</tr>
	<tr>
	<td>2행1열</td>
	<td rowspan="2">2행2열</td>
	</tr>
	<tr>
	<td>3행1열</td>
	</tr>
	</table>

	<!--시간표-->

	<br>
	<table border="1">
	<tr>
	<th></th>
	<th>월</th>
	<th>화</th>
	<th>수</th>
	<th>목</th>
	<th>금</th>
	<th>담당교사</th>
	</tr>
	<tr>
	<td>1교시</td>
	<td>영어</td>
	<td>국어</td>
	<td>과학</td>
	<td>미술</td>
	<td>기술</td>
	<td rowspan="3">홍길동</td>
	</tr>
	<tr>
	<td>2교시</td>
	<td>도덕</td>
	<td>체육</td>
	<td>영어</td>
	<td>수학</td>
	<td>사회</td>
	</tr>
	<tr>
	<td colspan="6">휴강입니다</td>
	</tr>
	</table>

	<!--thead,tbody,tfoot 구조 -->

	<br>
	<table border="2">
	<thead>
	<tr>
	<td>thead</td>
	<td>thead</td>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td>tbody</td>
	<td>tbody</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
	<td>tfoot</td>
	<td>tfootb</td>
	</tr>
	</tfoot>
	</table>

	<!--테이블 colspan , rowspan 연습-->

	<table border=2>
	<tr>
	<th colspan=2>지역별 홍차</th>
	</tr>
	<tr>
	<th rowspan=3>중국</th>
	<td>정산소종</td>
	</tr>
	<tr>
	<td>기문</td>
	</tr>
	<tr>
	<td>운남</td>
	</tr>
	<tr>
	<th rowspan=4>인도 및 스리랑카</th>
	<td>아삼</td>
	</tr>
	<tr>
	<td>실론</td>
	</tr>
	<tr>
	<td>다질링</td>
	</tr>
	<tr>
	<td>닐기리</td>
	</tr>
	</table>

	</body>
	</html>

view raw HTML_Day02_Table.html hosted with ❤ by GitHub

1행1열
2행1열	2행2열
3행1열

	월	화	수	목	금	담당교사
1교시	영어	국어	과학	미술	기술	홍길동
2교시	도덕	체육	영어	수학	사회
휴강입니다

thead	thead
tbody	tbody
tfoot	tfootb

지역별 홍차
중국	정산소종
	기문
	운남
인도 및 스리랑카	아삼
	실론
	다질링
	닐기리

저작자표시 (새창열림)

'개발 > HTML5' 카테고리의 다른 글

웹 관련 정리 내용 (0)	2014.12.19
JSP기본 정의 (0)	2014.12.16
03.HTML - form요소과 form내부의 input요소 (2)	2014.12.02
01.HTML - 기본 태그 설명 및 예제 (0)	2014.12.02
00.HTML - 기본 개념 (0)	2014.12.02

댓글

티스토리툴바