본문 바로가기
카테고리 없음

[Html] Table 생성

by AngieLee 2021. 6. 3.

Table Tag

table :  표 만들 때 사용하는 태그

tr : 표 내부의 행 태그

th : 행 내부의 제목 셀 태그 (글씨가 두껍고 가운데 정렬)

td: 행 내부의 일반 셀 태그 (기본 두께와 왼쪽 정렬)

border :  표의 테두리 두께를 지정하는 태그

rowspan : 셀의 높이 지정

colspan : 셀의 너비 지정

caption : 테이블 명

 

 

기본 테이블 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<table border="2">
	<col width="50"><col width="80"><col width="50"><col width="150">
	<tr>
		<th>번호</th><th>이름</th><th>성별</th><th>직업</th>
	</tr>
	<tr>
		<th>1</th><td>유재석</td><td>남자</td><td>개그맨</td>
	</tr>
	<tr>
		<th>2</th><td>박찬호</td><td>남자</td><td>야구선수</td>
	</tr>
	<tr>
		<th>3</th><td>아이유</td><td>여자</td><td>가수</td>
	</tr>

</table>
</div>

</body>
</html>

실행결과

 

 

태그를 몇 가지 추가.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div align="center"> 	<!-- 표 가운데 정렬 -->
<caption>회원 정보</caption>	<!-- 테이블 이름 -->
<table border="3"; bordercolor="red">	<!-- 테두리 선 굵기와 컬러 변경 -->
	<col width="50"><col width="80"><col width="50"><col width="150">
	<tr bgcolor="pink">		<!-- 표 컬러변경 -->
		<th>번호</th><th>이름</th><th>성별</th><th>직업</th>
	</tr>
	<tr>
		<th>1</th><td>유재석</td><td rowspan="2"; align="center">남자</td><td>개그맨</td>
	</tr>						<!-- 성별 가운데정렬 및 같은 성별끼리 묶음 -->
	<tr>
		<th>2</th><td>박찬호</td><td>야구선수</td>
	</tr>
	<tr>
		<th>3</th><td>아이유</td><td align="center">여자</td>
		<td style="color:blue">가수</td>	<!-- 아이유 직업 컬러 변경 -->
	</tr>

</table>
</div>

</body>
</html>

실행결과