html 표 속성 정하기 - 표 테두리 표 선굵기 내부선 조절 및 표 제목 붙이기
[HTML 쉽게 따라하기] 표 속성 정하기
오늘은 표 속성을 정하는 방법에 대해 알아보겠습니다.
표 속성 태그로 표 둘레의 테두리, 표 전체의 선의 굵기, 표의 내부 선 조절 그리고 표에 제목을 붙일 수 있는데 이들에 대한 속성이 무엇인지 보겠습니다.
1> 표 둘레의 테두리
표 둘레의 테두리를 지정하기 위해서는 다음과 같이 border 속성을 이용하여 나타냅니다.
테두리를 지정하기 위한 사용법은 아래와 같습니다.
<table border=n>
위 태그는 테이블 둘레의 테두리를 나타낼 때 사용되며, n값은 테두리의 굵기를 지정합니다.
n값을 0으로 입력하면 테두리가 나타나지 않게 됩니다.
2> 표 전체의 선의 굵기
셀과 셀 사이에 여백을 주기 위해서 cellspacing 속성을 사용합니다.
cellspacing 사용법은 다음과 같습니다.
cellspacing=n
cellspacing는 테이블 전체의 선의 굵기를 픽셀 단위로 지정하며 기본값은 1로 지정되어 있습니다.
border가 없으면 선의 굵기가 보이지 않으므로 함께 사용합니다.
3> 표의 내부 선 조절
표 내부의 선을 조절하기 위해서는 cellpadding 속성을 사용합니다.
사용법은 아래와 같습니다.
cellpadding=n
cellpadding 속성은 표에서 문장과 셀 사이의 여백을 줄 때 사용하며 값은 픽셀 단위입니다.
여기서 셀이란 스프레드시트에서 문자를 입력할 수 있는 하나의 방을 의미합니다. 즉 각 방에 문자를 입력할 수 있도록 나뉘어져 있는 것이며 엑셀 또는 로터스와 같이 여러 개의 칸으로 나뉘어져 있는 표에서 기본 단위가 됩니다.
4> 표에 제목 붙이기
표에 해당하는 제목을 삽입할 때 사용하는 태그가 바로 <caption> 태그 입니다.
사용법은 아래와 같습니다.
<caption>..</caption>
이것은 도표의 특징과 테이블의 특징을 기술하고자 할 때 사용하며 시작<caption> 다음의 안쪽 부분에는 텍스트가 적용됩니다.
<caption>태그는 테이블 안에 나타나며 align속성을 가지고 있습니다. 이때 사용되는 align 속성의 기본 값은 top입니다. 또한 그림을 테이블에 넣어 그림에 대한 캡션으로도 사용할 수 있습니다.
그럼 이들에 대한 테이블 예를 보겠습니다.
[예시]------------------------------------------------
<table border cellpadding=10>
<tr>
<td>한국</td>
</tr>
<p>
<table cellpadding=25>
<tr>
<td>미국</td>
</tr>
</table>
<p>
<p>
<p>
<table border>
<caption align=top>사계절</caption>
<tr>
<td>봄</td>
<td>여름</td>
<td>가을</td>
<td>겨울</td>
</tr>
</table>
<p>
<table border>
<caption align=bottom>음악</caption>
<tr>
<td>민요</td>
<td>가요</td>
<td>팝송</td>
</tr>
</table>
</center>
</body>
</html>
----------------------------------------------------------------------
위에서 말한 네가지 관련 속성들은 각 속성당 두가지씩 비교대상을 만든 표입니다.
각 속성사이에는 <p>를 세개씩 넣었으니 구별하기 어렵진 않을 것입니다.
위 소스를 메모장에 입력한 후 html파일로 저장한후 활성화 시키면 아래와 같이 나타납니다.
html소스와 비교해 가면서 어떻게 표현되는지 잘 살펴보시기 바랍니다.
오늘은 표 테두리에 관련된 속성들에 대해 알아보았습니다.
다음시간엔 문서를 연결하는 방법에 대해 배워 보도록 하겠습니다.
이 글을 공유합시다
