IT•개발 끄적/HTML

[HTML] 테이블(table) 설명 및 레이아웃 만들기 (html table description and create lay-out)

소다맛사탕 2021. 5. 22. 01:00
반응형

이번 포스팅에선 게시판 형태,  홈페이지의 레이아웃을 관리하는 table 태그에 대해서 알아보겠습니다..

기본적으로 HTML table 태그는 데이터를 행과 열의 형태의 표 형식을 만드는데 사용합니다.

 

각 행의 테이블의 행은 <tr>

테이블의 헤더는 <th>

테이블의 데이터는 <td> 로 표시합니다.

테이블 속성 태그 설명
<table> 테이블을 정의
<tr> 테이블의 행
<th> 테이블의 헤더 셀
<td> 테이블의 셀(데이터)
<caption> 테이블의 캡션(설명)
<colgroup> 테이블의 그룹을 지정(행 합침 등에 이용)
<col> 각 열에 속성을 지정(상위 colgroup과 쓰임)
<tbody> 테이블 표의 본문 내용을 지정
<thead> 테이블 표의 헤더 내용을 그룹화(한 행에 합침)
<tfooter> 테이블 표의 바닥 글 내용을 그룹화(바닥글 행 합침)

 

예시를 통해 더 자세히 알아보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div style="width: 100%;">
	<table style="border: 1px solid; width: 500px;">
		<caption>테이블 예시</caption>
		<colgroup>
			<col style="width: 15%;"/>
			<col style="width: 35%;"/>
			<col style="width: 15%;"/>
			<col style="width: 35%;"/>
		</colgroup>
		<tbody>
			<tr>
				<th>컬럼1</th>
				<td>이것은 데이터1</td>
				<th>컬럼2</th>
				<td>이것은 데이터2</td>
			</tr>
			<tr>
				<th>컬럼3</th>
				<td colspan="3">한줄짜리</td>
			</tr>
		</tbody>
	</table>
</div>
<div style="padding-top: 10px;">
	<table style="border: 1px solid; width: 500px;">
		<colgroup>
			<col style="width: 5%;"/>
			<col style="width: 25%;"/>
			<col style="width: 25%;"/>
			<col style="width: 25%;"/>
			<col style="width: 20%;"/>
		</colgroup>
		<thead>
			<tr>
				<th>no</th>
				<th>컬럼1</th>
				<th>컬럼2</th>
				<th>컬럼3</th>
				<th>비고</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td style="text-align: center;">1</td>
				<td style="text-align: center;">데이터1</td>
				<td style="text-align: center;">데이터2</td>
				<td style="text-align: center;">데이터3</td>
				<td style="text-align: center;">아무글</td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>

테이블 예시

 

뭔가 CSS를 더 잘 씌운다면 표의 형태가 이쁘장하게 잘 나올수 있을꺼 같습니다.

 

저작자표시