Table

Content   Previous   Next   Index

Tables 1

연락처 : sw390126@hotmail.com

---

여기에서는 HTML 문서에서 Table(표)을 만드는 것에 대하여 3번에 걸쳐 알아 보기로 한다. Table을 만드는데 있어 기본 Tag 은 아래 List 와 같다. Table 을 만들기 위해서는 Table 이라고 정의하는 Table Tag 과 가로줄을 정의하는 TR Tag 및 세로줄을 정의하는 TD 또는 TH Tag 이 합쳐야만 하나의 표를 만들 수 있다.

• Table
• TR
• TD
• TH
• Caption

---

Table

Table Tag 은 Table(표)을 정의한다. Table 은 Table Tag 안에 가로줄(행-Row)을 만들어 주는 <TR> Tag 과 Cell(Column-세로줄 이라고 하면 이해가 빠를 것 같다)을 만들어 주는 <TD> Tag 또는 <TH> Tag 써 넣어 주어야만 표가 만들어 진다. 아래에 표시된 것이 가장 간단한 Table 의 예이다.

간단한 Table 예

1st Row 1st Column	1st Row 2nd Column
2nd Row 1st Column	2nd Row 2nd Column

위의 예에서 사각형 하나 하나를 Cell 이라고 하며 Cell 안의 내용을 Cell Data 라고 한다. 또한 가로줄의 칸을 Row, 세로줄의 칸을 Column 이라고 하고 Cell Data 는 속성을 주지않는 한 수평정열은 Cell 의 왼쪽에, 수직정열은 Cell의 중앙에 정열하도록 되어 있다.

문     법

<Table
    Border="Value"
    Cellpadding="Value"
    Cellspacing="Value"
    Cols="Number of Columns"
    Width="Value or Percentage"
    Height="Value or Percentage"
    Align="Left" | "Right" | "Center"
    Valign="Top" | Bottom" | Center"
    Bgcolor="#rrggbb or Color Name"
    Bordercolor="#rrggbb or Color Name"
    Hspace="Horizontal Margin"
    Vspace="Vertical Margin"
    Bordercolorlight="#rrggbb or Color Name"
    Bordercolordark="#rrggbb or Color Name"
    Background="URL of Image"
    Frame="속성에서 설명"
    Rules="속성에서 설명"
    Title="Informational ToolTip"
    Class="Style Sheet Class Name"
    Style="InLine Style Setting"
    ID="Unique Element Identifier 
    >
        ..............................................
</Table>

속성설명

Border 속성은 표에 선을 그어주고 이를 표시하게 하는 역할을 한다. 즉 경계선을 만들어 주고 표시하게 한다. 이 속성을 주면 모든 Cell 에 이 속성이 적용된다. Border 의 선 두께는 Pixel 수로 지정하며, 기본값(Default Value)을 주려면 <table border> 또는 <table border="">와 같이 Border 가 있다는 것을 표시해 주면 된다. 기본 Border 에 대한 표시와 두께는 각 Browser 에 의해 결정된다. Border 없이 표시하는 경우는 Border="0" 라고 하면 된다. 색갈 있는 Border 를 만들려면 Bordercolor 속성을 이용하면된다.

Cellpadding 속성은 Cell Border 와 Cell Data 사이의 공백 간격을 Pixel 값으로 지정한다. 기본값은 1 이다.

Cellspacing 속성은 Table 안의 Cell 과 Cell 사이의 공백 간격을 Pixel 값으로 지정한다. 기본값은 2 이다.

Cols 속성은 Window 너비에 맞게 같은 넓이의 Column 을 몇개 만들어 줄 것인가 하는 가상 Column 수를 지정한다. 실제의 Column 수는 <TD> Tag 에 의하여 결정된다. 예을 들면 Window 의 폭을 "80%" 로 지정하고 실제 Column 수가 "4" 로 되어 있는 경우에 Cols="3" 이라고 지정하였다면 4 번째의 Coloumn 은 Cell Data 을 표시하는데 맞는 최소의 폭을 차지하고, 나머지 3 개의 Column 이 Window 나머지 폭을 3 등분한 너비를 차지하게 된다.

Width 속성은 Table 너비를 Pixel 이나 Browser 표시창에 대한 Percent 로 지정한다.

Height 속성은 Table 높이를 Pixel 이나 Browser 표시창에 대한 Percent 로 지정한다.

