목록

오늘은 테이블에 프레임속성을 주는 그런 소스가 되겠습니다. 테이블 속성으로는 경계를 정하는  border 속성이 있을수 있겠고 또 정렬을 주는 align도 있겠습니다. 오늘은 그 중에 frame속성입니다. 이것은 예를들어 <table frame="above">를 주면 그 테이블은 셀위에만 줄이 그어진 형태가 되는 것입니다. 자세한 것은 예제를 보시면 이해가 빠르실겁니다.

 

<html>
< body>

<p>
< b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the "frame" attribute.
< /p>

<h4>With frame="border":</h4>
< table frame="border"> <!-- 경계가 있습니다. box형이랑 비슷합니다. -->
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="box":</h4>
< table frame="box">
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="void":</h4> <!-- 선이 아무것도 나타나지 않습니다. -->
< table frame="void">
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="above":</h4> 
< table frame="above"> <!-- 셀위에만 선이 그어집니다. -->
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="below":</h4>
< table frame="below"> <!-- 셀 아래에만 선이 그어집니다. -->
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="hsides":</h4>
< table frame="hsides"> <!-- 가로줄만 그어집니다. -->
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="vsides":</h4>
< table frame="vsides"> <!-- 세로줄만 그어집니다. -->
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="lhs":</h4> <!-- 왼쪽선만 그어집니다.
< table frame="lhs">
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

<h4>With frame="rhs":</h4> <!-- 오른쪽 선만 그어집니다. -->
< table frame="rhs">
< tr>
  <td>First</td>
  <td>Row</td>
< /tr>  
< tr>
  <td>Second</td>
  <td>Row</td>
< /tr>
< /table>

</body>
< /html>

 

  테이블은 잘 아시리라 생각하고 frame속성에 따라서 테이블이 다르게 그려집니다. 주석을 참고하시고 결과를 보시면 더 잘 이해하시겠지요?

 

Note: If you see no frames/borders around the tables below, your browser does not support the "frame" attribute.

With frame="border":

First Row
Second Row

With frame="box":

First Row
Second Row

With frame="void":

First Row
Second Row

With frame="above":

First Row
Second Row

With frame="below":

First Row
Second Row

With frame="hsides":

First Row
Second Row

With frame="vsides":

First Row
Second Row

With frame="lhs":

First Row
Second Row

With frame="rhs":

First Row
Second Row

 

  이해하시겠지요? 그럼 다음시간에 또 만나요~

이 게시물을