table 요소의 기본 CSS 설정값

[ CSS 목차 보기 ]

User Agent Stylesheet는 쉽게 말해서 브라우저들마다 가지는 “기본 CSS 스타일(Default Style)”이라고 할 수 있다. 만약 사용자가 CSS 프로퍼티들을 따로 지정하지 않는다면, 요소들은 이 User Agent Stylesheet에 따라서 출력된다. 그리고 브라우저마다 이 설정값들이 조금씩 다를 수가 있지만, 전반적으로 비슷한 양식을 가진다. 이번 포스트에서는 table 요소들에 설정되어 있는 기본 CSS 스타일을 요약하였다.

이 설정값을 사용할 일이 많지는 않지만, 예를 들어 워드프레스와 같이 스타일이 이미 정해져 있는 곳에서, 기본 CSS 스타일로 출력하고자 할 때 사용되어 질 수도 있다. 하지만 보통은 기본 CSS 설정값들이 예쁘지는 않아서, 사용자가 다른 스타일로 초기화(reset)시켜서 사용한다. CSS 초기화 코드(CSS reset code)는 [참고1. CSS 초기화 코드]에 자세히 정리해 뒀다.

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<style>
    table, table * {
        width: auto;
        height: auto;
        line-height: normal;
        font-size: medium;
 
        margin: 0;
    }
    table {
        display: table;
        border-collapse: separate;
        border-spacing: 2px;
 
        border-width: 2.5px;
        border-style: none;
        border-color: gray;
 
        padding: 0;
    }
    caption {
        display: table-caption;
        text-align: center;
 
        padding: 0;
    }
    thead {
        display: table-header-group;
        vertical-align: middle;
        border-color: inherit;
    }
    tbody {
        display: table-row-group;
        vertical-align: middle;
        border-color: inherit;
    }
    tfoot {
        display: table-footer-group;
        vertical-align: middle;
        border-color: inherit;
    }
    tr {
        display: table-row;
        vertical-align: inherit;
 
        border-color: black;
        border-width: 2.4px;
        border-style: none;
 
        padding: 0;
    }
    th {
        display: table-cell;
        vertical-align: inherit;
 
        border-width: 2.4px;
        border-color: black;
        border-style: none;
 
        color: inherit;
        font-weight: bold;
        text-align: center;
 
        padding: 1px;
    }
    td {
        display: table-cell;
        vertical-align: inherit;
 
        border-color: black;
        border-width: 2.4px;
        border-style: none;
 
        color: inherit;
        text-align: left;
 
        padding: 1px;
    }
    colgroup {
        display: table-column-group;
    }
    col {
        display: table-column;
    }
</style>
cs