Align 속성은 Table 이 위치할 곳을 지정한다. Align="Left" 는 표시하는 창의 왼쪽에, Right 는 오른쪽, Center 는 중앙에에 위치하도록 하게 하다. Left 및 Right 지정시는 Table 주위(Table 좌우의 여백)에 Text 가 들어 갈수 있으나(Floating Table 라고함), Center 지정시는 Text 가 들어갈 수가 없다.  또한 <BR Clear="......."> 를 사용하여 <BR Clear="........"> 이후의 문장이 Table 주위에 위치할 수 없도록 하게 할수 있다.

Valign 속성은 Table Cell 내의 Cell Data 의 수직정열을 지정한다. 기본값은 Center 이다.

Bgcolor 속성은 이 속성을 지정한 Table 의 배경색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolor 속성은 Table Border 에 대한 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Hspace 속성은 Align="Left" or "Right" 를 주었을 때 Table 주위에 Text 가 들어갈 수 있는데 이 Text 와 Table 과의 수평 공백 간격을 Pixel 수로 지정한다. 이 속성은 Netscape 에서만 유용하다.

Vspace 속성은 Align="Left" or "Right" 를 주었을 때 Table 주위에 Text 가 들어갈 수 있는데 이 Text 와 Table 과의 수직 공백 간격을 Pixel 수로 지정한다. 이 속성은 Netscape 에서만 유용하다.

Bordercolorlight 속성은 Table Border 의 3차원으로 표시하고자 하는 경우 에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolordark 속성은 Table Border 의 3차원으로 표시하고자 하는 경우 에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Background 속성은 Table 요소내에 Image 을 불러 놓는 경우 Image 가 위치한 URL 을 지정한다.

Frame 속성은 Table Border 을 상하좌우 어느쪽에 줄 것인지을 지정하는 속성이다. Border 속성만을 사용하면 경계선을 만들어 줄것인지 경계선을 주지 아니 할 것인지 만을 결정하게 되나 이 속성을 사용하면 경계선을 윗쪽에만 주든가 좌우만 주든가등을 지정할 수가 있다. 이 속성에 대한 값은 다음과 같고 Frame="void" 와 같이 값을 주면 된다..

void	외부 경계선 전부를 제거한다.
above	Table 의 윗쪽 외부 경계선만을 표시한다.
below	Table 아랫쪽 외부 경계선만을 표시한다.
hsides	Table 의 수평 외부 경계선 즉 상하 경계선만을 표시한다.
lhs	Table 의 왼쪽 외부 경계선만을 표시한다.
rhs	Table 의 오른쪽 외부 경계선만을 표시한다.
vsides	Table 의 수직 외부 경계선 즉 좌우 경계선만을 표시한다.
box	Table 의 상하좌우 경계선을 표시한다.

Rules 속성은 Table 내의 Cell 경계선에 대하여 어느쪽의 테두리를 표시할 것인가를 지정한다. Rules 에 들어 갈 수 있는 값과 설명은 아래 표와같다.

none	내부 모든 경계선를 제거한다.
basic	<Thead>, <Tbody>, <Tfoot> 영역 사이에 수평 경계선을 표시한다.
rows	모든 Row 사이의 수평 경계선을 표시한다.
cols	모든 Column 사이의 수직 경계선을 표시한다.
all	내부 모든 경계선을 표시한다.

Title 속성은 <Table Title=" xxxxxxxxxx">.........</Table>라고 지정하면 Text위에 Mouse Cursor를 올려 놓고 조금 기다리면 Title속성의 Quotation Mark 안에 쓴 내용("xxxxxx"로 표시한 부분)이 나타난다. 이는 보충정보로서 소위 풍선 도움말이 뜬다.

Class="Style Sheet Class Name"은 Style Sheet에서 Class 이름을 붙이기 위한 속성으로써 id 속성과는 달리 같은 문서에서 여러개의 요소에 같은 Class 이름을 적용할 수 있으며, Head Tag에서 
<style type="text/css">
    .styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
와 같이 일괄적으로 지정한 후 <Table Class="styleclass">....................</Table>라고 Table Tag을 사용하면 <Table>와 </Table>사이의 Text가 이의 적용을 받는다.

Style="In line style setting"은 Line 상에 직접 Style Sheet을 일괄 정의하여 사용하는 방법으로 <Table style="{font-family:Arial; font-size:14pt}".......</Table>와 같이 지정하여 적용한다.

