CSS를 사용하여 테이블을 더 보기 좋게 만듭든다.
HTML 테이블 - Zebra Stripe(얼룩말 줄무늬)
다른 모든 테이블 행에 배경색을 추가하면 멋진 얼룩말 줄무늬 효과를 얻을 수 있다.
다른 모든 테이블 행 요소에 스타일을 지정하려면 다음과 같이 :nth-child(even) 선택기를 사용한다:
| <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #D6EEEE; } </style> </head> <body> <h2>얼룩말 줄무늬 스타일 테이블</h2> <p>얼룩말 줄무늬 테이블의 경우 n번째 자식() 선택기를 사용하고 모든 짝수(또는 홀수) 테이블 행에 배경색을 추가합니다:</p> <table> <tr> <th>이름</th> <th>성</th> <th>포인트</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>100원</td> </tr> <tr> <td>철수</td> <td>이</td> <td>150원</td> </tr> <tr> <td>순이</td> <td>강</td> <td>300원</td> </tr> <tr> <td>영희</td> <td>최</td> <td>250원</td> </tr> </table> </body> </html> |
수평, 수직 얼룩말 줄무늬 조합 스타일
위의 두 예제에서 스타일을 결합할 수 있으며 다른 모든 행과 다른 모든 열에 줄무늬가 있다.
투명한 색상을 사용하면 중복 효과가 있다.\
rgba() 색상을 사용하여 색상의 투명도를 지정한다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } tr:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } th:nth-child(even),td:nth-child(even) { background-color: rgba(150, 212, 212, 0.4); } </style> </head> <body> <h2>줄무늬 테이블</h2> <p>얼룩말 줄무늬 테이블의 경우 n번째 자식() 선택기를 사용하고 모든 짝수(또는 홀수) 테이블 행에 배경색을 추가합니다:</p> <table style="width:100%"> <tr> <th>월</th> <th>화</th> <th>수</th> <th>목</th> <th>금</th> <th>토</th> <th>일</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> |
HTML 테이블 수평 구분 스타일
각 테이블 행의 맨 아래에만 경계를 지정할 경우 수평 구분선이 있는 테이블이 나타낸다.
수평 구분선을 가져오려면 모든 tr 요소에 border-bottom 속성을 추가합니다:
| <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } tr { border-bottom: 1px solid #ddd; } </style> </head> <body> <h2>테이블 가로 테두리</h2> <p>수평 구분선의 tr 요소에 테두리 맨 아래 특성 추가:</p> <table> <tr> <th>이름</th> <th>성</th> <th>포인트</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>100원</td> </tr> <tr> <td>철수</td> <td>이</td> <td>150원</td> </tr> <tr> <td>순이</td> <td>강</td> <td>300원</td> </tr> <tr> <td>영희</td> <td>최</td> <td>250원</td> </tr> </table> </body> </html> |
Hoverable 테이블
tr:hover 선택기를 사용하여 마우스 위의 테이블 행을 강조 표시한다:
| <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #DDD; } tr:hover {background-color: #D6EEEE;} </style> </head> <body> <h2>Hoverable Table</h2> <p>마우스를 테이블 행 위로 이동하여 효과 확인.</p> <table> <tr> <th>이름</th> <th>성</th> <th>포인트</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>100원</td> </tr> <tr> <td>철수</td> <td>이</td> <td>150원</td> </tr> <tr> <td>순이</td> <td>강</td> <td>300원</td> </tr> <tr> <td>영희</td> <td>최</td> <td>250원</td> </tr> </table> </body> </html> |
표에 마우스를 올리면 해당하는 행에 색상이 올려진다.
마무리
HTML 테이블에 스타일에 관해 살펴보았다.
스타일에는 얼룩말 줄무늬 스타일, 가로 테두리 스타일, 호버 스타일 등을 실습해보았다.
꼭 직접 실습하기를 추천한다.
모두 화이티이입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 순서가 지정되지 않은 리스트(Unordered Lists) (0) | 2023.05.13 |
|---|---|
| HTML 테이블 Colgroup (0) | 2023.05.12 |
| HTML 테이블 Colspan & Rowspan (0) | 2023.05.10 |
| HTML 테이블 채우기와 간격(HTML Table Padding & Spacing) (0) | 2023.05.09 |
| HTML 테이블 헤더(Table Headers) (0) | 2023.05.08 |
댓글