HTML 테이블(Table) 만들기 - <table> <tr> <th> <td>

💻Coding/📓 HTML

HTML 테이블(Table) 만들기 - <table> <tr> <th> <td>

음은응 2021. 8. 17. 19:50

728x90

HTML 테이블(Table) 만들기 - <table> <tr> <th> <td>

HTML <table> → 테이블태그를 사용해 표 만들기

- <table>~</table> <tr>~</tr> <th>~</th> <td>~</td> 이렇게 클로징 태그를 작성해야합니다.

- <table>태그가 tr, th, td를 감싸고 있는 형태입니다.

- <tr> : 표의 행을 만드는 태그입니다.

- <th> : 표에서 제목을 만드는 태그
→ ※ <th>태그는 테이블(표)의 첫번 째 행에서 사용되며 각 열의 제목을 만드는데 사용합니다.

- <td> : 표의 열을 만드는 태그

[ table 기본 형태 ]

<table>
	<tr>
		<th>열의 제목1</th>
		<th>열의 제목2</th>		
		<th>열의 제목3</th>
	</tr>
	<tr>
		<td>2번째행의 1번째열</td>
		<td>2번째행의 2번째열</td>		
		<td>2번째행의 3번째열</td>
	</tr>
	<tr>
		<td>3번째행의 1번째열</td>
		<td>3번째행의 2번째열</td>		
		<td>3번째행의 3번째열</td>
	</tr>
</table>

[ 실행시 화면 ]

ㄴ "색깔이 안들어가 있어서 테이블의 형태가 구분이 잘 안가시죠?"
아래에 css 요소를 잠깐 넣어 테이블 구분만 해볼께요~😀

(↓↓↓css는 나중에 배울테니 지금은 테이블의 영역만 확인하기!🤩↓↓↓)

[ table 색깔 넣었을 때 code ]

<h2>테이블 만들기</h2>
<table>
	<tr style="background-color:lightcoral">
		<th>열의 제목1</th>
		<th>열의 제목2</th>		
		<th>열의 제목3</th>
	</tr>
	<tr style="background-color:lightgoldenrodyellow">
		<td>2번째행의 1번째열</td>
		<td>2번째행의 2번째열</td>		
		<td>2번째행의 3번째열</td>
	</tr>
	<tr style="background-color:lightskyblue">
		<td>3번째행의 1번째열</td>
		<td>3번째행의 2번째열</td>		
		<td>3번째행의 3번째열</td>
	</tr>
</table>

[ 실행시 화면 ]

✔ 테이블 열과 행을 병합하기

<table>에서 자주 쓰는 속성
→ colspan, rowspan

colspan : 열을 합칠 때 쓰는 속성
rowspan : 행을 합칠 때 쓰는 속성

※합칠 셀의 개수를 속성 뒤에 값으로 입력하여 작성

(↓↓↓css는 나중에 배울테니 지금은 테이블의 영역만 확인하기!🤩↓↓↓)

[ 실전예시 ]

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>테이블_열과 행의 병합</title>
	<style>
		table, th, td {
            border: 1px solid black;
        }
	</style>
</head>
<body>
	<h2>테이블의 행 합치기</h2>
	<table style="width:100%">
		<tr>
			<td>1행 1열</td>
			<td>1행 2열</td>
			<td>1행 3열</td>		
		</tr>
		<tr>
			<td rowspan="2" style="background-color: lightyellow;">2행 1열</td>
			<td>2행 2열</td>		
			<td>2행 3열</td>
		</tr>
		<tr>
			<td>3행 2열</td>		
			<td>3행 3열</td>
		</tr>
	</table>

    <h2>테이블의 열 합치기</h2>
	<table style="width:100%">
		<tr>
			<td colspan="2" style="background-color:lightyellow;">1행 1열</td>
			<td>1행 3열</td>
		</tr>
		<tr>
			<td>2행 1열</td>
			<td>2행 2열</td>		
			<td>2행 3열</td>
		</tr>
		<tr>
			<td>3행 1열</td>		
			<td>3행 2열</td>
            <td>3행 3열</td>
		</tr>
	</table>
</body>
</html>

[ 실행시 화면 ]

html - table 속성 colspan, rowspan chrome 화면

😀 오늘 배운 table 한눈에 보기! 😀

🟠 실제로 <table>은 어떻게 쓰일까요? 🟠

ㄴ 표 형식으로 되어있는 곳에서 쓰이는데, 주로 게시판이라 등급표 등에서 많이 사용합니다.

728x90

저작자표시 비영리 변경금지 (새창열림)