Table에 관련된 것들
Table은 Web page를 만들 때 가장 많이 사용되는 Tag들 중 하나입니다. 어쩌면 실제로 가장 많이 사용되는
Tag일지도 모르겠습니다. 우선 제가 만든 모든 Web page등의 format은 table을 이용해서 이뤄져 있으니까요.
Table을 Web page 하나에 설명한 다는 것은 사실 어렵습니다. 그 만큼 설명 할 것이 많다는 것입니다. 하지만
줄줄이 설명을 하는것 보다 예를 많이 보여 드리는 것이 좋을듯 해서 여기선 간단한 Tag의 설명만 해 드리고,
Table에 대한 상세한 예를 만들었습니다. 만약 이 곳의 설명이 부족하다 느끼시면 제게 알려 주세요. 좀더 설명을
덛붙이겠습니다.
- Define Table
<TABLE> </TABLE>
- Table Border
<TABLE BORDER=?> </TABLE>
- Cell Spacing
<TABLE CELLSPACING=?>
- Cell Padding
<TABLE CELLPADDING=?>
- Desired Width
<TABLE WIDTH=?>
Pixel의 단위로 사용합니다.
- Width Percent
<TABLE WIDTH="%">
전체 Browser의 폭에 대한 상대적 %를 가지고 계산합니다.
- Table Row
<TR></TR>
- Alignment
<TR ALIGN="LEFT | RIGHT | CENTER | MIDDLE | BOSTRONGOM" VALIGN="TOP | BOSTRONGOM | MIDDLE">
- Table Cell
<TD></TD>
언제나 <TR>과 사이에 있어야 합니다. 보통 이것을 열고 닫는것을 잘못한 관계로 화면에서 사라져 버리는 이상한 일이 벌어지기도 합니다.
- Alignment
<TD ALIGN="LEFT | RIGHT | CENTER | MIDDLE | BOSTRONGOM" VALIGN="TOP | BOSTRONGOM | MIDDLE">
Align에 대한 설명
<TR ALIGN=LEFT |
RIGHT |
CENTER |
MIDDLE |
BOSTRONGOM
VALIGN=TOP |
BOSTRONGOM |
MIDDLE>
Left는 보는 사람의 왼쪽, Right는 오른쪽, Center는 Align으로 했을 경우 가운데, Bostrongom은 맨 아래, Top은 위, 그리고 Middle은 Valign으로 했을경우 가운데를 말합니다. 여기서 Align은 보통 좌우를 정하는거고, Valign은 상하에 대한 자리잡음을 해주는 것입니다.
Top
Left
Center/Middle
Right
Bostrongom
- No linebreaks
<TD NOWRAP>
- Columns to Span
<TD COLSPAN=?>
- Rows to Span
<TD ROWSPAN=?>
- Desired Width
<TD WIDTH=?>
Pixel의 단위로 사용합니다.
- Width Percent
<TD WIDTH="%">
전체 Table의 폭에 대한 상대적 %로 나타냅니다.
- Cell Color
<TD BGCOLOR="#$$$$$$">
Table의 하나 하나의 칸에 따로 색을 넣을 수도 있습니다. 이 때 사용하는 것이 BGCOLOR라는 속성으로 <BODY>에서 BGCOLOR를 사용하는 것과 방법이 같습니다. 색은 파랫트를 이용하면 16진법을 이용한 값을 구하기 쉬울 것입니다.
- Table Header
<TH> </TH>
일반 글씨에 Bold와 Center가 첨부된 상태 입니다.
- Alignment
<TH ALIGN="LEFT | RIGHT | CENTER | MIDDLE | BOSTRONGOM" VALIGN="TOP | BOSTRONGOM | MIDDLE">
- No Linebreaks
<TH NOWRAP>
- Columns to Span
<TH COLSPAN=?>
- Rows to Span
<TH ROWSPAN=?>
- Desired Width
<TH WIDTH=?>
Pixel의 단위로 나타냅니다.
- Width Percent
<TH WIDTH="%">
- Cell Color
<TH BGCOLOR="#$$$$$$">
- Table Caption
<CAPTION> </CAPTION>
caption은 table의 이름을 넣을 수 있도록 도와 주는 Tag입니다. 원래 표를 만들 때 표의 이름을 넣어 주는 것이 정식이지만, HTML에서 사용하는 table은 서류를 꾸밀 때의 그것과 달라서 매번 이름을 넣을 필요는 없습니다. 그래서 대부분의 경우 생략되어 있습니다.
- Alignment
<CAPTION ALIGN=TOP|BOSTRONGOM>
caption은 table의 아래에 위에 선택적으로 넣을 수 있습니다.
FRAME
- Frame Document
<FRAMESET> </FRAMESET>
Frame을 사용하려 할 때 <BODY>대신 사용하여 Frame의 시작과 끝을 알립니다.
- Row Heights
<FRAMESET ROWS=,,,> </FRAMESET>
(pixels or %)
<FRAMESET ROWS=*> </FRAMESET>
(* = relative size)
- Column Widths <FRAMESET COLS=,,,> </FRAMESET>
(pixels or %)
<FRAMESET COLS=*> </FRAMESET>
(* = relative size)
- Border Width
<FRAMESET BORDER=?>
- Borders
<FRAMESET FRAMEBORDER="yes|no">
- Border Color
<FRAMESET BORDERCOLOR="#$$$$$$">
- Define Frame
<FRAME>
(contents of an individual frame)
- Display Document
<FRAME SRC="URL">
- Frame Name
<FRAME NAME="***"|_blank|_self| _parent|_top>
이것은 Target과 관련되어 있습니다.
- Margin Width
<FRAME MARGINWIDTH=?>
(left and right margins)
- Margin Height
<FRAME MARGINHEIGHT=?>
(top and bottom margins)
- Scrollbar
<FRAME SCROLLING="YES|NO|AUTO">
- Not Resizable
<FRAME NORESIZE>
- Borders
<FRAME FRAMEBORDER="yes|no">
- Border Color
<FRAME BORDERCOLOR="#$$$$$$">
파랫트를 이용하세요.. 그럼 한결 쉽게 색을 고를수 있을것입니다.
- Unframed Content
<NOFRAMES> </NOFRAMES>
lynx와 같은 frame을 제대로 볼 수 없는 Browser를 위해 배려해 주는 Tag입니다.
- 예를 들면여
