: devNote

onkeyup="this.value=this.value.replace(/[^0-9]/g,'')"

• 테이블 태그의 용어들

  <TABLE> ━ 테이블의 시작  <CAPTION> 테이블의 제목-표의 바깥쪽 위에 위치함 </CAPTION>  <TH>    각항의 제목-표의 안쪽 맨 위에 위치함    </TH>  <TR> ━ 테이블속의 경계선(줄바꾸기 태그라고 생각하면 됨!)  <TD>    각항의 내용   </TD>  <TR> ━ 줄바꿈  </TABLE> ━테이블의 끝

  
  

  위의 것을 그대로 적용을 한다면 아래와 같은 형태가 됩니다.

  <TABLE border="1">  <CAPTION> 테이블의 제목-표의 바깥쪽 위에 위치함 </CAPTION>  <TH> 각항의 제목-표의 안쪽 맨 위에 위치함 </TH>  <TR>  <TD> 각항의 내용 </TD>  </TR>  </TABLE> 실행화면  테이블의 제목-표의 바깥쪽 위에 위치함 각항의 제목-표의 안쪽 맨 위에 위치함 각항의 내용

  
  

  어딘가 모르게 보기에 안좋지요?이제부터는 테이블을 다듬는 태그를 설명해 보겠습니다.

• 테이블 다듬기 
  

  <TABLE BORDER="수치">테이블의 구분선 두께를 나타냄."0"으로표시하면 선이 보이질 않음.  <TABLE WIDTH="넓이"> 테이블의 가로 넓이수치(픽셀단위).  <TABLE HEIGHT="높이"> 테이블의 높이를 나타내는 숫자(픽셀단위)  <TABLE BGCOLOR="색상"> 테이블의 배경색을 지정함! 예:"WHITE"또는 흰색의 색상코드인"#FFFFFF"로도 표시 함. 검은색인 경우는 "BLACK" 또는, "#000000"으로 표시.  <TABLE BORDERCOLOR="색상"> 테이블구분선의 색상.  <TABLE BACKGROUND="배경이미지주소">테이블에 배경이미지를 넣습니다.  <TABLE CELLPADDING="값"> 이것은 항(cell-칸)과 내용(글 또는 그림...) 사이의 여백을 지정합니다. 초기값은 1입니다.  <TABLE CELLSPACING="값"> 이것은 각 항(cell-칸과 칸)사이의 공간을 설정합니다. 초기값은 2입니다.

  
  

• <TD> 와 <TH> 에 들어가는 태그

  <TD ALIGN="수평위치">왼쪽(LEFT),중앙(CENTER), 오른쪽(RIGHT)으로 정열시킵니다. </TD>  <TH ALIGN="수평위치"> 왼쪽(LEFT),중앙(CENTER), 오른쪽(RIGHT)으로 정열시킵니다. </TH>  <TH VALIGN="수직위치">위(TOP),중앙(MIDDLE), 아래(BOTTOM)으로 정열시킵니다. </TH> <TD VALIGN="수직위치">위(TOP),중앙(MIDDLE), 아래(BOTTOM)으로 정열시킵니다. </TD>  <TD WIDTH="수치"> 테이블안의 행의 넓이지정 </TD>  <TD HEIGHT="수치"> 테이블안의 행의헤더 넓이지정 </TD>  <TH WIDTH="수치"> 테이블안의 행의 헤더 높이지정 </TH>  <TH HEIGHT="수치"> 테이블안의 행의 높이지정 </TH>  <TH ROWSPAN="수치"> 테이블안의 세로로늘어지는 셀갯수 </TH>  <TD ROWSPAN="수치"> 테이블안의 세로로늘어지는 셀갯수 </TD>  <TH COLSPAN="수치"> 테이블안의 가로로늘어지는 셀갯수 </TH>  <TD COLSPAN="수치"> 테이블안의 가로로늘어지는 셀갯수 </TD>

  
  

• 테이블 응용

  <Table width="500" border="0" cellspacing="2" cellpadding="5" bgcolor="#000000" height="200">  <Tr bgcolor="white" align="center">  <Td colspan="3">첫번째줄(3칸합침)</Td>  </Tr>  <Tr align="right" valign="bottom">  <Td bgcolor="red">두번째줄 첫번째칸</Td>  <Td bgcolor="yellow">두번째줄 두번째칸</Td>  <Td bgcolor="green">두번째줄세번째칸</Td>  </Tr>  </Table>

  실행화면  첫번째줄(3칸합침) 두번째줄 첫번째칸 두번째줄 두번째칸 두번째줄세번째칸

  
  

