표 관련 스타일


  • caption-side
이것은 저번 표에서배운 caption태그에 관해 제목을 어디 위치할지 정하는 것입니다.
속성값으로는 bottom 과 top이 있습니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #caption_side{
            caption-side:bottom;
        }
   </style>
    <body>
        <table border="1" id="caption_side">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
        </table>
    </body>
</html>
cs


  • border
위에서 봤듯이 table옆에서 적으면 표의 굵기를 정하는 것이고 style안에 넣는다고 한다면 
border:(표의두께) (선의종류) (표의 색상)으로 표기할 수 있습니다.

소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #table_style{
            border:2px solid red;
        }
   </style>
    <body>
        <table id="table_style">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
        </table>
    </body>
</html>
cs


  • border-collapse
이것은 표의테두리를 보면 알 수 있습니다.
처음 표를 크게 만들어보면 중간에 두줄로 분리되어있는 것을 볼 수 있습니다.
그것을 분리할 것인지 아닌지 정하는 것입니다.
속성값으로는 collapse(분리안함)과 separate(기본값)이 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #border_collapse{
            border-collapse:collapse;
        }
   </style>
    <body>
        <table border="1" id="border_collapse">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs

  • border-spacing
보면 알수있듯이 표 하나하나의 간격을 조정할 수 있도록 해줍니다.
border-spacing:(가로간격) (세로간격);처럼 사용할 수 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #border_spacing{
            border-spacing:10px 20px;
        }
   </style>
    <body>
        <table border="1" id="border_spacing">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs

  • empty-cells
빈셀을 어떻게 표시할지 정하는것입니다.
속성값은 show와hide가 있고 show는 기본값입니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #empty_cells{
            empty-cells:hide;
        }
   </style>
    <body>
        <table border="1" id="empty_cells">
            <caption>html</caption>
            <tr>
                <th>1</th>
                <td>2</td>
                <td></td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
                <td></td>
            </tr>
        </table>
    </body>
</html>
cs


  • text-align
이것은 셀안의 텍스트를 수평으로 정렬할 수 있도록 만들어줍니다.
속성값은 left right같은 것들이 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #text_align{
            text-align:right;
        }
   </style>
    <body>
        <table border="1" id="text_align">
            <caption>html</caption>
            <tr>
                <th style="width:200px">1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs


  • vertical-align
이것은 수직으로 정렬할 수 있도록 해줍니다.
속성값으로는 top bottom sup baseline등의 다양한 설정을 할 수 있습니다.

소스코드↓
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
<!doctype html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>html문서</title>
    </head>
    <style>
        #vertical_align{
            vertical-align:bottom;
        }
   </style>
    <body>
        <table border="1">
            <caption>html</caption>
            <tr>
                <th style="height:200px" id="vertical_align">1</th>
                <td>2</td>
            </tr>
            <tr>
                <th>3</th>
                <td>4</td>
            </tr>
        </table>
    </body>
</html>
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

CSS 선택자  (1) 2018.01.26
위치관련 속성  (0) 2018.01.16
마진과 패딩  (0) 2018.01.12
박스모델과 테두리 관련 스타일  (0) 2018.01.10
그라데이션 효과 만들기  (0) 2018.01.08

문단 스타일


  1. direction
글자쓰기 방향을 지정할 수 있게 해줍니다.rtl, ltr과같은 속성 값이 있습니다.
소스코드↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #left{
            direction:rtl;
        }
  </style>
    <h1 id="left">오른쪽으로 글이 써짐</h1>
</body>
</html>
 
cs



 B. text-align


글을 정렬시켜줍니다. 속성 값으로 center, left, right등이 있습니다.

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #cent{
            text-align:center;
        }
</style>
    <h1 id="cent">중앙정렬</h1>
</body>
</html>
cs


 C. text-justify


정렬시에 공백을 조절하는 역할을 해줍니다. 속성 값으로 auto, inter-word, distribute등이 있습니다.

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #interval{
            text-justify:distribute;
        }
   </style>
    <h1 id="interval">정렬할 때 공백조절</h1>
</body>
</html>
cs


D. line-height


여러줄 글을 쓰다보면 간격이 생기는 데 그 간격을 조정할 수 있습니다.(단위나 백분율같은 것으로 조정할 수 있습니다.)

소스코드↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #height{
            line-height:10px;
        }
</style>
    <h1 id="height">줄간격</h1>
</body>
</html>
 
cs

E. text-indent

글을 쓰다보면 들여쓸 일이 생기는 데 그 때 사용합니다.(위와같이 단위같은 것으로 조정가능합니다.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>html문서</title>
</head>
<body>
    <style>
        #indent{
            text-indent:10px;
        }
</style>
    <h1 id="indent">들여쓰기</h1>
<\body>
</html>
 
cs


여기까지 포스팅을 마치도록 하겠습니다.

저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

색상과 배경 스타일  (0) 2018.01.07
목록 관련 스타일  (0) 2018.01.05
글 관련 스타일  (0) 2018.01.03
CSS기초  (0) 2018.01.03
기타 폼 관련태그  (0) 2018.01.03

+ Recent posts

티스토리툴바