HTML에서 테이블은 <table>로 만든다.
<table> - table로 가장 바깥쪽을 둘러싼다. 내부에 행을 나타내는 tr과 셀을 나타내는 th, td 태그 등이 사용된다.
<tr> - table row이다. 표 내부에서 행을 나타내는 태그이다.
<th> - table header이다. 헤더칸을 나타낸다. 기본으로 중앙정렬, 두껍게가 설정되어있다.
<td> - table data이다. 일반적인 칸을 나타내는 태그이다. 기본으로 왼쪽 정렬이 된다.
table의 각 영역을 구분지어서 사용하고 싶을때 thead, tbody, tfoot으로 구분지어서 사용한다.
<thead> - 표의 머리글을 지정한다.
<tbody> - 표의 본문글을 지정한다.
<tfoot> - 표의 바닥글을 지정한다.
<caption> - 표의 제목을 나타낸다. 이 요소는 table 요소의 가장 첫 번째 자식으로 와야한다.
<colgroup> - 테이블의 컬럼에 적용할 스타일 width와 background를 해당 태그에서 미리 적용할 수 있게 한다. 특히 컬럼의 길이를 설정하는데 가장 많이 쓰인다.
<colgroup>
<col width="50px" style="background: red" />
<col width="200px" style="background: blue" />
<col width="100px" style="background: green" />
</colgroup>테이블의 칼럼을 합치고 싶을때는 colspan, rowspan을 사용한다.
<td colspan="2" rowspan="2">1</td>
Step08_table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step08_table.html</title>
<style>
/* 여기는 css 영역 입니다. */
#one{ /* id 속성의 value 가 one 인 요소를 선택 */
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>표(table) 형식으로 정보를 출력하기</h1>
<table>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</table>
<table border="1">
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</table>
<table border="1" id="one">
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</table>
</body>
</html>
Step08_table2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step08_table2.html</title>
</head>
<body>
<h1>table 요소 사용하기</h1>
<table border="1">
<!-- 표의 제목은 caption 요소 안에 표기 한다. -->
<caption>회원 목록</caption>
<!-- 칼럼의 폭을 조절하고 싶으면 colgroup 요소를 활용한다. -->
<colgroup>
<col width="100">
<col width="200">
<col width="300">
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>김구라</td>
<td>노량진</td>
</tr>
<tr>
<td>2</td>
<td>해골</td>
<td>행신동</td>
</tr>
</tbody>
</table>
<h1>tfoot 이 있는 table</h1>
<table border="1">
<caption>GS25 현금, 카드 매출 내역</caption>
<colgroup>
<col width="200">
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>상품명</th>
<th>현금</th>
<th>카드</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합계</th>
<td>4,300원</td>
<td>800원</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>삼각김밥</td>
<td>800</td>
<td>0</td>
</tr>
<tr>
<td>도시락</td>
<td>3,500</td>
<td>0</td>
</tr>
<tr>
<td>박카스</td>
<td>0</td>
<td>800</td>
</tr>
</tbody>
</table>
</body>
</html>
Step08_table3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step08_table3.html</title>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<h1>기본 스타일 테이블</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
<h1>1, 2 칼럼 합치기</h1>
<table border="1">
<tr>
<td colspan="2">1</td><!-- colspan="합칠 칼럼의 갯수" -->
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
<h1>9, 10 칼럼 합치기</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td colspan="2">9</td>
<!-- <td>10</td> -->
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
<h1>1, 6 칼럼 합치기</h1>
<table border="1">
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>6</td> -->
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
<h1>10, 15 칼럼 합치기</h1>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<!-- <td>15</td> -->
</tr>
</table>
<h1>1,2,6,7 칼럼을 하나로 합치기</h1>
<table border="1">
<tr>
<td colspan="2" rowspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<!-- <td>6</td>
<td>7</td> -->
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
</tr>
</table>
</body>
</html>
'WEB' 카테고리의 다른 글
| [HTML] form 폼 / 폼 요소 작성하기 / form, label, input (0) | 2021.10.07 |
|---|---|
| [CSS] border-collapse (collapse, separate) (0) | 2021.10.07 |
| [HTML] 목록 만들기 / ul, ol, dl (0) | 2021.10.06 |
| [HTML] span (0) | 2021.10.06 |
| [HTML] div / p / h1~h6 (0) | 2021.10.06 |
