반응형
■ HTML 테이블 만들기
HTML을 이용하여 테이블을 만들어 봅니다.
▶ 테이블(Table) 사용법 총정리 - 만들기,테두리,병합,정렬,배경색 등등
1. 테이블 태그
1) <table> - 테이블을 만드는 태그
2) <th> - 테이블의 헤더부분을 만드는 태그
3) <tr> - 테이블의 행을 만드는 태그 (→)
4) <td> - 테이블의 열을 만드는 태그 (↓)
2. 실습 01
<!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>Document</title>
</head>
<body>
<table>
<tr>
<th>Username</th>
<th>Date Registered</th>
<th>Role</th>
<th>Status</th>
</tr>
<tr>
<td>Donna R.Folse</td>
<td>2012/05/06</td>
<td>Editor</td>
<td>Active</td>
</tr>
<tr>
<td>Emily F.Burns</td>
<td>2011/12/01</td>
<td>Staff</td>
<td>Banned</td>
</tr>
<tr>
<td>Andrew A.Stout</td>
<td>2010/08/21</td>
<td>User</td>
<td>Inactive</td>
</tr>
<tr>
<td>Mary M.Bryan</td>
<td>2009/04/11</td>
<td>Editor</td>
<td>Pending</td>
</tr>
<tr>
<td>Mary A.Lewis</td>
<td>2007/02/01</td>
<td>Staff</td>
<td>Active</td>
</tr>
</table>
</body>
</html>
3. <table> 태그 속성
1) border
2) bordercolor
3) width
4) height
5) align
6) bgcolor
7) colspan (→)
8) rowspan (↓)
Tip > bordercolor, bgcolor 참고 사이트
4. <th>,<td>태그에 속성
1) width 셀의 가로폭을 설정하는 속성
2) height 셀의 세로폭을 설정하는 속성
3) align 셀의 컨텐츠(텍스트, 이미지등)를 가로 정렬 시켜주는 속성 : left, right, center
4) vlign 셀의 컨텐츠(텍스트, 이미지등)를 세로 정렬 시켜주는 속성 : top, middle, bottom
5 테이블 디자인 변경 옵션 적용 실습
1) 테이블 전체의 Cell에 "1 픽셀"의 값으로 테두리를 넣습니다
<table border="1">
2) <th>, <td> 태그에 속성 적용 하기
<!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>Document</title>
</head>
<body>
<table>
<caption>표 제목 입니다</caption>
<tr>
<th width="200" align="center">Username</th>
<th width="200" align="center">Date Registered</th>
<th width="100" align="center">Role</th>
<th width="100" align="center">Status</th>
</tr>
<tr>
<td align="center">Donna R.Folse</td>
<td align="center">2012/05/06</td>
<td align="right">Editor</td>
<td align="right">Active</td>
</tr>
<tr>
<td align="center">Emily F.Burns</td>
<td align="center">2011/12/01</td>
<td align="right">Staff</td>
<td align="right">Banned</td>
</tr>
<tr>
<td align="center">Andrew A.Stout</td>
<td align="center">2010/08/21</td>
<td align="right">User</td>
<td align="right">Inactive</td>
</tr>
<tr>
<td align="center">Mary M.Bryan</td>
<td align="center">2009/04/11</td>
<td align="right">Editor</td>
<td align="right">Pending</td>
</tr>
<tr>
<td align="center">Mary A.Lewis</td>
<td align="center">2007/02/01</td>
<td align="right">Staff</td>
<td align="right">Active</td>
</tr>
</table>
</body>
</html>
3) Style 적용 하기
<!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>Document</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th {
background-color: #96D4D4;
}
</style>
</head>
<body>
<table>
<caption>표 제목 입니다</caption>
<tr>
<th width="200" align="center">Username</th>
<th width="200" align="center">Date Registered</th>
<th width="100" align="center">Role</th>
<th width="100" align="center">Status</th>
</tr>
<tr>
<td align="center">Donna R.Folse</td>
<td align="center">2012/05/06</td>
<td align="right">Editor</td>
<td align="right">Active</td>
</tr>
<tr>
<td align="center">Emily F.Burns</td>
<td align="center">2011/12/01</td>
<td align="right">Staff</td>
<td align="right">Banned</td>
</tr>
<tr>
<td align="center">Andrew A.Stout</td>
<td align="center">2010/08/21</td>
<td align="right">User</td>
<td align="right">Inactive</td>
</tr>
<tr>
<td align="center">Mary M.Bryan</td>
<td align="center">2009/04/11</td>
<td align="right">Editor</td>
<td align="right">Pending</td>
</tr>
<tr>
<td align="center">Mary A.Lewis</td>
<td align="center">2007/02/01</td>
<td align="right">Staff</td>
<td align="right">Active</td>
</tr>
</table>
</body>
</html>
'Creo korea 임시' 카테고리의 다른 글
| 연면거리(CREEPAGE DISTANCE) / 공간거리 (AIR CLEARANCE)? (0) | 2022.05.18 |
|---|---|
| Form Tag와 Rule 체크 프로그램 컨셉 (0) | 2022.05.01 |
| CREO.JS -활성화된 파일 이름 얻기 (0) | 2022.04.13 |
| CREO.JS - HTML 태그 & 자바 스크립트 (0) | 2022.04.09 |
| 아파치 서버 설치 및 구성 하기 / HTML5 (0) | 2022.04.06 |
