[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

HTML을 하다보면 굉장히 많이 사용하는 태그가 바로 <table>일것입니다. 바로 표를 만들어주는 HTML태그인데요. 표 뿐만 아니라 갤러리를 만들 수도 있고 지금은 잘 사용하지 않습니다만 웹사이트 전체의 레이아웃 공간을 배치할때도 사용할 수 있는 등 매우 다양하게 응용이 가능하여 굉장히 많이 사용되는 태그중 하나입니다. 이번 포스팅에서는 HTML의 테이블을 만드는 모든 기법에 대해 다뤄보려 합니다.


테이블 만들기

주제 

태그

비고 

 테이블의 구성 요소

<table>

 테이블을 만드는 태그

<th>

 테이블의 헤더부분을 만드는 태그

 <tr>

 테이블의 행을 만드는 태그

 <td>

 테이블의 열을 만드는 태그


테이블을 만드는 순서는 다음과 같습니다. 먼저 제일 바깥쪽에는 <table></table>태그가 들어갑니다. 그리고 가장 위에는 <th>라는 테이블 헤더 태그를 사용합니다.  Default값은 굵은 글씨체에 가운데 정렬이 기본값입니다. 실질적으로 이 태그는 안쓰는 사람이 훨씬 많습니다. (대부분 <tr>태그를 활용하여 테이블 헤더를 만듭니다. )그 다음은 행을 만드는 태그 <tr>태그가 들어갑니다. 그리고 <tr>태그 안에는 열을 만드는 속성<td>태그가 들어갑니다. 아래 예제를 보시면 바로 이해하실 수 있으실겁니다.


<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC>
<html>
<head>
<meta charset="EUC-KR">
<title>초간단 테이블</title>
</head>
<body>
    <table border="1">
	<th>테이블</th>
	<th>만들기</th>
	<tr><!-- 첫번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 첫번째 줄 끝 -->
	<tr><!-- 두번째 줄 시작 -->
	    <td>첫번째 칸</td>
	    <td>두번째 칸</td>
	</tr><!-- 두번째 줄 끝 -->
    </table>
</body>
</html>

테이블예제1


테이블 디자인 변경

 주제

속성

비고 

 테이블 디자인 변경

 border

테이블의 테두리

 bordercolor

테이블의 테두리 색상 

 width

테이블 가로 크기 

height 

테이블 세로 크기 

 align

정렬

 bgcolor

배경색 

 colspan

 가로 합병(열 합병)

 rowspan

 세로 합병(행 합병)


테이블의 디자인을 바꿀 수 있는 방법은 다양한 방법이 있겠습니다만 위의 표에있는 속성들이 대표적입니다. 


1. border 속성은 테이블의 테두리를 설정해주는 속성입니다. ex (border="1") 숫자가 높을수록 테두리가 두꺼워집니다. 

2. bordercolor는 테두리의 색상을 지정하는 속성입니다. ex(bordercolor="blue") default값은 검정색입니다. 

3. width와 height는 테이블의 크기를 결정해주는 속성입니다. ex(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있습니다. 

4. align은 테이블안에있는 값들을 정렬시키는 기능을 합니다. 

5. bgcolor속성으로 원하는 태그의 배경색을 지정해줄 수 있습니다. 

6. colspan, rowspan은 셀을 합병(행/열)시키는 기능을 합니다. 

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<table border="1" bordercolor="blue" width ="500" height="300" align = "center" >
    <tr bgcolor="blue" align ="center">
	<p><td colspan = "3" span style="color:white">오늘의 수입/지출</td></p>
    </tr>
    <tr align = "center" bgcolor="skybule">
	<td>내용</td>
	<td>수입</td>
	<td>지출</td>
    </tr>
    <tr>
	<td>월급!</td>
	<td>1,000,000</td>
	<td></td>
    </tr>
    <tr>
	<td>점심값</td>
	<td></td>
	<td>5,000</td>
    </tr>
    <tr>
	<td>부모님선물</td>
	<td></td>
	<td>30,000</td>
    </tr>
    <tr>
	<td rowspan="3" align = "center" bgcolor="skyblue">총계</td>
	<td>수입</td>
	<td>지출</td>
    </tr>
    <tr>
	<td>1,000,000</td>
	<td>35,000</td>	
    </tr>
    <tr>
	<td>남은돈</td>
	<td>965,000</td>	
    </tr>
</table>
</body>
</html>

테이블예제2



댓글(5)

  • 초보
    2020.01.25 21:00

    테이블 태그 보다가 궁금점이 있어서요. 테이블코드는 이해했는데요,

    다름이 아니라 위에 테이블 코드 보여주실 때 코드가 보이는 화면은 어떻게 삽입하는 건가요? 제가 홈페이지를 만들고 있는데, 관리자님처럼 중간에 저런 html 코드를 이쁘게 넣고 싶어서요. 저런 모듈이 따로 있나요? 저는 asp.net 으로 홈페이지를 만들고 있어요.

    오래된 글이라 보실지 모르겠지만, 궁금해서 남겨봐요.

    • 2020.01.27 13:46 신고

      코드는 하이라이트.js를 활용해서 올리고 있습니다.

      https://coding-factory.tistory.com/171

  • 2021.01.08 14:19 신고

    테이블 구조에 대해 설명이 너무 잘 되어있네요.

    잘 읽고 갑니다!

  • Aakanksha
    2021.05.31 13:31

    <html> label microsoft </html>

  • 2021.08.18 11:51 신고

    블로그에 HTML 기능을 적극적으로 사용할려고 했는데 딱 제가 찾고 있던 정보였습니다. 너무 감사합니다.

Designed by JB FACTORY