본문 바로가기

html 교재12

8.5 여백 주기 8.5 여백 주기 table 요소에 대한 여백은 table 요소의 셀 사이의 여백을 나타내는 cellspacing 속성과 하나의 셀 내에서 셀에 있는 텍스트나 이미지 같은 내용(content)와의 여백을 나타내는 cellpadding을 사용할 수 있으며 다음과 같은 형식으로 사용할 수 있습니다. 메모장으로 “colspanandrowspan.html”을 열고 다음과 같이 코드를 수정합니다. 위와 같이 table 내의 셀 간의 여백을 5pixel로 설정하고 메모장에서 다른 이름으로 저장을 선택하여 “cellspacingandcellpadding.html”로 저장합니다. IE9를 통해 보면 다음과 같이 셀 간 여백이 설정되어 나타납니다. 이제 “cellspacingandcellpadding.html” 파일에서.. 2013. 7. 31.
8.4 셀 합치기 8.4 셀 합치기 table 요소 내에서 2개의 셀 이상을 합칠 때 사용할 수 있는 속성은 세로 방향 즉 행(row)과 관련 형태로 합칠 때는 rowspan 속성을 사용하고 가로 방향 즉, 다수의 칼럼(column)에 대해서 합칠 때 colspan 속성을 사용합니다. 그래서 table 요소의 td 요소에 사용하는 형식은 다음과 같이 나타낼 수 있습니다. 물론 테이블의 헤더를 나타내는 th 요소에도 colspan, rowspan 속성을 이용할 수 있습니다. 이제 다음과 같은 결과를 출력하는 간단한 예제를 해봅니다. 메모장을 열어서 기본적인 HTML5 문서의 코드를 작성한 후 … 블록을 다음과 같이 작성하여 셀 합치는 방법에 대해서 해봅니다. 업체(차종) 지지율(%) 조사시점 조사방법 표본수 조사기관 HYU.. 2013. 7. 31.
8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 8.3 col, colgroup 요소를 이용하여 다수의 칼럼(열)에 스타일 적용 col 요소는 하나의 칼럼(column)을 나타내는데 사용하는 요소로 테이블(table)의 전체 칼럼(열)이나 일부 칼럼(열)에 스타일을 적용할 때 유용하게 사용할 수 있는 요소로 주요 속성은 길이, 폭을 나타내는 span 속성이 있으며 이를 이용하여 다수의 칼럼(열)을 선택할 수 있습니다. 다음으로 colgroup 요소는 테이블(table) 내에서 다수의 칼럼(열)을 그룹화하여 해당 그룹에 속한 칼럼(열)들에만 특정한 속성을 설정할 수 있도록 합니다. 이러한 colgroup 요소는 테이블(table) 요소 내에서 사용되어야 하고 thead, tbody, tfoot 등과 같은 요소들보다 먼저 사용되어야 합니다. 이제 col,.. 2013. 7. 31.
8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 다음과 같이 하나의 테이블(table) 요소 안에 머리말(header), 본문(body), 꼬리말(footer)와 같은 구조로된 하나의 테이블 형태로 구성하여 나타낼 경우 다음과 같이 thead는 머리말, tbody는 본문, tfoot는 꼬리말에 적용하여 나타낼 수 있습니다. 실제 코드를 작성할 때는 table을 나타내는 table 요소 태그를 먼저 작성한 후 뒤이어 선택적으로 caption 요소 태그가 온 후 thead, tfoot 요소 태그를 작성하며 마지막으로 tbody 요소 태그를 작성해주면 됩니다. thead, tfoot, tbody 요소 안에는 행을 나타내는 tr 요소, 셀을 나타내는 td 요소 태그가.. 2013. 7. 31.

티스토리툴바