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>
테이블 디자인 변경
| 주제 | 속성 | 비고 |
| 테이블 디자인 변경 | 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>
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] pre 태그 사용법 & 예제 (0) | 2018.06.24 |
|---|---|
| [Html] 테이블안에 테이블 충첩하기 (2) | 2018.06.23 |
| [Html] 문단을 나누는 P태그 사용법 (0) | 2018.06.21 |
| [Html] UL 태그, OL태그, DL태그, LI태그 사용법 (4) | 2018.06.20 |