8.5 여백 주기
table 요소에 대한 여백은 table 요소의 셀 사이의 여백을
나타내는 cellspacing 속성과 하나의 셀 내에서 셀에 있는 텍스트나 이미지 같은 내용(content)와의 여백을 나타내는 cellpadding을 사용할
수 있으며 다음과 같은 형식으로 사용할 수 있습니다.
<table cellspacing=”픽셀값” cellpadding=”픽셀값”/>
메모장으로
“colspanandrowspan.html”을 열고 다음과 같이 코드를 수정합니다.
<body>
위와 같이 table 내의 셀 간의 여백을 5pixel로 설정하고 메모장에서 다른 이름으로 저장을 선택하여 “cellspacingandcellpadding.html”로 저장합니다. IE9를 통해 보면 다음과 같이 셀 간 여백이 설정되어 나타납니다.
이제 “cellspacingandcellpadding.html” 파일에서 셀 내부 여백을 cellpadding 속성을 이용하여 나타내봅니다. cellspacing 속성
옆에 “cellpadding=”10”을 추가한 후 저장합니다. 그리고 IE9를 통해 보면 다음과 같이 셀 내부의 여백이 설정되어 나타납니다.
HTML5에서는 위와 같이 기존의 HTML4.01 버전에서
사용되던 cellspacing, cellpadding 속성을
table 요소에 직접 설정하여 사용하기 보다는 CSS를 이용하여 설정하여 사용하는 것을
권장하고 있습니다. 그래서 “cellspacingandcellpadding.html”
파일에 CSS 형태로 cellspacing,
cellpadding 속성을 적용한다면 다음과 같이 설정할 수 있습니다.
<style>
table, th, td{ border: 1px solid
black;}
table th, td{ padding:10px; spacing:5px;}
</style>
위에서 보는
것처럼 table, th, td 요소에 대해서 경계(border)는
검은색 실선(solid) 1px로 나타내도록 명시하였고 다음 두 번째 라인은 CSS에서는 cellpadding은
padding 속성으로 cellspacing은
spacing속성으로 설정이 가능하므로 위와 같이 설정하여 나타낼 수 있습니다. 따라서 “cellspacingandcellpadding.html”
파일에서 기존의 코드를 다음과 같이 수정해주면 동일한 결과를 얻을 수 있습니다.
<title>cellspacing, cellpadding 예제</title>
<style>
table,th, td{ border: 1px solid black;}
table th, td{ padding:10px;spacing:5px;}
</style>
</head>
<body>
<!-- <table border="1"
cellspacing="5" cellpadding="10"> -->
<table>
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9. Form-related Elements (0) | 2013.07.31 |
|---|---|
| 8.5 셀 내부 정렬하기 (0) | 2013.07.31 |
| 8.4 셀 합치기 (0) | 2013.07.31 |
| 8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 (0) | 2013.07.31 |
| 8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 (0) | 2013.07.31 |