5.Table Tag

FrontEnd/Html

5.Table Tag

jmaster 2021. 12. 18. 17:36

Table Tag(테이블 태그)

table 태그 : 표 출력 - 하위태그 : tr
border 속성 : 0(외곽선 미출력 - 기본) 또는 1(외곽선 출력)을 속성값으로 설정
=> 상위 태그에 설정된 디자인 속성은 하위태그에 상속되어 적용

	<table border="1">

tr 태그 : 행 출력 - 하위태그 : th 또는 td <tr>
=> 모든 tr 태그는 셀의 갯수가 같도록 작성하는 것을 권장

<tr></td>

th 태그 또는 td 태그 : 열 출력 - 태그내용으로 값 출력 - 셀(Cell)
=> 셀의 폭은 태그내용에 의해 자동 변경
=> th 태그는 태그내용을 가운데 정렬하고 굵게 출력 - 컬럼명 출력

<tr>
	<th>번호</th><th>이름</th><th>주소</th>
</tr>
<tr>
	<td>1000</td><td>홍길동</td><td>서울시 강남구</td>
</tr>

전체 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
	<h1>table 태그</h1>
	<hr>
	<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>

출력