Table
table은 html에서 표를 만들 수 있는 태그로 많이 사용되는 태그 중 하나이다. 표를 만드는 태그이지만 결국에는 공간을 분리를 하는 개념이기 때문에 테이블 태그를 응용하여 갤러리도 만드는 등 여러가지 응용이 가능한 태그이다.
위의 캘린더도 테이블을 통해 구현된 캘린더이다.
Table 만들기
테이블 태그는 아래와 같이 구성 요소를 이루는 태그를 가지고 있다.
| 태그 | 설명 |
| <table> | 테이블을 만드는 태그 |
| <th> | 테이블의 헤더 부분을 만드는 태그 |
| <tr> | 테이블의 행을 만드는 태그 |
| <td> | 테이블의 열을 만드는 태그 |
테이블을 만드는 순서 또한 중요하다. 먼저 table 태그를 통해 테이블을 선언을 해준 뒤 행을 만드는 tr 태그를 사용해주어야 그 안에 열을 만드는 태그인 td 태그를 사용할 수 있다. th 태그 같은 경우 table 태그안에서 tr 태그를 만들지 않고 사용할 수 있지만 많이 사용되지 않는 태그이다. (주로 tr 태그를 이용하여 헤더를 같이 만들어줌)
간단한 2 X 2 테이블을 생성해 보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
아래와 같이 테이블이 생성되는 것을 확인 할 수 있다.
Table 디자인
테이블을 응용하기 위해서는 table 디자인을 자유자재로 변경할 수 있어야 한다. 테이블 태그는 디자인을 변경할 수 있는 여러가지 속성들을 제공하고 있다.
| 속성 | 설명 |
| border | 테이블 테두리를 설정, 숫자가 높을 수록 두꺼워짐 |
| bordercolor | 테이블 테두리 색상 설정, defualt는 검은색 |
| width | 테이블의 너비를 지정 |
| height | 테이블의 높이를 지정 |
| align | 테이블의 위치 정렬 |
| bgcolor | 배경색을 지정 |
| colspan | 지정한 숫자만큼의 열을 합병(가로) |
| rowspan | 지정한 숫자만큼의 행을 합병(세로) |
이 외에도 더 많은 속성 들이 있지만, 위의 속성들이 대표적으로 많이 사용되는 속성들이다. 위의 속성들을 이용하여 간단한 테이블을 만들어 보겠다.
<!DOCTYPE html>
<html lang="ko">
<html>
<head>
<meta charset=utf-8>
<title>table 연습</title>
</head>
<body>
<table border = "1" width = '200px' height = '200px' align = 'center' bordercolor = 'red'>
<tr bgcolor = 'red'>
<td rowspan="3">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td colspan="3" bgcolor = 'green'>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
위의 html을 실행하면 다음과 같은 결과를 얻을 수 있다.
각각의 속성들을 사용하여 위의 테이블을 만들었기 때문에 해당 속성이 이떤 식으로 동작하는 지 알 수 있을 것이다. 여기서 주의 깊게 봐야 할 속성은 colspan과 rawspan이다.
첫번째 행의 첫번째 열(1) 은 rawspan이 3으로 3개의 행을 합병을 한다. 그렇다면 두번째 행의 첫번째 열은 어떻게 되는 것인가? 첫번째 행은 두번째 행을 세로로 밀어내는냐 가로로 밀어내는 냐를 알아야 합병 속성을 잘 다룰 수 있다.
정답은 가로로 밀어낸다이다. 즉, 2번째 행의 첫번 째 열(3)은 첫번째 행의 두번째 열의 위치부터 시작된다. 그렇기 때문에 첫번 째 열을 colspan을 3칸을 병합하였을 때 위와 같은 결과가 나온 것이다.
'Web > HTML' 카테고리의 다른 글
| [HTML] display (0) | 2023.10.29 |
|---|---|
| [HTML] list (1) | 2023.10.29 |
| [HTML] Tag - Image (0) | 2023.10.20 |
| [HTML] Tag - DIV&SPAN (0) | 2023.10.20 |
| [HTML] Style 속성 (0) | 2023.10.20 |