본문 바로가기
Front-End/HTML

[HTML] table 태그(tr 태그, th 태그, td 태그, table 속성)

by 찐코딩 2021. 10. 26.

table(테이블) 태그 : 데이터 표를 만드는 태그.
- tr 태그 : 테이블의 행을 만드는 태그.
- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
- td 태그 : 테이블의 열을 만드는 태그.

 

table 속성 : colspan, rowspan, border, bgcolor, width, height, cellpadding, cellspacing, align, valign 등

 

● colspan : column span 약자로, 셀(가로줄)을 합치는 개수를 지정 

 

● rowspan : row span이란 뜻으로 셀(세로줄)을 합치는 개수를 지정

 

● border : 테이블 경계선 굵기를 지정(예: border="10")

 

● width : 너비를 지정(픽셀이나, %)

 

● height : 높이를 지정(픽셀이나, %)

 

● cellpadding : 셀과 경계선 사이의 여백

 

● cellspacing : 셀과 셀 사이의 여백

 

● align : 셀의 가로줄을   오른쪽(right), 왼쪽(left), 중앙(center) 등으로 정렬

 

● valign : 셀의 세로줄의 위(top), 중앙(middle), 아래(bottom)를 정렬

 

● bgcolor : 배경색 지정

bgcolor 속성값으로는 색상 이름(예:green)이나, 색상코드(#ff0000) 등을 쓸 수 있음

 

● bordercolor: 경계선 색깔 지정

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>테이블 태그(아주 중요함)</title>
</head>
<body>

	<!-- 
		table(테이블) 태그 : 데이터 표를 만드는 태그.
		- tr 태그 : 테이블의 행을 만드는 태그.
		- th 태그 : 테이블의 열(타이틀-제목)을 만드는 태그.
		- td 태그 : 테이블의 열을 만드는 태그.
	 -->
	 
	 <table border="1" cellspacing="0">
	 	<tr> <!-- 1행 -->
	 		<td>1행1열</td>
	 		<td>1행2열</td>
	 		<td>1행3열</td>
	 		<td>1행4열</td>
	 	</tr>
	 	
	 	<tr> <!-- 2행 -->
	 		<td>2행1열</td>
	 		<td>2행2열</td>
	 		<td>2행3열</td>
	 		<td>2행4열</td>
	 	</tr>
	 	
	 	<tr>
	 		<td>3행1열</td>
	 		<td>3행2열</td>
	 		<td>3행3열</td>
	 		<td>3행4열</td>
	 	</tr>
	 
	 </table>
</body>
</html>

 	<!-- cellspacing : 셀 간의 간격-->
 	<!-- cellpadding : 셀과 글자 사이의 간격 -->

 	<table border="1" cellspacing="0" width="250">
		<tr>
			<th>아이디</th>
			<th>이   름</th>
			<th>나   이</th>
		</tr>
		<tr>
			<td>hong</td>
			<td>홍길동</td>
			<td>27</td>
		</tr>
		<tr>
			<td>lee</td>
			<td>이순신</td>
			<td>32</td>
		</tr>
		<tr>
			<td>you</td>
			<td>유관순</td>
			<td>25</td>
		</tr>
	</table>

<!-- 
	테이블 태그에서 행 또는 열 병합
	- rowspan 속성 : 테이블에서 행을 병합하는 속성
	- colspan 속성 : 테이블에서 열을 병합하는 속성
	형식) rowspan = "병합할 행의 수 " / colspan = "병합할 열의 수"
 -->
 	<table border="1" cellspacing="0">
 		<tr>
 			<td colspan="4">4열 병합</td>	<!-- <td colspan="n"> : n개의 열이 병합 -->
 			<!-- <td>1행2열</td>
 			<td>1행3열</td>
 			<td>1행4열</td> -->
 		</tr>
 		
 		<tr>
 			<td rowspan ="3">3행 병합</td>  <!-- <td rowspan ="n"> : n개의 행이 병합-->
 			<td>2행2열</td>
 			<td>2행3열</td>
 			<td>2행4열</td>
 		</tr>
 		
 		<tr>
 		<!-- <td>3행1열</td> -->
 			<td>3행2열</td>
 			<td>3행3열</td>
 			<td>3행4열</td>
 		</tr>	
 		
 		<tr>
 		<!-- <td>4행1열</td> -->
 			<td>4행2열</td>
 			<td>4행3열</td>
 			<td>4행4열</td>
 		</tr>	
 	</table>

 

테이블에 사진 넣기

	<table border="1" cellspacing="0">
		<tr>
			<th>차종</th>
			<th>이미지</th>
			<th>배기량</th>
			<th>연료</th>
			<th>연식</th>
			<th>제조사</th>
		</tr>
		
		<tr>
			<td>제네시스(쿠페)</td>
			<td><img src="images/car1.gif" width="188" height = "60"></td>
			<td rowspan="2">2,000</td>
			<td rowspan="2">가솔린</td>
			<td>2015</td>
			<td rowspan="5">현대자동차</td>			
		</tr>
		
		<tr>
			<td>소나타</td>
			<td><img src="images/car2.gif" width="188" height = "60"></td>
			<td>2014</td>
		</tr>
		
		<tr>
			<td>그랜져(HG)</td>
			<td><img src="images/car3.gif" width="188" height = "60"></td>
			<td>3,000</td>
			<td>디젤</td>
			<td>2015</td>
		</tr>
		
		<tr>
			<td>아반떼</td>
			<td><img src="images/car4.gif" width="188" height = "60"></td>
			<td>1,800</td>
			<td rowspan="2">가솔린</td>
			<td rowspan="2">2014</td>
		</tr>
		
		<tr>
			<td>i30</td>
			<td><img src="images/car5.gif" width="188" height = "60"></td>
			<td>1,500</td>
		</tr>
	
	
	</table>

 

저작자표시 비영리

'Front-End > HTML' 카테고리의 다른 글

[HTML] span 태그  (0) 2021.10.26
[HTML5] HTML5 기본 개념, 웹 표준  (0) 2021.10.26
[HTML] 이미지 태그(img 태그)  (0) 2021.10.25
[HTML] 목록 태그(ul, ol, li 태그)  (0) 2021.10.25
[HTML] 텍스트 관련 태그  (0) 2021.10.21

관련글

댓글

티스토리툴바