CSS table padding
경계와 표의 내용 사이의 공간을 제어하려면 </FONT CHANGE:> 요소와 래빗 요소의 패딩 속성을 사용합니다:
| <html> <head> <style> table, td, th { border: 1px solid #ddd; text-align: left; } table { border-collapse: collapse; width: 100%; } th, td { padding: 15px; } </style> </head> <body> <h2>The padding Property</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> |
table, th, td 요소에 border속성에 1px solid #ddd 를 설정하여 회색을 설정하였고,
table 요소에 border-collapse속성에 collapse 값을 설정하여 실선을 표시하도록 하였으며, width속성에는 100%를 설정하여 브라우저 너비 크기만큼 설정하였으며
td요소에 padding속성에 15px값을 설정하여 테이블 테두리로부터 15px 공백을 추가한 결과 화면은 아래 그림과 같다.
CSS border-bottom 속성 : table horizontal divider
경계 맨 아래 속성을 수평 분할기의 경우 <td>에 추가한다:
| <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } </style> </head> <body> <h2>경계 테이블 구분선</h2> <p>수평 구분선의 th 및 td에 테두리 맨 아래 속성 추가.</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> |
th, td요소에 padding속성은 8px값을 설정하였고, text-align속성에는 left값을, border-bottom속성에는 1px solid #ddd 속성값을 설정하여 수평 구분선에 th, td 요소에 테두리를 아래쪽에 추가한 테이블 유형이 아래 그림과 같다.
CSS hoverable table
<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: coral;} </style> </head> <body> <h2>Hoverable 테이블</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> |
tr요소에 :hover 속성에 background-color: coral색을 설정하여 마우스를 테이블에 움직이면 해당 행은 coral 배경색이 표시되며 아래 그림과 같다.
CSS 줄무늬 테이블 : nth-child(), background-color 속성
얼룩말 줄무늬 테이블의 경우 nth-child() 선택기를 사용하고 모든 짝수(또는 홀수) 테이블 행에 background-color에 추가합니다:
| <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} </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> |
tr 요소에 nth-child()선택에 짝수번째 행에 background-color속성에 f2f2f2색을 설정한 결과 화면은 아래 그림과 같다.
CSS table color
아래 예제에서는 래빗 요소의 배경색 및 텍스트 색을 지정합니다:
| <!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} th { background-color: #04AA6D; color: white; } </style> </head> <body> <h2>색이 추가된 테이블 헤더</h2> <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> |
th 요소에 backgrond-color속성에 #04AA6D 값을 설정하였고, color에 white 설정하였다.
지금까지 CSS 테이블에 색상을 설정하는 다양한 테이블 예제를 살펴보았다.
반드시 손으로 눈으로 머리로 실습하며 익히기를 추천합니다.
모두 화이팅입니다.!!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS width, max-width 속성 (0) | 2023.08.19 |
|---|---|
| CSS display 속성 (0) | 2023.08.18 |
| CSS 적응형 테이블(Responsive Table) (0) | 2023.08.16 |
| CSS table alignment (0) | 2023.08.16 |
| CSS table size (0) | 2023.08.15 |
댓글