CSS로 표를 꾸며보자

Posted by ITPangPang
2016.07.03 19:04 웹(Web)/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

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로