다연이네

[days03] 표 만들고 간단한 속성 넣기 본문

Web/HTML

[days03] 표 만들고 간단한 속성 넣기

　다연　 2020. 12. 2. 13:48
반응형

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, th, td{
	border-collapse: collapse;
}
th,td{
	padding:2px;
}
/*tbody tr:nth-child(even){ /*odd, even 홀 짝  */
tbody tr:nth-child(odd){ 
	background-color: #eee;
}

th{
	color:white;
	background-color: black;
}
tr{
	border-bottom:1px dotted gray; /* 밑부분만 점선 */
}
</style>
</head>
<body>
<!--  table[border="1" style="width:100%"]>(tr>th*3>lorem1)+tr*4>td*3>lorem1-->
<table style="width:100%"> <!--border="1" 은 바깥 선 두께  -->
 	<caption>dept information</caption>
 	<theader>
 	<tr>
 		<th>deptno</th>
 		<th>dname</th>
 		<th>loc</th>
 	</tr>
 	
 	</theader>
 	
 	<tbody>
 	<tr>
 		<td>Lorem.</td>
 		<td>Distinctio.</td>
 		<td>Quo!</td>
 	</tr>
 	<tr>
 		<td>Lorem.</td>
 		<td>Maxime.</td>
 		<td>Harum.</td>
 	</tr>
 	<tr>
 		<td>Lorem.</td>
 		<td>Quis?</td>
 		<td>Libero.</td>
 	</tr>
 	<tr>
 		<td>Lorem.</td>
 		<td>Totam.</td>
 		<td>Doloribus.</td>
 	</tr>
 	</tbody>
 	
 	<tfooter>
 	
 	</tfooter>
 </table>



 
 
 
 
</body>
</html>
반응형
저작자표시 비영리

'Web > HTML' 카테고리의 다른 글

[days03] 토글 버튼  (0) 2020.12.02
[days03] 버튼 1. HTML 2. Javascript 3.JQuery  (0) 2020.12.02
[days03] emmit 사용법  (0) 2020.12.02
[days03] emmit 설치  (0) 2020.12.02
[days02] 테이블 - 셀 병합, 체크할 수 있는 표 만들기  (0) 2020.12.02
'Web/HTML' Related Articles more
Comments