오늘 알아볼 태그는 table 태그이다.
table태그로 우리가 접하는 파이썬 dataframe이나, 엑셀의 csv 모양처럼 행과 열을 만들 수 있다.
<table> 이라는 태그로 테이블의 테두리나 너비, 높이 등을 조절할 수 있고,
<tr>태그로 행을, <td>태그로 열을 만들어 줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align = "center">
<table border = "1" style = "width : 400px; height : 400px;">
<tr>
<td> 1 - 1 </td>
<td> 2 - 1 </td>
</tr>
<tr>
<td> 1 - 2 </td>
<td> 2 - 2 </td>
</tr>
</table>
</div>
</body>
</html>
위 코드를 보고 감을 잡으면,
1행당 2열이 있고, 총 2행이 있음을 알 수 있다.
셀 합치기처럼 열과 행을 합칠 수도 있는데, 이는 행을 합칠 때는 rowspan, 열을 합칠 때는 colspan을 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1" style = "width : 400px; height : 400px;">
<tr>
<td rowspan = "2"> 첫 번째 칸 </td>
<td colspan = "2"> 두 번째 칸 </td>
</tr>
<tr>
<td colspan = "1"> 두 번째 칸 </td>
<td rowspan = "2"> 세 번째 칸 </td>
</tr>
<tr>
<td> 첫 번째 칸 </td>
<td> 두 번째 칸 </td>
</tr>
</table>
</body>
</html>이렇게 하면 무슨 모양이 나올까?
정말 기괴한 모양이 나온다.
rowspan = "2"는 두 행을 묶는다.
colspan = "2"는 두 열을 묶는다.
그래서 두 번째 <tr>태그에서는 처음에 선언한 <td>
태그가 바로 두 번째 칸이 된다.
그런 방식으로 생각해보면
쉽진 않다...!
이번에는, <thead>와 <tfoot>에 대해 알아보도록 하자.
당연히, thead는 테이블의 윗부분, tfoot은 테이블의 발 부분인 아랫 부분을 의미한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1" style = "width : 400px; height : 600px;">
<caption> table thead tbody tfoot 연습 </caption>
<col style="background-color: blue">
<col style="background-color: yellow">
<col span="2" style="background-color: pink">
<thead>
<tr>
<th>h-1</th>
<th>h-2</th>
<th>h-3</th>
<th>h-4</th>
<th>h-5</th>
</tr>
</thead>
<tfoot style="background-color: white">
<tr>
<td colspan="5">table foot</td>
</tr>
</tfoot>
<tr style="background-color: aqua">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
<td>1-5</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
<td>2-5</td>
</tr>
</table>
</body>
</html>
<thead>에서
<tr> 1 행을 선언하고, <th>로 5개의 열을 만든다.
이전에 <tr>, <td>만 봤는데
<th>는 무엇일까?
별 다를 건 없지만, 테이블 헤더를 만들 때 사용한다.
볼드체, 가운데 정렬이 기본적으로 되어있다는 것이
차이가 있다.
<tfoot>은 발 부분인데 왜 가운데에 썼을까?
그건 큰 의미가 없다.
<tfoot>을 맨 밑에다 써도 상관 없다.
다음에는 form 태그에 대해서 알아보도록 하겠다.
'HTML&CSS&JS' 카테고리의 다른 글
| [HTML5] <table> 태그로 계산기 모양 만들기 (0) | 2020.06.22 |
|---|---|
| [HTML5] <form> 태그 (2) | 2020.06.22 |
| [HTML5] <audio> <video> <iframe> < embed> 태그 (0) | 2020.06.21 |
| [HTML5] <ol> <ul>, <li>, <header>, <section>, <footer> 태그 (0) | 2020.06.21 |
| [HTML5] <h> < img> <select> 태그 (0) | 2020.06.21 |