ID 속성은 고유 Style Sheet 식별자(Unique Style Sheet Identifier)의 참고 또는 Scripting 목적을 위하여 Table요소에 대한 고유이름(Unique Name)을 붙이기 위한 속성으로 하나의 문서에 여러개의 요소에 같은 이름을 붙일수 없으며, 여기에 붙은 이름은 대소문자를 구별한다. Style Sheet에서 지정하는 방법은 
<style type="text/css">
    #styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
과 같이  Head Tag에서 일괄 지정한 후 <Table ID="styleclass">....................</Table>라고 Table Tag을 지정 사용한다.

예   문

Table 에 대한 예문과 결과는 Table1.htm 에 있다.

　

---

TR(Table Row)

TR Tag 은 Table Row 즉 표의 가로 줄을 표시한다. TR Tag 은 Table Tag 안에 사용하며, Table Cell 을 나타내는 TD Tag 과 Table Heading(제목)을 표시하는 TH Tag 을 포함할 수 있다.

문     법

<TR
    Align="Left" | "Center" | "Right"
    Valign="Top" | "Middle" | "Bottom" | "Baseline"
    Bgcolor="#rrggbb or Color Name"
    Bordercolor="#rrggbb or Color Name"
    Bordercolorlight="#rrggbb or Color Name"
    Bordercolordark="#rrggbb or Color Name"
    Background="URL of Image"
    Title="Informational ToolTip"
    Class="Style Sheet Class Name"
    Style="InLine Style Setting"
    ID="Unique Element Identifier 
    >
        ..............................................
</TR>

속성설명

Align 속성은 이 속성을 지정한 Table Row 내에 있는 Cell Data 의 수평정열을 지정한다. 기본값은 Left 이다.

Valign 속성은 이 속성을 지정한 Table Row 내에 있는 Cell Data 의 수직정열을 지정한다. 기본값은 Middle 이다.

Bgcolor 속성은 이 속성을 지정한 Table Row 의 배경색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolor 속성은 이 속성을 지정한 Table Row 의 각 Cell 의 경계선에 대한 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolorlight 속성은 이 속성을 지정한 Table Row 의 경계선을 3차원으로 표시하고자 하는 경우에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolordark 속성은 이 속성을 지정한 Table Row 의 경계선을 3차원으로 표시하고자 하는 경우에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Background 속성은 이 속성을 지정한 Table Row 내에 Image 을 불러 놓는 경우 Image 가 위치한 URL 을 지정한다. 이속성은 Netscape 에사만 유효하다.

Title 속성은 <TR Title=" xxxxxxxxxx">.........</TR>라고 지정하면 Text위에 Mouse Cursor를 올려 놓고 조금 기다리면 Title속성의 Quotation Mark 안에 쓴 내용("xxxxxx"로 표시한 부분)이 나타난다. 이는 보충정보로서 소위 풍선 도움말이 뜬다.

Class="Style Sheet Class Name"은 Style Sheet에서 Class 이름을 붙이기 위한 속성으로써 id 속성과는 달리 같은 문서에서 여러개의 요소에 같은 Class 이름을 적용할 수 있으며, Head Tag에서 
<style type="text/css">
    .styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
와 같이 일괄적으로 지정한 후 <TR Class="styleclass">....................</TR>라고 TR Tag을 사용하면 <TR>와 </TR>사이의 Text가 이의 적용을 받는다.

Style="In line style setting"은 Line 상에 직접 Style Sheet을 일괄 정의하여 사용하는 방법으로 <TR style="{font-family:Arial; font-size:14pt}".......</TR>와 같이 지정하여 적용한다.

ID 속성은 고유 Style Sheet 식별자(Unique Style Sheet Identifier)의 참고 또는 Scripting 목적을 위하여 TR요소에 대한 고유이름(Unique Name)을 붙이기 위한 속성으로 하나의 문서에 여러개의 요소에 같은 이름을 붙일수 없으며, 여기에 붙은 이름은 대소문자를 구별한다. Style Sheet에서 지정하는 방법은 
<style type="text/css">
    #styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
과 같이  Head Tag에서 일괄 지정한 후 <TR ID="styleclass">....................</TR>라고 TR Tag을 지정 사용한다.

예   문

TR 에 대한 예문과 결과는 Tabletr.htm 에 있다.

　

---

TD(Table Data)

TD Tag 은 Table Column 즉 표의 세로 줄을 표시한다. TD Tag 은 Table Tag 안에 사용하며, Table Cell 을 나타내는데는 TR Tag 과 TD Tag 과 어울려야만 한다. 하나의 TR Tag 에 3 개의 TD tag 으로 구성된 표는 한 행에 3 개의 칸을 갖는 표가 된다. Table Heading(제목)을 표시하는 TH Tag 을 포함할 수 있다.

