겉바속촉

[html] table 생성하기 본문

IT일기(하반기)/HTML

[html] table 생성하기

겉바속촉 2020. 6. 16. 00:35
728x90
반응형

이번에는  table을 만들어보려고 하는데요:)

우선 개념을 짚고 가보도록 할게요!!

 

 

tr -> 각각의 한 행을 의미 (table row)

td -> 하나의 칸을 의미 (table data)

th -> 제목에 많이 사용 (table header) / 굵게, 가운데 정렬

 

 

 

table 디자인은 css를 사용해주려고합니다.

table {border: 2px solid gray;}

tr, td, th {border: 1px dotted purple;}

라고 작성했습니다

 

그리고 이제 table안에 들어갈 내용들을 작성해주시면 되는데요

행1 -> 행2 -> 행3 요런 순서로 데이터들이 들어간다고 생각해시면 됩니다:)

 

 

위의 그림이 이해가 가셨다면 

다음과 같이 작성해보도록 할게요:)

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style type="text/css">
table {
	border: 2px solid gray;
}

tr td, th{
	border: 1px dotted purple;
}
</style>
</head>
<body>
	<table>
		<tr>
		<!-- tr은 하나의 행 -->
			<th>이름</th> <!-- th은 제목 -->
			<th>나이</th>
			<th>학과</th>
			<th>주소</th>
		</tr>
		
		<tr>
			<td>보라돌이</td>
			<td>10</td>
			<td>체육교육학과</td>
			<td>텔레토비동산</td>
		</tr>
		
		<tr>
			<td>뚜비</td>
			<td>8</td>
			<td>식품공학과</td>
			<td>텔레토비 동산</td>
		</tr>
		
		<tr>
			<td>나나</td>
			<td>6</td>
			<td>무용과</td>
			<td>텔레토비 동산</td>
		</tr>
	
	    <tr>
			<td>뽀</td>
			<td>4</td>
			<td>아동교육학과</td>
			<td>텔레토비 동산</td>
		</tr>
	
	
	
	</table>

</body>
</html>

 

그리고 컴파일하셔서

다음과 같이 table이 나왔다면 성공!^^!

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] table에 css적용해보기  (0) 2020.06.16
[html] table 행, 열 합치기  (0) 2020.06.16
[html] 사진변환  (0) 2020.06.12
[html]데이터보내기  (0) 2020.06.12
[html] 간단한 게임만들기  (0) 2020.06.12
'IT일기(하반기)/HTML' Related Articles more