(41) [HTML] 2일 HTML 테이블 레이아웃

<table>~</table>

테이블 태그로 테이블(표)을 정의

<tr>	테이블의 행을 나타내며 <td>,<th>등 열을 결정하는 태그를 포함한다.
<td>	테이블 데이터를 나타냄
<th>	테이블 헤더(타이틀)를 나타냄

<tr>~</tr>

테이블 행 태그로 <table>태그 내에 행을 정의 한다.

<tr> 태그에는 하나 이상의 <th>,<td> 태그가 포함되어 있다

속성
- align : 콘텐츠 정렬을 지정 속성값 : left,center,right,justify
- height : 행의 높이를 픽셀로 지정

<td>~</td>

테이블 데이터 태그

<tr> 태그 안에 기술하며 테이블의 컬럼을 정의한다.

속성
- align : 콘텐츠 정렬을 지정 속성값 : left,center,right,justify
- height : 행의 높이를 픽셀로 지정

<th>~</th>

테이블 헤더 태그. <tr> 태그에 기술하며, 테이블에서 셀의 제목을 정의한다. 굵은 텍스트 표시되며, 기본적으로 가운데 정렬된다. 속성은 <td> 태그와 동일.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>table 태그</h3>

<!-- 
	-tr : 행, th나 td태그등의 열을 결정하는 태그를 포함한다.
	-td : 테이블의 데이터를 나타냄. 
	-th : 테이블에서 헤더를 나타낼때 사용하며 , 기본적으로 가운데 정렬, 볼드체 
	-모든 tr안의 td 또는 th의 개수는 일치해야 한다. 
 -->
 
	<table>
		<tr>
			<td>A</td>
			<td>B</td>
		</tr>
		<tr>
			<td>C</td>
			<td>D</td>
		</tr>
		<tr>
			<td>E</td>
			<td>F</td>
		</tr>

	</table>
<hr>

<!-- border 속성 : 보더 -->
	<table border="1" style="width: 200px; ">
		<tr>
			<th>제목1</th>
			<th>제목2</th>
		</tr>
		<tr>
			<td>A</td>
			<td>B</td>
		</tr>
		<tr>
			<td>C</td>
			<td>D</td>
		</tr>
		<tr>
			<td>E</td>
			<td>F</td>
		</tr>

	</table>	
<hr>


<!-- td는 width 속성을 이용하여 열의 폭을 지정할 수 있다. -->
<!-- tr,td는 align을 이용하여 데이터를 정렬 할 수 있다. -->
	<table border="1" style="width: 300px">
	<tr>
		<td width="80">A</td>
		<td width="80">B</td>
		<td>C</td> <!-- 나머지 폭 :140 -->
	</tr>
	<tr>
		<td>D</td>
		<td align="center">E</td>
		<td align="right">F</td>
	</tr>

		<tr align="center">
			<td>G</td>
			<td>H</td>
			<td>I</td>
		</tr>

	</table>




</body>
</html>

border

컨텐츠의 경계선을 지정한다. border 두께(width), 색상(color) 및 특성(style)을 지정 한다.

border-collapse : 테이블 또는 셀의 테두리선 표시방법을 지정하는 속성으로 테두리선의 표시방법만 지정한다. 테두리는 border속성으로 구체적인 테두리선의 스타일을 지정해 주어야 한다.

border-collapse

테이블 또는 셀의 테두리선 표시방법을 지정하는 속성으로 테두리선의 표시방법만 지정.
테두리는 border 속성으로 구체적인 테두리선의 스타일을 지정해 주어야 한다.
tr 요소는 기본적으로 스타일의 border 속성을 이용하여 테두리를 지정할 수 없다.
tr 요소에서 스타일의 border 속성을 이용하여 테두리를 지정하기 위해서는 table 요소의 스타일에 『border-collapse:collapse;』 속성을 추가 한다.
border-collapse: 속성값
collapse : 컬랩스는 서로 이웃하는 테이블이나 셀의 테두리선을 겹쳐서 표현
separate : 기본값으로 서로 이웃하는 테이블이나 셀의 테두리선을 분리시켜 표현

border-spacing
인접한 표 셀의 테두리 간 간격을 지정
border-spacing: 속성값
<길이> : 수평과 수직의 간격

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>

<h3>table</h3>