문     법

<TD
    Align="Left" | "Center" | "Right"
    Valign="Top" | "Middle" | "Bottom" | "Baseline"
    Width="Value or Percent"
    Height="Value or Percent"
    Nowrap
    Colspan=Value"
    Rowspan=Value"
    Bgcolor="#rrggbb or Color Name"
    Bordercolor="#rrggbb or Color Name"
    Bordercolorlight="#rrggbb or Color Name"
    Bordercolordark="#rrggbb or Color Name"
    Background="URL of Image"
    Title="Informational ToolTip"
    Class="Style Sheet Class Name"
    Style="InLine Style Setting"
    ID="Unique Element Identifier 
    >
        ..............................................
</TD>

속성설명

Align 속성은 이 속성을 지정한 Data Cell 내의 Cell Data 에 대한 수평정열을 지정한다. 기본값은 Left 이다.

Valign 속성은 이 속성을 지정한 Data Cell 내의 Cell Data 의 수직정열을 지정한다. 기본값은 Middle 이다.

Width 속성은 이 속성을 지정한 Data Cell 의 정확한 너비를 Pixel 이나 Browser 표시창에 대한 Percent 로 지정한다.

Height 속성은 이 속성을 지정한 Data Cell 의 정확한 높이를 Pixel 이나 Browser 표시창에 대한 Percent 로 지정한다.

Nowrap 속성은 이 속성을 지정한 Data Cell 내의 Data 가 자동 줄바꾸기를 하지 않도록 한다. 이 속성을 적용하면 Cell Data 의 길이에 맞게 Cell 이 폭이 늘어 남으로 주의를 요한다.

Colspan 속성은 이 속성에서 지정한 수의 Column 너비를 합한 크기의 폭을 갖는 Cell 을 지정한다. 즉 Colspan="3" 라고 지정하였다면 3 개의 Column 너비를 합한 크기의 폭을 갖는 Cell 을 만든다는 것이다. 기본값은 "1" 이다.

Rowspan 속성은 속성은 이 속성에서 지정한 수의 Row 높이를 합한 크기의 Height 을 갖는 Cell 을 지정한다. 즉 rowlspan="3" 라고 지정하였다면 3 개의 Row 높이를 합한 크기의 높이를 갖는 Cell 을 만든다는 것이다. 기본값은 "1" 이다.

Bgcolor 속성은 이 속성을 지정한 Data Cell 의 배경색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolor 속성은 이 속성을 지정한 Data Cell 의 경계선에 대한 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolorlight 속성은 이 속성을 지정한 Data Cell 의 경계선을 3차원으로 표시하고자 하는 경우 에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolordark 속성은 이 속성을 지정한 Data Cell 의 경계선을 3차원으로 표시하고자 하는 경우 에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Background 속성은 Table Row 내에 Image 을 불러 놓는 경우 Image 가 위치한 URL 을 지정한다. 이속성은 Netscape 에사만 유효하다.

Title 속성은 <TD Title=" xxxxxxxxxx">.........</TD>라고 지정하면 Text위에 Mouse Cursor를 올려 놓고 조금 기다리면 Title속성의 Quotation Mark 안에 쓴 내용("xxxxxx"로 표시한 부분)이 나타난다. 이는 보충정보로서 소위 풍선 도움말이 뜬다.

Class="Style Sheet Class Name"은 Style Sheet에서 Class 이름을 붙이기 위한 속성으로써 id 속성과는 달리 같은 문서에서 여러개의 요소에 같은 Class 이름을 적용할 수 있으며, Head Tag에서 
<style type="text/css">
    .styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
와 같이 일괄적으로 지정한 후 <TD Class="styleclass">....................</TD>라고 TD Tag을 사용하면 <TD>와 </TD>사이의 Text가 이의 적용을 받는다.

Style="In line style setting"은 Line 상에 직접 Style Sheet을 일괄 정의하여 사용하는 방법으로 <TD style="{font-family:Arial; font-size:14pt}".......</TD>와 같이 지정하여 적용한다.

ID 속성은 고유 Style Sheet 식별자(Unique Style Sheet Identifier)의 참고 또는 Scripting 목적을 위하여 TD요소에 대한 고유이름(Unique Name)을 붙이기 위한 속성으로 하나의 문서에 여러개의 요소에 같은 이름을 붙일수 없으며, 여기에 붙은 이름은 대소문자를 구별한다. Style Sheet에서 지정하는 방법은 
<style type="text/css">
    #styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
