목차
접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>가상클래스(2)</title>
<style>
#container {
text-align: center;
color: #2b2b2b;
}
table {
width: 200px;
margin: 0 auto;
/* 중복되는 테두리를 한 줄로 표식을 하는 것 */
border-collapse: collapse;
}
td {
text-align: left;
padding: 10px;
padding-left: 20px;
}
/* 홀수행에만 적용되는 스타일 */
table tr:nth-child(2n+1) {
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<h1>건강에 좋은 식품</h1>
<table border="1">
<tr>
<td>블루베리</td>
</tr>
<tr>
<td>귀리</td>
</tr>
<tr>
<td>토마토</td>
</tr>
<tr>
<td>시금치</td>
</tr>
<tr>
<td>견과류</td>
</tr>
<tr>
<td>브로콜리</td>
</tr>
<tr>
<td>포도주</td>
</tr>
<tr>
<td>마늘</td>
</tr>
<tr>
<td>녹차</td>
</tr>
<tr>
<td>사과</td>
</tr>
</table>
</div>
</body>
</html>🙄 기억하기
- border-collapse: collapse;
- 중복되는 테두리를 한 줄로 표식을 하는 것
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 웹 사이트 표준 (utf-8, meta 태그, 언어 설정, link 태그 등 ) (0) | 2021.06.14 |
|---|---|
| rgba, rem 등 사용법 (0) | 2021.06.08 |
| 가상 선택자 (0) | 2021.06.08 |
| CSS 속성 선택자 (0) | 2021.06.08 |
| input 속성(pattern, type) (0) | 2021.06.08 |