728x90
14. 테이블 스타일
※ 테이블에 스타일을 적용할 때, 자주 사용하는 속성을 알려드릴께요
표의 선에는 border-spacing: 0; border-collapse:collapse; 를,
제목을 나타내는 caption에는 display: none; 을 자주 사용합니다.
(표제목은 웹접근성을 감안하여 꼭 작성해야 하지만, 디자인상 없애는 경우가 많습니다.)
■ 예시1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>테이블 스타일</title> <style type="text/css"> *{margin:0; padding: 0;} .aa{border: 5px solid #000; border-spacing: 0; border-collapse:collapse; } .aa *{margin:0; padding: 0;} .aa th{border: 5px solid #0ff;} .aa td{border: 5px solid #0f0;} .aa caption{caption-side: bottom; display: none;} </style> </head> <body> <h2>기본형</h2> <table class="aa"> <caption>표제목</caption> <tr> <th>제목</th> <th>제목</th> <th>제목</th> </tr> <tr> <td>내용1</td> <td>내용2</td> <td>내용3</td> </tr> </table> </body> </html> |
■ 실행결과1
※ 왼쪽에서 오른쪽, 위쪽에서 아래쪽 방향으로 결과화면을 보시면 됩니다.
※ 첫번째 그림은 표의 기본 스타일입니다.
※ 두번째 그림은 표 제목을 아래쪽에 위치하도록 caption-side: bottom;를 적용했습니다.
※ 세번째 그림은 표 제목은 그대로 두되(웹 접근성 고려), display: none; 속성을 이용해 가린 것입니다.
※ 네번째 그림입니다. 첫번째 그림처럼 표에는 기본적으로 표 안쪽 여백이 존재하는데, border-spacing: 0;을 적용하여 안쪽 여백을 없앨 수 있습니다. 여백을 주려면 픽셀(px) 값을 입력하면 됩니다.
※ 다섯번째 그림입니다. 선을 적용할 때, 각각의 선이 적용되다 보면, 2개의 선이 겹치는 경우가 있는데, 이를 1개의 선으로 표현할 때는 border-collapse:collapse; 를 적용합니다.
■ 예시2
※ 심플하지만 기본 표보다는 조금 더 스타일을 적용해보겠습니다. 아래처럼 쉽게 적용해 볼 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>테이블 스타일</title> <style> .table { border-collapse: collapse; border-top: 3px solid #168; } .table th { color: #168; background: #f0f6f9; text-align: center; } .table th, .table td { padding: 10px; border: 1px solid #ddd; } .table th:first-child, .table td:first-child { border-left: 0; } .table th:last-child, .table td:last-child { border-right: 0; } .table tr td:first-child{ text-align: center; } .table caption{caption-side: bottom; display: none;} </style> </head> <body> <table class="table"> <caption>표 제목</caption> <tr><th>No.</th><th>제목</th><th>작성자</th><th>작성일</th></tr> <tr><td>1</td><td>게시물 글 제목입니다</td><td>관리자</td><td>2018-08-01</td></tr> <tr><td>2</td><td>게시물 글 제목입니다</td><td>관리자</td><td>2018-08-02</td></tr> <tr><td>3</td><td>게시물 글 제목입니다</td><td>관리자</td><td>2018-08-03</td></tr> <tr><td>4</td><td>게시물 글 제목입니다</td><td>관리자</td><td>2018-08-04</td></tr> </table> </body> </html> |
■ 실행결과2
※ 여러분만의 스타일로 더 예쁘고 세련된 스타일을 적용해보세요^^
반응형