과 같이  Head Tag에서 일괄 지정한 후 <TD ID="styleclass">....................</TD>라고 TD Tag을 지정 사용한다.

예   문

TD 에 대한 예문과 결과는 Tabletd.htm 에 있다.

　

---

TH(Table Heading)

TH Tag 은 위 TD Tag 과 똑 같은 역할을 한다. 단 표(Table)내에서의 제목용으로 사용하는 것이 다를 뿐이다. 따라서 TH Tag 안에 있는 Cell Data 는 굵은 문자로 표시되며 Align 의 기본값이 Center 이다.

문     법

<TH
    Align="Left" | "Center" | "Right"
    Valign="Top" | "Middle" | "Bottom" | "Baseline"
    Width="Value or Percent"
    Height="Value or Percent"
    Nowrap
    Colspan=Value"
    Rowspan=Value"
    Bgcolor="#rrggbb or Color Name"
    Bordercolor="#rrggbb or Color Name"
    Bordercolorlight="#rrggbb or Color Name"
    Bordercolordark="#rrggbb or Color Name"
    Background="URL of Image"
    Title="Informational ToolTip"
    Class="Style Sheet Class Name"
    Style="InLine Style Setting"
    ID="Unique Element Identifier 
    >
        ..............................................
</TH>

속성설명

Align 속성은 이 속성을 지정한 Data Cell 내의 Cell Data 에 대한 수평정열을 지정한다. 기본값은 Center 이다.

Valign 속성은 이 속성을 지정한 Data Cell 내의 Cell Data 의 수직정열을 지정한다. 기본값은 Middle 이다.

Width 속성은 이 속성을 지정한 Data Cell 의 정확한 너비를 Pixel 이나 Browser 표시창에 대한 Percent 로 지정한다.

Height 속성은 이 속성을 지정한 Data Cell 의 정확한 높이를 Pixel 이나 Browser 표시창에 대한 Percent 로 지정한다.

Nowrap 속성은 이 속성을 지정한 Data Cell 내의 Data 가 자동 줄바꾸기를 하지 않도록 한다. 이 속성을 적용하면 Cell Data 의 길이에 맞게 Cell 이 폭이 늘어 남으로 주의를 요한다.

Colspan 속성은 이 속성에서 지정한 수의 Column 너비를 합한 크기의 폭을 갖는 Cell 을 지정한다. 즉 Colspan="3" 라고 지정하였다면 3 개의 Column 너비를 합한 크기의 폭을 갖는 Cell 을 만든다는 것이다. 기본값은 "1" 이다.

Rowspan 속성은 속성은 이 속성에서 지정한 수의 Row 높이를 합한 크기의 Height 을 갖는 Cell 을 지정한다. 즉 rowlspan="3" 라고 지정하였다면 3 개의 Row 높이를 합한 크기의 높이를 갖는 Cell 을 만든다는 것이다. 기본값은 "1" 이다.

Bgcolor 속성은 이 속성을 지정한 Data Cell 의 배경색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolor 속성은 이 속성을 지정한 Data Cell 의 경계선 에 대한 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolorlight 속성은 이 속성을 지정한 Data Cell 의 경계선을 3차원으로 표시하고자 하는 경우 에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Bordercolordark 속성은 이 속성을 지정한 Data Cell 의 경계선을 3차원으로 표시하고자 하는 경우 에 Border 색을 색이름이나 16진수에 # 기호를 붙여 지정한다.

Background 속성은 Table Row 내에 Image 을 불러 놓는 경우 Image 가 위치한 URL 을 지정한다. 이속성은 Netscape 에사만 유효하다.

Title 속성은 <TH Title=" xxxxxxxxxx">.........</TH>라고 지정하면 Text위에 Mouse Cursor를 올려 놓고 조금 기다리면 Title속성의 Quotation Mark 안에 쓴 내용("xxxxxx"로 표시한 부분)이 나타난다. 이는 보충정보로서 소위 풍선 도움말이 뜬다.

Class="Style Sheet Class Name"은 Style Sheet에서 Class 이름을 붙이기 위한 속성으로써 id 속성과는 달리 같은 문서에서 여러개의 요소에 같은 Class 이름을 적용할 수 있으며, Head Tag에서 
<style type="text/css">
    .styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
와 같이 일괄적으로 지정한 후 <TH Class="styleclass">....................</TH>라고 TH Tag을 사용하면 <TH>와 </TH>사이의 Text가 이의 적용을 받는다.

