본문 바로가기

강의실/HTML

테이블 작성

기본테이블작성
테이블 - 한글97에서 많이 보았을 것이다. 일정한 양식을 갖춘 포멧같은 것을 사용할때 주로 사용된다. 하지만 이 테이블은 홈페이지 제작에 있어서 내가 원하는 위치에 그림 또는 글자를 위치시키고자하는 레이아웃에 절대적으로 사용되는 정말 중요한 태그이다. 그 무궁무진한 사용방법을 익히기 전에 다음의 가장 기본이 되는 테이블 구성 태그를 알아보도록 하자.

1X1 Table
예제 설명
<table>
<tr>
<td>(1,1)</td>
</tr>
</table>
1줄(row)과 1칸(column)을 가지는 가장 작은 테이블의 구성이다. 먼저 1줄을 삽입하고 그 줄안에 칸을 삽입한다.
결과는 다음과 같다.


(1,1)


1X1 테이블 - 경계선 1
예제 설명
<table border=1>
<tr>
<td>(1,1)</td>
</tr>
</table>
테이블의 경계선을 넣어주는 border옵션의 사용예이다. 위의 경우와 다르게 주위와의 구별을 주어 테이블임을 알 수 잇게 해준다.


(1,1)


1X2 테이블 - 경계선 1
예제 설명
<table border=1>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
</table>
첫줄에 두개의 칸을 만드는 방법이다. 줄을 먼저 만들고 두개의 칸을 나타내는 td 태그를 삽입하면 된다. 결과는 다음과 같다.


(1,1) (1,2)


2X1 테이블 - 경계선 1
예제 설명
<table border=1>
<tr>
<td>(1,1)</td>
</tr>
<tr>
<td>(2,1)</td>
</tr>
</table>
첫째줄을 만들고 두번째 줄은 첫번째 줄과 같은식으로 넣어주면 된다.결과는 다음과 같다.


(1,1)
(2,1)


2X2 테이블 - 경계선 1
예제 설명
<table border=1>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
첫번째줄을 만들고(tr) 그 안에 1번째 칸과 두번째 칸을 만든다음에 두번째줄은 첫번째 줄과 같은 식으로 만들면 된다. 결과는 다음과 같다.


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

 

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

셀 합치기  (0) 2007.07.18
테이블의 경계선과 크기  (0) 2007.07.18
같은 문서내 이동  (0) 2007.07.17
다른 문서의 연결  (0) 2007.07.17
배경 음악 삽입  (0) 2007.07.17