728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container {
text-align: center;
}
table, tr, td{
border: 1px solid black;
}
table{
width: 200px;
margin: 0 auto;
border-collapse: collapse;
}
/* table 안에 있는 tr 전부 중 2n+1 번째 (-> 홀수 번쨰 ) 요소만 적용해 주세요*/
table tr:nth-of-type(2n + 1){
background-color: gray;
}
h1::after {
display: block;
color: red;
content: '여기는 테이블 입니다.';
}
</style>
</head>
<body>
<div id="container">
<h1>웹개발</h1>
<table>
<tr><td>HTML</td></tr>
<tr><td>java</td></tr>
<tr><td>CSS</td></tr>
<tr><td>Node</td></tr>
<tr><td>python</td></tr>
</table>
</div>
</body>
</html>728x90
반응형
'정보 > WEB' 카테고리의 다른 글
| teansform기본 (1) | 2022.12.29 |
|---|---|
| 가상선택자3 (0) | 2022.12.29 |
| 가상 선택자 (0) | 2022.12.29 |
| 그라데이션 응용 (0) | 2022.12.29 |
| radial그라데이션 (0) | 2022.12.29 |