Style="In line style setting"은 Line 상에 직접 Style Sheet을 일괄 정의하여 사용하는 방법으로 <TH style="{font-family:Arial; font-size:14pt}".......</TH>와 같이 지정하여 적용한다.

ID 속성은 고유 Style Sheet 식별자(Unique Style Sheet Identifier)의 참고 또는 Scripting 목적을 위하여 TH요소에 대한 고유이름(Unique Name)을 붙이기 위한 속성으로 하나의 문서에 여러개의 요소에 같은 이름을 붙일수 없으며, 여기에 붙은 이름은 대소문자를 구별한다. Style Sheet에서 지정하는 방법은 
<style type="text/css">
    #styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
과 같이  Head Tag에서 일괄 지정한 후 <TH ID="styleclass">....................</TH>라고 TH Tag을 지정 사용한다.

　

예   문

TH 에 대한 예문과 결과는 Tableth.htm 에 있다.

　

---

Caption(Table Caption)

Table Tag 은 Table에 대한 제목(표제/설명문)를 정의한다. 이 Tag 은 Table Tag 안에 두어야 하며 TR 또는 TD Tag 안에 위치 할 수 없다. Caption 내의 Text 는 Table 폭의 중앙에 위치한다.

문     법

<Caption
    Align="Top" | "Bottom" | "Left" | "Center" | Right"
    Valign="Top" |  "Bottom" 
    Title="Informational ToolTip"
    Class="Style Sheet Class Name"
    Style="InLine Style Setting"
    ID="Unique Element Identifier 
    >
        ..............................................
</Caption>

속성설명

Align 속성중 Top과 Bottom은 Caption 의 내용을 Table 의 윗쪽에 놓을 것인지 아래쪽에 둘 것인지를 지정한다. Internet Explorer 에서는 Left/Center/Right 도 지원하나 이는 Valign 속성에서 지정한 Top 또는 Bottom 과 어울려 사용하는 것이다. 예를 들면 Valign="bottom" 이라고 지정하고 Align="Right" 지정하였다면 Caption 내용은 Table 아랫쪽 우측에 정열하게 된다. Align 의 기본값은 "Top" 이다.

Valign 속성은 Internet Explorer 에서 지원하는 속성으로 Caption 내용을 Table 의 위, 아래 의 어느쪽에 위치시킬 것인지를 지정한다. 위 Align 에서 설명한 바와 같이 Valign 은 Align 속성과 같이 사용하여 Caption 내용을 좌우, 중앙으로 수평정열을 지정할 수가 있다.

Title 속성은 <Caption Title=" xxxxxxxxxx">.........</Caption>라고 지정하면 Text위에 Mouse Cursor를 올려 놓고 조금 기다리면 Title속성의 Quotation Mark 안에 쓴 내용("xxxxxx"로 표시한 부분)이 나타난다. 이는 보충정보로서 소위 풍선 도움말이 뜬다.

Class="Style Sheet Class Name"은 Style Sheet에서 Class 이름을 붙이기 위한 속성으로써 id 속성과는 달리 같은 문서에서 여러개의 요소에 같은 Class 이름을 적용할 수 있으며, Head Tag에서 
<style type="text/css">
    .styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
와 같이 일괄적으로 지정한 후 <Caption Class="styleclass">....................</Caption>라고 Caption Tag을 사용하면 <Caption>와 </Caption>사이의 Text가 이의 적용을 받는다.

Style="In line style setting"은 Line 상에 직접 Style Sheet을 일괄 정의하여 사용하는 방법으로 <Caption style="{font-family:Arial; font-size:14pt}".......</Caption>와 같이 지정하여 적용한다.

ID 속성은 고유 Style Sheet 식별자(Unique Style Sheet Identifier)의 참고 또는 Scripting 목적을 위하여 Caption요소에 대한 고유이름(Unique Name)을 붙이기 위한 속성으로 하나의 문서에 여러개의 요소에 같은 이름을 붙일수 없으며, 여기에 붙은 이름은 대소문자를 구별한다. Style Sheet에서 지정하는 방법은 
<style type="text/css">
    #styleclass  {color:red; font-size:18pt; font-family:arial; font-weight:bold; font-style:italic}
</style>
과 같이  Head Tag에서 일괄 지정한 후 <Caption ID="styleclass">....................</Caption>라고 Caption Tag을 지정 사용한다.

예   문

Caption 에 대한 예문과 결과는 Table1.htm 에 있다.

　

---

source : http://jsm410728.com.ne.kr/html/12table1.htm