• 테이블 응용.2 ※CELLSPACING='0'은 셀(표)간의 간격을 말합니다.

  <TABLE BORDER="1" WIDTH="450" BGCOLOR="BLUE" HEIGHT='150' cellspacing='1'>  <TR>  <TD bgcolor='red' width="150" VALIGN='top'> Top </TD>  <TD bgcolor='green' width="150" VALIGN='middle'> Middle </TD>  <TD bgcolor='pink' width="150" VALIGN='bottom'> Bottom </TD>  </TR>  <TR>  <TD bgcolor='white' width="150" ALIGN='left'> Left </TD>  <TD bgcolor='yellow' width="150" ALIGN='center'> Center </TD>  <TD bgcolor='blue' width="150" ALIGN='right'> Right </TD>  </TR>  </TABLE>

  실행화면  Top Middle Bottom Left Center Right

  
  

• 테이블 응용 .3- 테이블에 이미지 넣기※CELLSPACING='0'은 셀(표)간의 간격을 말합니다.

  <TABLE BORDER="1" WIDTH='520' HEIGHT="200" cellspacing="1" cellpadding="1" bgcolor="#0088ff">    <TR>      <TD BACKGROUND="http://gif00.com.ne.kr/image/back1.gif" align='center'> 바탕이미지.1 </TD>    </TR>    <TR>      <TD BACKGROUND="http://gif00.com.ne.kr/image/back2.gif" align='center'> 바탕이미지.2 </TD>    </TR>    <TR>      <TD BACKGROUND="http://gif00.com.ne.kr/image/back3.gif" align='center'> 바탕이미지.3 </TD>    </TR>    <TR>      <TD BACKGROUND="http://gif00.com.ne.kr/image/back4.gif" align='center'> 바탕이미지.4 </TD>    </TR>  </TABLE>

  실행화면 바탕이미지.1 바탕이미지.2 바탕이미지.3 바탕이미지.4

  
  

• 테이블 응용.4 표의 외곽 테두리에 이중색 넣기(bordercolorlight='yellow' 은 표의 밝은부분색, bordercolordark='black'은 어두운 색상을 말함!)

  <TABLE BORDER='5' WIDTH='400' HEIGHT='150' bordercolorlight='yellow' bordercolordark='black'> 
  <TR> 
  <TD> 이건디유..테이블 겉의테두리를 보셔유^0^; <TD/> 
  </TR> 
  </TABLE>

  실행화면

  이건디유..테이블 겉의테두리를 보셔유^0^;

한 TABLE에 줄 마다 칸수가 다른 TABLE만들기

• EX.1-셀 밑으로 분할하기.

  <TABLE border='1' width='400' cellpadding="0" cellspacing="0" bordercolor="#000000">
  <TR>
  <TD width='100'>칸.1</TD> <TD width='300' colspan='3'>칸.2</TD>
  </TR>
  <TR>
  <TD width='100'>칸.1-2</TD> <TD width='100'>칸.2-2-1</TD> <TD width='100'>칸.2-2-2</TD> <TD width='100'>칸.2-2-3</TD> 
  </TR>
  <TR>
  <TD width='100'>칸.1-3</TD> <TD width='100'>칸.2-3-1</TD> <TD width='100'>칸.2-3-2</TD> <TD width='100'>칸.2-3-3</TD> 
  </TR>
  </TABLE>

  실행화면
  

  칸.1	칸.2
  칸.1-2	칸.2-2-1	칸.2-2-2	칸.2-2-3
  칸.1-3	칸.2-3-1	칸.2-3-2	칸.2-3-3

  Tip colspan="3"이라고 적으면 바로 아랫줄의 셀 갯수(3)를 지정하는 것이고, rowspan="3"이라고 적으면 아래로 석줄의 셀이 생긴다는 뜻이다.

• EX.2- 셀 옆으로 분할하기.

  <TABLE border='1' width='600' cellpadding="0" cellspacing="0" bordercolor="#000000"> 
  <TR> 
  <TD width='300'>칸.1</TD> <TD width='300' rowspan='3'>칸.2</TD> 
  </TR> 
  <TR> 
  <TD width='300'>칸.1-2</TD> 
  </TR> 
  <TR> 
  <TD width='300'>칸.1-3</TD> 
  </TR> 
  </TABLE>

  실행화면
  
  

  칸.1	칸.2
  칸.1-2
  칸.1-3

  Tip 자세히 보면 갯수가 늘어질 줄이 아닌 상대편(? 반대편?)에 있는 줄에 "rowspan='셀 갯수'를 적은 것을 볼 수 있다.