HTML TABLE TAG 정리

Notice

Recent Posts

Recent Comments

Link

« 2026/02 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

Tags more

Archives

Today

Total

관리 메뉴

404 page not found : 기록장

HTML TABLE TAG 정리 본문

HTML

HTML TABLE TAG 정리

Hannah_J 2020. 11. 19. 20:30

HTML 테이블 (Table)

테이블이란, 여러 종류의 데이터(data) 를 보기 좋게 정리하여 보여주는 표를 의미

HTML에서는 <table> 태그를 사용하여, 이러한 테이블을 작성할 수 있음.

<table> 태그의 구성

- <tr> 테이블의 열을 구분

- <th> 열의 제목을 나타냄, 굵은 글씨에 가운데 정렬

- <td> 테이블 열을 각각의 셀 (cell)로 나누어줌

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
</head>

<body>

	<h1>테이블 만들기</h1>
	<table style="width:100%">
		<tr style="background-color:lightgrey">
			<th>참치</th>
			<th>고래</th>		
			<th>날치</th>
		</tr>
		<tr>
			<td>상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>오징어</td>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>

</body>

</html>

소스 코드의 결과

css border 속성을 이용해, 테이블의 테두리를 표현할 수 있음.

border 속성값을 따로 명시하지 않으면, 테이블은 언제나 빈 테두리를 가짐.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
	<style>
		table, th, td { border: 1px solid black }
	</style>

</head>

<body>

	<h1>다양한 테이블 테두리</h1>
	<table style="width:100%">
		<tr style="background-color:lightgrey">
			<th>참치</th>
			<th>고래</th>		
			<th>날치</th>
		</tr>
		<tr>
			<td>상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>오징어</td>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>

</body>

</html>

소스코딩 결과

★테두리가 두 줄씩 나타나는 이유는,

<table> 태그와 <th> 태그, <td> 태그가 모두 자신만의 테두리를 가지고 있기 때문★

위와 같이 두 줄로 표현되는 테두리를 한 줄로 설정하려면, border-collapse 속성을 사용해야 함.

boreder- collapse 속성값을 collapse로 설정하면, 테이블의 테두리를 한 줄로 표현 가능.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
	<style>
		table, th, td {	border: 1px solid black; border-collapse: collapse }
	</style>

</head>

<body>

	<h1>일반적인 테이블 만들기</h1>
	<table style="width:100%">
		<tr style="background-color:lightgrey">
			<th>참치</th>
			<th>고래</th>		
			<th>날치</th>
		</tr>
		<tr>
			<td>상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>오징어</td>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>

</body>

</html>

소스코딩 결과

★border-collapse 의 속성값★

separate : 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
collapse : 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

테이블의 행 / 열 합치기

행을 합칠 때는 colspan , 열을 합칠 때는 rowspan을 이용하면 행과 열을 합칠 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
	<style>
		table, th, td {	border: 1px solid black; border-collapse: collapse }
	</style>

</head>

<body>

	<h1>테이블의 열 합치기</h1>
	<table style="width:100%">
		<tr>
			<td>참치</td>
			<td colspan="2">고래</td>		
		</tr>
		<tr>
			<td>상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>오징어</td>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>

</body>

</html>

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
	<style>
		table, th, td {	border: 1px solid black; border-collapse: collapse }
	</style>

</head>

<body>

	<h1>테이블의 행 합치기</h1>
	<table style="width:100%">
		<tr>
			<td>참치</td>
			<td>고래</td>
			<td>날치</td>		
		</tr>
		<tr>
			<td rowspan="2">상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>

</body>

</html>

테이블에 캡션 설정

<caption> 태그를 사용하면 테이블 상단에 제목이나 짧은 설명을 붙일 수 있습니다.

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
	<style>
		table, th, td {	border: 1px solid black; border-collapse: collapse }
	</style>

</head>

<body>

	<h1>테이블의 캡션 설정</h1>

	<table style="width:100%">
		<caption>해양 생물</caption>
		<tr>
			<td>참치</td>
			<td>고래</td>
			<td>날치</td>		
		</tr>
		<tr>
			<td>상어</td>
			<td>문어</td>		
			<td>꽁치</td>
		</tr>
		<tr>
			<td>오징어</td>
			<td>고등어</td>		
			<td>돌고래</td>
		</tr>
	</table>

</body>

</html>

<THEAD>, <TBODY>, <TFOOT>

표의 구조를 표의 제목과 본문 그리고 요약으로 나눔,

- <THEAD>

<thead> 태그는 HTML 테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용합니다.

<thead> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <tbody>, <tfoot> 요소와 함께 사용됩니다.

브라우저는 이러한 요소들을 사용하여 테이블의 헤더나 푸터와는 독립적으로 테이블의 내용만 스크롤되게 할 수 있으며, 여러 페이지에 걸쳐 있는 큰 테이블을 인쇄할 때 각 페이지의 상단과 하단에 테이블의 헤더와 푸터가 모두 인쇄되도록 할 수도 있습니다.

<thead> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup> 요소 다음에 위치해야 합니다. 또한, <thead> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

<thead>와 <tbody>, <tfoot> 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있습니다.

- <TBODY>

<tbody> 태그는 HTML 테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용합니다.

<tbody> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tfoot> 요소와 함께 사용됩니다.

<tbody> 요소는 <table> 요소의 자식 요소로써, 반드시 모든 <caption>, <colgroup>, <thead> 요소 다음에 위치해야 합니다. 또한, <tbody> 요소는 반드시 하나 이상의 <tr> 요소를 포함하고 있어야 합니다.

- <TFOOT>

<tfoot> 태그는 HTML 테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용합니다.

<tfoot> 요소는 테이블의 각 영역(header, body, footer)을 명시하기 위해 <thead>, <tbody> 요소와 함께 사용됩니다.

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
    <title>HTML thead tag</title>
    <style>
		table, th, td { border: 1px solid black; }
        thead { color: blue; }
        tbody { color: green; }
        tfoot { color: red; }
	</style>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>출장비 내역</th>
                <th>금액</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>교통비</td>
                <td>45000</td>
            </tr>
            <tr>
                <td>식비</td>
                <td>18000</td>
            </tr>
            <tr>
                <td>숙박비</td>
                <td>40000</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>총 합계</td>
                <td>103000</td>
            </tr>
        </tfoot>
	</table>
	
</body>
</html>

'HTML' 카테고리의 다른 글

자주 사용하게 되는 FORM 요소 INPUT TAG 정리 (0)	2020.11.05
웹 표준과 웹 호환성 (0)	2020.11.05

'HTML' Related Articles

404 page not found : 기록장

HTML TABLE TAG 정리 본문

HTML TABLE TAG 정리

HTML 테이블 (Table)

★border-collapse 의 속성값★

테이블의 행 / 열 합치기

테이블에 캡션 설정

<THEAD>, <TBODY>, <TFOOT>

- <THEAD>

- <TBODY>

- <TFOOT>

'HTML' 카테고리의 다른 글

티스토리툴바