CSS로 표를 꾸며보자
CSS로
표를 꾸며보자
ㆍ 이번에는 HTML에서 만들었던 표를 간단하게
꾸며주는 방법을 알아보도록 하겠습니다
ㆍ 표의 머리부분을 따로 구분해주고 색깔을
넣어주도록 하겠습니다.
ㆍ 그리고 HTML에서 만들었던 표는 보기 싫은
간격이 있었는데 그 부분을 제거해보도록 하겠습니다
먼저 HTML에서 마지막에
만들었던 코드를 그대로
가져오도록 하겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <html> <head> <title>ITPANGPANG</title> </head> <body> <table border = "2"> <tr> <td> NAME </td> <td> AGE </td> <td> ID </td> </tr> <tr> <td> HONG </td> <td> 50 </td> <td> honghong</td> </tr> </table> </body> </html> | cs |
코드는 이 코드였고
결과는 아래와 같았습니다
표는 표인데 뭔가 이상하죠?
테두리도 뭔가 어색하고..
일단 가장 이상한 부분부터
아래처럼 변경시켜보겠습니다.
확실히 괜찮죠?
코드를 보면
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <title>ITPANGPANG</title> <style> table{ border-collapse: collapse; } </style> </head> <body> <table border = "2"> <tr> <td> NAME </td> <td> AGE </td> <td> ID </td> </tr> <tr> <td> HONG </td> <td> 50 </td> <td> honghong</td> </tr> </table> </body> </html> | cs |
<head>의
<style>에서
선택자 table로 놓은후에
border-collapse: collapse;를
추가해주면 됩니다
그 다음에는 표의 머리부분을
나눠보도록 하겠습니다.
일단 분리만 간단하게 하면
이런식으로 표의
머리부분이 진하게
바뀝니다
코드는 간단하게
머리부분을 td가 아닌 th로
변경해주시면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <title>ITPANGPANG</title> <style> table{ border-collapse: collapse; } </style> </head> <body> <table border = "2"> <tr> <th> NAME </th> <th> AGE </th> <th> ID </th> </tr> <tr> <td> HONG </td> <td> 50 </td> <td> honghong</td> </tr> </table> </body> </html> | cs |
NAME, AGE, ID 부분을
th로 변경만 해주시면 됩니다.
자 좀더 이제 확실하게
구분해주기 위해서
머리부분에 배경색을 추가시키도록
하겠습니다.
<style> 부분에서 선택자 th로 놓고
코드를 추가시키면 되겠죠?
저는 검정색을 좋아하므로
배경을 검정색으로 하겠습니다.
그럼 당연히 글씨색도 바꿔야겠죠?
이런식으로 변경완료했습니다.
코드를 보자면
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 | <html> <head> <title>ITPANGPANG</title> <style> table{ border-collapse: collapse; } th{ background-color: #000000; color: rgb(255,255,255); } </style> </head> <body> <table border = "2"> <tr> <th> NAME </th> <th> AGE </th> <th> ID </th> </tr> <tr> <td> HONG </td> <td> 50 </td> <td> honghong</td> </tr> </table> </body> </html> | cs |
th를 선택자로
배경과 색을 넣어줬습니다
CSS 처음글에서 적었듯이
원하는 색상코드로 넣을수도 있고
rgb로 선택해서 넣을 수 있습니다.
음...
다음은 표라인이랑
글씨가 너무 붙어있는거
같으니 padding을 넣어보도록
하겠습니다.
역시 선택자로 쉽게
추가할 수 있습니다
th, td를 선택자로해서
추가시키면 되겠죠?
자 이런식으로 패딩값으로
뭔가 여유로워진 느낌이 듭니다
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 | <html> <head> <title>ITPANGPANG</title> <style> table{ border-collapse: collapse; } th{ background-color: #000000; color: rgb(255,255,255); } th,td{ padding: 10px; } </style> </head> <body> <table border = "2"> <tr> <th> NAME </th> <th> AGE </th> <th> ID </th> </tr> <tr> <td> HONG </td> <td> 50 </td> <td> honghong</td> </tr> </table> </body> </html> | cs |
padding: 10px;
추가한것을 확인 할 수 있습니다.
마지막으로 행을 하나 더
만들고 th, td에 테두리도
한번 넣어보면서 마무리하겠습니다.
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 | <html> <head> <title>ITPANGPANG</title> <style> table{ border-collapse: collapse; } th{ background-color: #000000; color: rgb(255,255,255); } th,td{ border:1px solid black; padding: 10px; } </style> </head> <body> <table border = "2"> <tr> <th> NAME </th> <th> AGE </th> <th> ID </th> </tr> <tr> <td> HONG </td> <td> 50 </td> <td> honghong</td> </tr> <tr> <td> KANG </td> <td> 30 </td> <td> kangkang</td> </tr> </table> </body> </html> | cs |
'웹(Web) > CSS' 카테고리의 다른 글
| inline, block 요소 (0) | 2016.12.11 |
|---|---|
| CSS 기본(font-size, color, background, border) (0) | 2016.11.12 |
| HTML문서에 .CSS Link하기(외부 스타일시트) (1) | 2016.10.03 |
| CSS 하이퍼링크 꾸미기 (0) | 2016.06.20 |
| CSS로 Hello World 꾸미기(Internal Style tag) (0) | 2016.06.19 |