HTML
31일차//[html] table 생성
aesup
2021. 2. 24. 11:25
728x90
테이블 만들기
|
주제 |
태그 |
비고 |
|
테이블의 구성 요소 |
<table> |
테이블을 만드는 태그 |
|
<th> |
테이블의 헤더부분을 만드는 태그 |
|
|
<tr> |
테이블의 행을 만드는 태그 |
|
|
<td> |
테이블의 열을 만드는 태그 |
<table></table>태그가 제일 첫번째로 들어간다.
테이블 디자인 변경
|
주제 |
속성 |
비고 |
|
테이블 디자인 변경 |
border |
테이블의 테두리 |
|
bordercolor |
테이블의 테두리 색상 |
|
|
width |
테이블 가로 크기 |
|
|
height |
테이블 세로 크기 |
|
|
align |
정렬 |
|
|
bgcolor |
배경색 |
|
|
colspan |
가로 합병(열 합병) |
|
|
rowspan |
세로 합병(행 합병) |
테이블의 디자인을 바꿀 수 있는 방법은 다양한 방법이 있겠습니다만 위의 표에있는 속성들이 대표적입니다.
1. border 속성은 테이블의 테두리를 설정해주는 속성. ex (border="1")
숫자가 높을수록 테두리가 두꺼워짐.
2. bordercolor는 테두리의 색상을 지정하는 속성.
ex(bordercolor="blue") default값은 검정색.
3. width와 height는 테이블의 크기를 결정해주는 속성.
ex(width=50px width=100%)픽셀단위로 크기,비율로 줄 수 있음.
4. align은 테이블안에있는 값들을 정렬시키는 기능을 합니다.
5. bgcolor속성으로 원하는 태그의 배경색을 지정해줄 수 있습니다.
6. colspan, rowspan은 셀을 합병(행/열)시키는 기능을 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
Table : row(행), column(열)
1 1 1
2 2 2
3 3 3
-->
<!-- <table border = "1" style="width : 50%"> -->
<div align="center">
<table border = "1">
<col width = "50"> <col width = "100"> <col width = "200"> <col width = "50">
<tr><!-- table row -->
<th>번호</th> <th>성</th> <th>이름</th> <th>나이</th>
</tr>
<tr>
<td>1</td> <td>홍</td> <td>길동</td> <td align="center">24</td>
<!-- align은 attribute이다 -->
</tr>
<tr>
<td>2</td> <td>성</td> <td>춘향</td> <td align="center">24</td>
</tr>
</table>
</div>
<br><br>
<table border = "1" style="width : 50%">
<caption>주소록</caption>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th colspan = "2">전화번호</th><!-- colspan 컬럼끼리 합한다 -->
<!-- <th>전화번호</th> -->
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>24</td>
<td>123-4567</td>
<td>234-5678</td>
</tr>
728x90