표 스타일링을 해보자
일단 <table> 태그를 이용해 표를 만들어 보자
<body>
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
<td>E1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
<td>E2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
<td>E3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
<td>E4</td>
</tr>
<tr>
<td>A5</td>
<td>B5</td>
<td>C5</td>
<td>D5</td>
<td>E5</td>
</tr>
</tbody>
</table>
</body>
이렇게 표를 만들고
클래스 선택자와 하위 선택자를 이용해 칸(경계선)을 만들자
.table {
border: 1px solid black;
border-collapse: collapse;
width: 50%;
}
.table th,
td {
border: 1px solid black;
}
이렇게 칸(경계선)도 만들었다
그리고 자식 선택자를 써서 홀수행 마다 백그라운드 색을 입히자
.table-striped > tbody tr:nth-child(odd) {
background-color: aquamarine;
}
<table class="table table-striped">
<table> 태그에 class속성값에 striped 값을 추가하면
홀수행마다 백그라운드 색이 적용된다
여기까지가 우리가 배운 것이다
이제 나는 요기서 클래스 선택자를 만들어 hover 값을 입힐 것이다
.table-hover > tbody > tr:hover {
background-color: yellow;
}
table-hover 라는 class 값을 가진 태그들의 자식 tbody 의 자식 tr 태그들에 hover 값을 적용해
마우스가 tbody 태그 밑에 tr태그들에게 올려졌을때 백그라운드색을 노란색으로 지정했다
<table class="table table-striped table-hover">
그리고 class속성 에 table-hover 값을 추가
그러면 이렇게 마우스를 가져가면 백그라운드색이 노란색으로 바뀌는걸 볼 수 있다
그리고 <tbody> 태그 안에 있는 목록들을 클릭할 수 있는 거라고 사용자에게
알리고 싶을때
.table > tbody {
cursor: pointer;
}
이렇게 마우스 커서를 변경해서 사용자에게 보여줄 수 있다
'css' 카테고리의 다른 글
| background 스타일링 (0) | 2023.09.08 |
|---|---|
| CSS 박스 모델과 요소의 크기 (0) | 2023.09.08 |
| 링크와 커서 스타일링 (0) | 2023.09.08 |
| 목록 스타일링 (0) | 2023.09.08 |
| 글꼴 스타일링 (1) | 2023.09.07 |
