研修33日目

4333 ワード

テキストリンク

31日目復習

掲示板の作成方法

border-折りたたみ=>テーブル境界の設定

collapse

separed-デフォルト

表の設計開始時に最初に記入します.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test10</title>
<style type="text/css">
table {
	/* 독립객체로 인식하게해주는 것 */
	border-collapse: collapse;
	 
}
thead tr {
	background-color: red;
	height: 40px;
	border-top: 1px solid #444444;
	border-bottom: 1px solid #444444;	
}

tbody tr{
	border-bottom: 1px solid #444444;
	cursor: pointer;
}

/*숫자 : 해당번째 대상  
  숫자n : 숫자배수	
  숫자n+숫자2 : 숫자배수 + 숫자2
 odd : 홀수
 even : 짝수
  */
tbody tr:nth-child(even){
	background-color: #ffaaaa;
}
/* 테이블 가운데 선 처리 */
td:nth-child(even){

	border-left: 1px solid #666666;
}
tbody tr:hover{
	background-color: #aeaeae;
	
}
</style>
</head>
<body>
<table>
	<thead>
		<tr>	
			<th>헤더1</th>
			<th>헤더2</th>
		</tr>
	</thead>
	</tbody>
		<tr>
			<td>내용1</td>
			<td>내용2</td>
		</tr>
		
			<tr>
			<td>내용1</td>
			<td>내용2</td>
		</tr>
		
			<tr>
			<td>내용1</td>
			<td>내용2</td>
		</tr>
		
			<tr>
			<td>내용1</td>
			<td>내용2</td>
		</tr>
	</tbody>
</table>
</body>
</html>