웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
1 - 4. 목록 및 표 작성
2003.02.25 06:15
⑴ 목록 작성
목록은 작업의 순서를 기술하거나 선택 항복 등을 차례로 나열할 때에 이용하는 태그이다. 번호가 없이 나영되는 목록을 만들 때에는 UL(unordered list) 태그를 사용하고, 항목에 순서가 있는 목록을 만들려고 하는 경우에는 OL(or-dered list) 태그를 사용한다
<UL>이나 <OL> 태그에서 나영되는 각 항목은 <LI> 태그를 사용하여 표시한다.
사용형식 : <UL> … </UL>
<OL> … </OL>
특정 용어를 정의하는 정의 목록을 만들고자 하는 경우에는 DL(definition list) 태그를 사용한다. 이 태그 내에서는 <LI> 태그 대신에 <DT>와 <DD> 태그를 사용한다.
* 위의 예제를 <OL> 태그를 이용하여 작성한 예
<HTML>
<HEAD><TITLE> 목록 작성 </TITLE></HEAD>
<BODY>
<OL> 순서 있는 목록
<LI> 첫 번째
<LI> 두 번째
<LI> 세 번째
</OL>
</BODY>
</HTML>
⑵ 표 작성
표를 작성하고자 할 때에는 <TABLE> 태그를 이용한다. 다음은 표를 만들때에 사용되는 태그를 설명한 것이다.
㈎ <TR> … </TR> : 표의 행을 한 줄 추가한다
㈏ <TD> … </TD> : 표 안에 들어갈 데이터를 표시한다
㈐ <TH> … </TH> : 표 안에 들어갈 열의 제목을 표시한다
* 다음은 2개의 행과 3개의 열을 가지는 표를 작성한 예이다. 여기에서 <TABLE> 태그 내의 BORDER 속성은 표 테두리의 굵기를 지정하여 화면에 표시한다.
<CAPTION> 태그는 표의 제목을 표시해 주는 역활을 한다.
<HTML>
<HEAD><TITLE> 표 작성 </TITLE></HEAD>
<BODY>
<TABLE BORDER=2>
<CAPTION> 표 제목 </CAPTION>
<TH> 1 열의 제목 </TH>
<TH> 2 열의 제목 </TH>
<TH> 3 열의 제목 </TH>
<TR>
<TD> 2행 1열 <TD>
<TD> 2행 2열 <TD>
<TD> 2행 3열 <TD>
</TR>
</TABLE>
</BODY>
</HTML>
목록은 작업의 순서를 기술하거나 선택 항복 등을 차례로 나열할 때에 이용하는 태그이다. 번호가 없이 나영되는 목록을 만들 때에는 UL(unordered list) 태그를 사용하고, 항목에 순서가 있는 목록을 만들려고 하는 경우에는 OL(or-dered list) 태그를 사용한다
<UL>이나 <OL> 태그에서 나영되는 각 항목은 <LI> 태그를 사용하여 표시한다.
사용형식 : <UL> … </UL>
<OL> … </OL>
특정 용어를 정의하는 정의 목록을 만들고자 하는 경우에는 DL(definition list) 태그를 사용한다. 이 태그 내에서는 <LI> 태그 대신에 <DT>와 <DD> 태그를 사용한다.
* 위의 예제를 <OL> 태그를 이용하여 작성한 예
<HTML>
<HEAD><TITLE> 목록 작성 </TITLE></HEAD>
<BODY>
<OL> 순서 있는 목록
<LI> 첫 번째
<LI> 두 번째
<LI> 세 번째
</OL>
</BODY>
</HTML>
⑵ 표 작성
표를 작성하고자 할 때에는 <TABLE> 태그를 이용한다. 다음은 표를 만들때에 사용되는 태그를 설명한 것이다.
㈎ <TR> … </TR> : 표의 행을 한 줄 추가한다
㈏ <TD> … </TD> : 표 안에 들어갈 데이터를 표시한다
㈐ <TH> … </TH> : 표 안에 들어갈 열의 제목을 표시한다
* 다음은 2개의 행과 3개의 열을 가지는 표를 작성한 예이다. 여기에서 <TABLE> 태그 내의 BORDER 속성은 표 테두리의 굵기를 지정하여 화면에 표시한다.
<CAPTION> 태그는 표의 제목을 표시해 주는 역활을 한다.
<HTML>
<HEAD><TITLE> 표 작성 </TITLE></HEAD>
<BODY>
<TABLE BORDER=2>
<CAPTION> 표 제목 </CAPTION>
<TH> 1 열의 제목 </TH>
<TH> 2 열의 제목 </TH>
<TH> 3 열의 제목 </TH>
<TR>
<TD> 2행 1열 <TD>
<TD> 2행 2열 <TD>
<TD> 2행 3열 <TD>
</TR>
</TABLE>
</BODY>
</HTML>
댓글 2
-
영이
2003.10.02 11:13
-
유재웅
2005.02.26 13:43
<TD> 2행 1열 </TD>
<TD> 2행 2열 </TD>
<TD> 2행 3열 </TD>
로 바꾸세요. 잘 됩니다.
제목 | 글쓴이 | 날짜 |
---|---|---|
[HTML 초보자] 열거목록에 대한 스타일정의 세번째 | ZipShin | 2003.03.12 |
[HTML 초보자] 테이블태그 테두리 효과 - frame 옵션의 활용 [1] | ZipShin | 2003.02.28 |
[HTML 초보자] 쉽게 버튼 만들자 | ZipShin | 2003.02.28 |
[HTML 초보자] 프레임셋의 기타 설정 [3] | ZipShin | 2003.02.26 |
1 - 6. 프레임 [3] | wony | 2003.02.25 |
1 - 5. HTML 문서의 연결 | wony | 2003.02.25 |
1 - 4. 목록 및 표 작성 [2] | wony | 2003.02.25 |
1 - 3. 글자 및 양식 관련 태그 | wony | 2003.02.25 |
1 - 2. HTML 문서의 구성 | wony | 2003.02.25 |
1 - 1. HTML 문서 | wony | 2003.02.25 |
배경음악 여러개 나오게 하기.. [6] | 라엘 | 2003.02.23 |
[HTML 초보자] 프레임 나누기 기초 [1] | ZipShin | 2003.02.20 |
아이프레임 자동으로 크기 맞추어 주기.. [9] | S,CAC | 2003.02.16 |
오픈창 닫기 [7] | 깜보 | 2003.02.16 |
링크관련 ^^ [27] | K.샘 | 2003.02.13 |
[HTML 초보자] 동영상과 함께 자막도 재생하여 보자 [8] | ZipShin | 2003.02.11 |
점선 테이블 만둘기 강좌(중복이면.. 지워주세요) [4] | 라엘 | 2003.02.10 |
웹페이지 대화상자 띄우기. [4] | 세죠위그이 | 2003.02.05 |
하이퍼 링크색 바꾸기 [3] | 권순빈 | 2003.02.03 |
스크롤바 색 바꾸기 [1] | 권순빈 | 2003.02.03 |
전 나모에서 표를 만들어 html 을 복사해서 이지보드, 티티보드에 붙이면 제대로 뜨는데
똑같은 방식으로 제로보드에 붙여넣기하면 공간이 많이 생기고 표도 높이가 왕창 커진 표로 나타납니다.
위의 html 방식으로 게시판에 넣으면 제대로 뜨나요?