본문 바로가기

강의실/HTML

테이블의 경계선과 크기

테이블의 경계선과 크기
테이블의 경계선은 테이블 안에 있는 각각의 셀과 셀 사이를 구분하며 테이블의 외곽과 테이블 밖과의 경계선을 지정한 크기만큼 설정하는 태그이다. 테이블의 기본구성성분에 border 라는 옵션만 추가한 방법이며 각기 다른 값을 넣었을 때 보여지는 것은 아래의 예에서 보면 금방 이해가 될것이다.

경계선조절
예제 설명
<table border="원하는숫자">
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
기본테이블의 구성에서 경계선을 넣는 방법은 border="원하는값"에서 결정된다.다음은 각각 다른 값을 대입한 후의 결과들이다. 비교하면 이해가 쉬울것이다.


border=0

(1,1) (1,2)
(2,1) (2,2)



border=1

(1,1) (1,2)
(2,1) (2,2)



border=2

(1,1) (1,2)
(2,1) (2,2)



border=3

(1,1) (1,2)
(2,1) (2,2)



border=4

(1,1) (1,2)
(2,1) (2,2)



border=5

(1,1) (1,2)
(2,1) (2,2)



테이블의 크기
예제 설명
<table border=1 width="원하는넓이">
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
원하는 넓이에서 테이블의 크기를 결정한다.지정하는 방법은 두가지가 있는데 하나는 단위픽셀로 그냥 숫자만 기입한 경우이며 테이블의 위치한 줄의 최대치에 대한 %비로 나타내는 %기입법이 있다. 100%를 대입하면 그 줄에서 테이블이 차지할 수 있는 최대한의 크기로 나타나며 50%로 대입하면 최대치의 반으로 나타나게 된다. 다음은 단위픽셀로 그냥 숫자만 기입한 경우의 비교이다.


width=100

(1,1) (1,2)
(2,1) (2,2)



width=200

(1,1) (1,2)
(2,1) (2,2)



width=300

(1,1) (1,2)
(2,1) (2,2)

   

'강의실 > HTML' 카테고리의 다른 글

셀안의 정렬  (0) 2007.07.18
셀 합치기  (0) 2007.07.18
테이블 작성  (0) 2007.07.18
같은 문서내 이동  (0) 2007.07.17
다른 문서의 연결  (0) 2007.07.17