테이블의 기본

테이블의 기본

<table>    <!--테이블 시작 태그-->
  <tr>     <!--행 시작 태그-->
    <td>   <!--셀 시작 태그-->
      셀 1
    </td>  <!--셀 종료 태그-->
    <td>
      셀 2
    </td>
  </tr>    <!--행 종료 태그-->
  <tr>
    <td>
      셀 3
    </td>
    <td>
      셀 4
    </td>
  </tr>
</table>   <!--테이블 종료 태그-->

 

테이블의 다양한 설정

border="5"           ： 외부 프레임의 두께 =0일 때는 프레임 표시가 없음
bgcolor="#ffa07a"    ： <table>의 배경색(<td>도 지정 가능)
width="300"          ： 폭
height="200"         ： 높이
table/ align="left"  ： 테이블 위치（left,　center,　raight)
td/ align="left"     ： 셀 내용의 가로 위치（left,　center,　raight)
cellspacing="10"     ： 테두리와 셀, 셀과 셀 사이의 간격 
cellpadding="10"     ： 셀 테두리와 내용 사이의 간격
valign="middle"      ： 셀 내용의 세로 위치（top,　middle,　bottom）
rowspan="2"          ： 셀 세로 결합
colspan="3"          ： 셀의 횡결합
nowrap="nowrap"      ： 셀 내의 줄 바꿈 금지

 

 

예제

ＡＡＡ ＢＢＢ ＣＣＣ ＤＤＤ ＥＥＥ ＦＦＦ

 

<table border="5" bgcolor="#ffa07a" width="300" height="200" align="left" cellspacing="10" cellpadding="10">
  <tr> 
    <td align="center" valign="middle" bgcolor="#ff6347">ＡＡＡ</td>
    <td align="center">ＢＢＢ</td>
    <td align="center" valign="bottom" rowspan="2" >ＣＣＣ</td>
  </tr>
  <tr> 
    <td align="center">ＤＤＤ</td>
    <td align="center">ＥＥＥ</td>
  </tr>
  <tr> 
    <td align="center" colspan="3">ＦＦＦ</td>
  </tr>
</table>