Daily coding

HTML : Basic 1 - table 본문

Front-end/Client

HTML : Basic 1 - table

sunnnkim 2020. 1. 2. 18:13

<table> : 테이블 만드는 태그

<tr> : 테이블 행(row)을 추가

<th> : 테이블 헤드 추가

<td> : 테이블 데이터 추가 

<col> : 열 설정 ---> col width / height = "숫자" 또는 "%"로 둘 수 있음

          차례대로 입력하면 순서대로 컬럼 속성이 지정됨

<thead> : 테이블 헤더로 묶음

<tbody> : 테이블 바디로 묶음

<colspan> : 한 열 데이터를 2개 이상 입력할때, 하나의 열로 묶기 위함

<rowspan> : 한 행의 데이터를 2개 이상 입력할 때, 하나의 행으로 묶기 위함

 

위는 colspan, 아래는 rowspan

< Table Attribute >

- border : 테이블 테두리 두께 설정

- style : width와 heigth 등 지정할 수 있음

HTML : Basic 1 - 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
  td {
  text-align: center;
  }
  /* 모든 td태그가 가운데 정렬되는 태그 */
</style>
</head>
<body>
<div align="center">
<table border="1">
	<col width = "50"><col width = "100"><col width = "200"><col width = "50">
	<tr>
		<th>번호</th>
		<th>성</th>
		<th>이름</th>
		<th>나이</th>
	</tr>
	<tr>
		<th>1</th>
		<td>홍</td>
		<td>길동</td>
		<td>24</td>
	</tr>
	<tr>
		<th>2</th>
		<td>일</td>
		<td>지매</td>
		<td>21</td>
	</tr>
	<tr>
		<th>3</th>
		<td>성</td>
		<td>춘향</td>
		<td>25</td>
	</tr>

</table>
</div>
<br>
<br>

<table border="2" style="width:80%">
	<caption>주소록</caption>
<colgroup>
	<col width = "50"><col width = "100"><col width = "100"><col width = "250">
</colgroup>	

<!-- 테이블 헤드 -->	
<thead>
	<tr>
		<th>번호</th>
		<th>성</th>
		<th>이름</th>
		<th>주소</th>
	</tr>
</thead>	

<!-- 테이블 바디  : 데이터 적으면 됨-->
<tbody>
	<tr>
		<th>1</th>
		<td>홍</td>
		<td>길동</td>
		<td>서울시</td>
	</tr>		
	<tr>
		<th>2</th>
		<td>일</td>
		<td>지매</td>
		<td>부산시</td>
	</tr>		
	<tr>
		<th>3</th>
		<td>성</td>
		<td>춘향</td>
		<td>남원시</td>
	</tr>		
</tbody>	
</table>

<br><br>
<!-- colspan -->
<table border="1" style="width: 70%">
	<caption>주소록</caption>
	<tr>
		<th>성</th>
		<th>이름</th>
		<th>나이</th>
		<th colspan="2">전화번호</th>
		<!-- <th>전화번호</th> -->
	</tr>
	<tr>
		<td>홍</td>
		<td>길동</td>
		<td>24</td>
		<td>123-4567</td>
		<td>123-4567</td>
	</tr>
</table>

<!-- rowspan -->
<table border="1" style="70%">
	<tr>
		<th>이름</th>
		<td>길동</td>
	</tr>
	<tr>
		<th rowspan="2">전화번호</th>
		<td>123-4567</td>
	</tr>
	<tr>
		<!-- <th>전화번호</th> -->
		<td>234-5687</td>
	</tr>
</table>

%로 width와 height를 두면 정확한 수치로 들어감
<table border="1" style="width: 100%; height: 100%">
	<tr>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>3</td>
		<td>4	</td>
	</tr>

</table>




</body>
</html>

 

 

< CSS를 사용해서 아래처럼 표 디자인을 설정할 수 있다. >

<style type="text/css">
table, th, td {
	border: 1px solid #0000ff;
	border-collapse: collapse; /* 단선으로 표시 */
}
th{
	background-color: #aabbcc;
	text-align: left;
}
td{
	text-align: center;
}

border : 테두리 값, 테두리선 스타일, 테두리선 색 등 설정

border-collapse : collapse ---> 단선으로 표시

'Front-end > Client' 카테고리의 다른 글

HTML : Tags - iframe i프레임  (0) 2020.01.03
HTML : Tags - List 리스트  (0) 2020.01.03
HTML : Basic 1 - img  (0) 2020.01.02
HTML : Basic 1 - Anchor  (0) 2020.01.02
HTML : Basic 1 - font / div  (0) 2020.01.02
'Front-end/Client' Related Articles more