<!-- colspan : 가로로 합치고자하는 열수 지정  -->
<table border="1" style="width: 400px">

<tr>
	<td>A</td>
	<td>B</td>
	<td>C</td>
	<td>D</td>
</tr>
<tr>
	<td>E</td>
	<td rowspan="2">F</td>
	<td>G</td>
	<td>H</td>
</tr>
<tr>
	<td>I</td>
	<td colspan="2">J</td>
</tr>
</table>

<hr>


<!-- rowspan : 세로로 합치고자하는 행수 지정  -->
<table border="1" style="width: 400px">

<tr>
	<td>A</td>
	<td>B</td>
	<td>C</td>
	<td>D</td>
</tr>
<tr>
	<td>E</td>
	<td rowspan="2">F</td>
	<td>G</td>
	<td>H</td>
</tr>
<tr>
	<td>I</td>
	<td colspan="2">J</td>
</tr>
</table>

<hr>

<!--
border-collapse : 선 표시 방법 지정. collapse > 테투리선을 합쳐서 표시 
 -->

<table border="1" style="width: 400px; border-collapse: collapse; margin: 10px auto;">
<caption>테이블 예제</caption>
<tr>
	<th width="100">제목1</th>
	<th width="100">제목2</th>
	<th width="100">제목3</th>
	<th>제목4</th>
</tr>
<tr align="center">
	<td>A</td>
	<td>B</td>
	<td>C</td>
	<td>D</td>
</tr>
<tr align="center">
	<td>E</td>
	<td>F</td>
	<td>G</td>
	<td>H</td>
</tr>
</table>

<hr>





</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">

<style type="text/css">
.table {
	width: 600px;
	border-collapse: collapse;
	margin: 20px auto;
}

.table caption{
	color: blue;
	padding: 7px;
	font-weight: 600;
}

.table td, .table th {
	padding: 5px;
}

.table thead > tr{ background: #eee;}
</style>
</head>
<body>


<!-- 
	caption 태그 : 테이블의 제목
	thead 태그 : 테이블의 머리말 부분
	tbody 태그 : 테이블의 몸체(본문)
			  : thead,tbody,tfoot 태그에 포함되지 안흔ㄴ 태그는 tbody 태그에 포함
	tfoot 태그 : 테이블의 꼬리말 부분  
 -->




	<table border="1" class="table">
		<caption>성적처리</caption>

		<thead>
			<tr>
				<th width="100">이름</th>
				<th width="100">국어</th>
				<th width="100">영어</th>
				<th width="100">수학</th>
				<th width="100">총점</th>
				<th width="100">평균</th>
			</tr>
		</thead>

		<tbody>
			<tr align="right">
				<td align="center">이자바</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
				<td>240</td>
				<td>80</td>
			</tr>
				<tr align="right">
				<td align="center">김자바</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
				<td>240</td>
				<td>80</td>
			</tr>
			<tr align="right">
				<td align="center">홍자바</td>
				<td>80</td>
				<td>80</td>
				<td>80</td>
				<td>240</td>
				<td>80</td>
			</tr>
		</tbody>


		<tfoot>
			<tr align="right">
				<td align="center">합</td>
				<td>240</td>
				<td>240</td>
				<td>240</td>
				<td>720</td>
				<td>80</td>
			</tr>
		</tfoot>


	</table>
</body>
</html>

'💻 > HTML' 카테고리의 다른 글

(42) [HTML] 3일 HTML 폼 태그 (0)	2024.04.16
(42) [HTML] 3일 HTML List, Links 태그 (0)	2024.04.15
(41) [HTML] 2일 HTML 레이아웃 (1)	2024.04.12
(40) [HTML] 1일 HTML 레이아웃 (0)	2024.04.11
(40) [HTML] 1일 HTML 기본 (0)	2024.04.11

Power Up!

(41) [HTML] 2일 HTML 테이블 레이아웃

<table>~</table>

<tr>~</tr>

<td>~</td>

<th>~</th>

border

border-collapse

'💻 > HTML' 카테고리의 다른 글

티스토리툴바

(41) [HTML] 2일 HTML 테이블 레이아웃

<table>~</table>

<tr>~</tr>

<td>~</td>

<th>~</th>

border

border-collapse

'💻 > HTML' 카테고리의 다른 글

관련글

티스토리툴바