<!DOCTYPE html>
<html>
<head>
<title>::: 01_CSS기초_테이블_행단위_색입히기 :::</title>
<style>
/* table 스타일 */
table {
border-collapse: collapse;
width: 100%;
}
/* th, td 스타일 */
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* tr태그에 마우스가 올라갔을 때 스타일 */
tr:hover {
background-color: yellow;
}
</style>
</head>
<body>
<h3>테이블의 행에 마우스 오버시 색상 입히기</h3>
<table>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
<tr>
<td>1</td>
<td>홍길동</td>
<td>서울 강남구 대치동</td>
</tr>
<tr>
<td>2</td>
<td>홍길동</td>
<td>서울 강남구 대치동</td>
</tr>
<tr>
<td>3</td>
<td>홍길동</td>
<td>서울 강남구 대치동</td>
</tr>
<tr>
<td>4</td>
<td>홍길동</td>
<td>서울 강남구 대치동</td>
</tr>
</table>
</body>
</html>
'CSS' 카테고리의 다른 글
| 06. CSS_bootstrap_textstyle (0) | 2023.03.08 |
|---|---|
| 05. CSS_bootstrap (0) | 2023.03.08 |
| 04. CSS_수직 네비게이션(2) (0) | 2023.03.03 |
| 03. CSS_수직 네비게이션(1) (0) | 2023.03.03 |
| 02. CSS_테이블 행단위 색 입히기(2) (0) | 2023.03.03 |
