본문 바로가기
Frontend/HTML

[HTML]05_table 태그

by sukii 2023. 12. 25.
반응형

table 태그 : 표(Table)를 출력하기 위한 태그
=> 하위태그 : tr 태그 

 

🔘tr 태그 : 행(Row)를 출력하기 위한 태그
=> 하위태그 : th 태그, td 태
=> 모든 tr 태그의 셀의 갯수는 동일하게 작성하는 것을 권장

 

🔘th(td) 태그 : 열(Column)를 출력하기 위한 태그
=> th 태그와 td 태그의 태그내용을 열(Column)에 출력 - 셀(Cell)
=> th 태그는 태그내용을 가운데 정렬하여 굵게 출력 - 컬럼명 출력
=> 셀의 폭은 태그내용에 의해 자동 변경

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>table 태그</h1>
	<hr>
	<!-- border 속성 : 0(외곽선 미출력 - 기본) 또는 1(외곽선 출력)을 속성값으로 설정 -->
	<!-- => 상위태그에 적용된 디자인 관련 속성은 하위태그로 상속태그로 상속되어 적용 -->
	<table border="1">
		
		<tr>
			<th>번호</th><th>이름</th><th>주소</th>
		</tr>				
		<tr>
			<td>1000</td><td>홍길동</td><td>서울시 강남구</td>
		</tr>
		<tr>
			<td>2000</td><td>임꺽정</td><td>수원시 팔달구</td>
		</tr>
		<tr>
			<td>3000</td><td>전우치</td><td>인천시 월미구</td>
		</tr>
	</table>
</body>
</html>

실행결과⬇️

반응형

'Frontend > HTML' 카테고리의 다른 글

[HTML]07_a 태그  (0) 2023.12.25
[HTML]06_tbody 태그 & style 태그 & caption 태그  (0) 2023.12.25
[HTML]04_dl 태그  (0) 2023.12.24
[HTML]03_ul태그 & ol 태그 & li 태그  (0) 2023.12.24
[HTML]02_img 태그  (0) 2023.12.24