2일차(2) HTML 기초 : table
<table 예제1(약식)>
<!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>
#myTable{
/* table 경계선 사이의 공간을 없애기 */
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="myTable">
<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>- table은 block element로 행/열(column/row)가 있다.
- <tr>: =row. 열 하나!!
tr 안쪽은 column으로 구성되어있음
- <th>: 첫 행(제목 등), 굵은글씨, 가운데정렬
<td>: 일반글씨, 왼쪽정렬
- <tbody>, <thead> 등이 필요하지만 생략해도 브라우저는 인식한다.
- <style> {border-collapse: collapse;} </style> : 경계선 사이의 공간을 없앤다.
표의 테두리와 셀의 테두리 사이의 간격을 없애고 하나의 선으로 보이게끔 만든다.
<table 예제2>
<!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>
<!-- table 의 자식 요소로는 thead, tbody, tfoot 이 올수 있다 -->
<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>(생략하지 않고 전체 작성한 table)
- <caption> : 표 타이틀. 기본 가운데 정렬
- <thead> : 표 제목/첫 행, <th>를 작성
- <tbody> : 표 내용/본문, <td>를 작성
- 두번째 표는 <thead>, <tfoot>, <tbody> 순서로 작성되어 있음
- <tfoot> :마지막 행이지만 중요한 정보(합계. 결과 등)이기 때문에 위에 작성한다.
중요도때문에 위에 위치해있지만 화면상으로는 제일 아래에 표시된다.
(스크린리더 사용시 위에서부터 순서대로 읽어주게 되므로)
- <colgroup> 안에는 col의 갯수만큼 요소가 들어가야 한다.
col별로 폭, 스타일 등을 별도로 지정하고 싶을 때 사용.
- <col width=""> : 칼럼의 폭 조정
<!--참고용-->
<colgroup>
<col>
<col width="200">
<col width="100" style="background: green">
</colgroup>
<table 예제3> : 셀 병합
<!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>
</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>- 셀을 병합할 때 사용하는 요소
- <colspan="합칠 columns 개수">
- <rowspan="합칠 rows 개수">
<tr>
<td colspan="2">1</td>
<!-- <td>2</td> -->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>- 위와 같이 합쳐질 경우 없어질 행을 <!-- --> 안에 표시해준다.
'국비교육(22-23)' 카테고리의 다른 글
| 2일차(4)/HTML 기초 : form(2) (0) | 2022.10.06 |
|---|---|
| 2일차(3)/HTML 기초: form(1) (0) | 2022.10.06 |
| 2일차(1)/HTML 기초 : ul, ol, dl (0) | 2022.10.06 |
| 1일차(4) CSS : Block, Inline 요소 예제 (0) | 2022.10.06 |
| 1일차(3)/HTML, CSS, Javascript 기초 (0) | 2022.10.06 |