표 관련 스타일
- 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 |