표 만들기 강좌

◈ 표 만들기
표...이거 잘 사용하면...홈페이지를 깔끔하게 만들 때 큰 도움이 됩니다. 엄청 어려운 웹디자인 기술을 익히는 것보다 표를 능숙하게 사용하는 것이 훨씬 낫지요...참고로 야후나 다음 같은 포털사이트를 잘 분석해 보시면 전부 보이지 않는 표로 되어있다는 사실에 놀랄 것입니다...또한 태그대학의 대문도 표로 이루어져 있습니다...표로 되어있으니까 상당히 깔끔하지요?? 따라서 표를 잘 활용하시면 상당히 깔끔하고 정돈된 느낌을 가진 홈페이지를 만들 수 있습니다...게다가 요즘 웹디자인 흐름이 표를 많이 사용하는 흐름이니...^^표를 잘 이용해야지 좋은홈페이지 만들었다는 소리 듣겠져? 본 홈페이지에도 엄청난 표가 사용되고 있습니다. 보이지 않는 표로요...방금전에도 언급했듯이 대문도 표로 이루어져 있구요...지금 이 글도 테이블 속에 있는겁니다...단지 보이지 않게 했을 뿐이지요. 괜히 포토샵 필터 떡칠한 것보다...표를 이용한 것이 더 낫습니다. 포토샵의 필터를 너무 남용하면 오히려 촌스러워 보이져...참고로 저는 본 홈페이지 포토샵을 거의 안썼습니다...저기 태그대학 메인하고 '태그를 쉽고 자세하게 뭐시기...' 해놓은 부분만 포토샵으로 했지 포토샵은 거의 손안댔습니다...전부 표를 이용하고 표 안에 색을 넣어 이뿌게 만들었져...이렇게 하시면 속도도 빠르고 업뎃시 편하고 깔끔해 보인다는 장점이 있습니다...물론 개인홈페이지 같은 경우에는 꼭 이렇게 안해도 좋겠지만...(^^;) 그러면 지금부터 표에 대해 강좌를 시작하겠습니다~
<TABLE></TABLE>	테이블의 시작과 끝을 알리는 태그... 위치, 선의 두께, 색깔 등 많은 옵션을 줄 수 있습니다.
<TR></TR>	가로선-Table Row 의 약자
<TD></TD>	세로선-Table Data 의 약자
<TH></TH>	셀의 제목
<TABLE BORDER=300 CELLSPACING=300>	테두리선 크기,셀과 셀 사이의 간격을 조정합니다. 표를 안보이게 하려면 <TABLE border=0> 이렇게 하시면 되겠져~
<TABLE CELLPADDING=300 BGCOLOR=blue>	셀과 내부 글자와의 간격을 벌려줌, 바탕색을 지정합니다.
<TABLE WIDTH=300 HEIGHT=300>	Table 넓이와 높이 지정합니다.
<TD COLSPAN=300 ROWSPAN=300>	셀을 가로,세로로 합칩니다.
<TD ALIGN=LEFT,CENTER,RIGHT VALIGN=TOP,MIDDLE,BOTTOM>	좌우,중앙,상하 등으로 조정할 수 있습니다.(글자내용을)

그러면...지금부터...여러 예제를 보여 드리겠습니다.

2줄 2칸(가로2세로2)표만들기
첫줄첫칸 첫줄둘째칸 둘째줄첫칸 둘째줄둘째칸	<TABLE border> <TR> <TD>첫줄첫칸</TD> <TD>첫줄둘째칸</TD> </TR> <TR> <TD>둘째줄첫칸</TD> <TD>둘째줄둘째칸</TD> </TR> </TABLE>
표의 정렬 방식(align), 높이(height)와 넓이(width) 조절하기
첫째칸 둘째칸 셋째칸 넷째칸	<TABLE border align="center" height=100 width=200> <TR> <TD>첫칸</TD> <TD>둘째칸</TD> <TD>셋째칸</TD> <TD>넷째칸</TD> </TR> </TABLE>
표의 테두리 선 조절하기
표의 두께를 0으로 했을때
첫째칸 둘째칸 셋째칸 넷째칸	<TABLE border=0> <TR> <TD>첫째칸</TD> <TD>둘째칸</TD> <TD>셋째칸</TD> <TD>넷째칸</TD> </TR> </TABLE>
표의 두께를 10으로 했을때
첫째칸 둘째칸 셋째칸 넷째칸	<TABLE border=10> <TR> <TD>첫째칸</TD> <TD>둘째칸</TD> <TD>셋째칸</TD> <TD>넷째칸</TD> </TR> </TABLE>
표의 바탕색 조절하기
표 전체에 색 넣기
첫째줄첫칸 첫째줄둘째칸 둘째줄첫칸 둘째줄둘째칸	<TABLE border bgcolor="red"> <TR> <TD>첫째줄첫칸</TD> <TD>첫째줄둘째칸</TD> </TR> <TR> <TD>둘째줄첫칸</TD> <TD>둘째줄둘째칸</TD> </TR> </TABLE>
표마다 다른색 넣기
빨간색 파란색 초록색	<TABLE border> <TR> <TD bgcolor="red">빨간색</TD> <TD bgcolor="blue">파란색</TD> <TD bgcolor="green">초록색</TD> </TR> </TABLE>
표에 롤오버 효과내기(표에 마우스를 갖다대보세요~)
마우스대면 색깔이 예쁘게 변하네요	<table border="1" width="205"> <tr> <td width="110" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor=""> <p align="center">&nbsp;</p> </td> <td width="110" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor=""> <p align="center">&nbsp;</p> </td> <tr> <td width="110" onMouseOver=this.style.backgroundColor="#ffcc00" onMouseOut=this.style.backgroundColor=""> <p align="center">&nbsp;</p> </td> <td width="110" onMouseOver=this.style.backgroundColor="#ff6ec7" onMouseOut=this.style.backgroundColor=""> <p align="center">&nbsp;</p> </td> </table>
표에 스타일 효과내기
태그대학^^	<table border="1" width="100"> <tr> <td style="border-width:1pt; border-color:blue; border-style:solid;"> 태그대학^^ </td></tr></table>
이와 같이 스타일 서식을 이용해서도 표를 꾸밀 수가 있는데요... border-width:1pt 는 선굵기를 1pt 로 정하라는 말이구여 border-color:blue 는 선색을 파란색으로 지정하라는 말입니다. border-style:solid 는 선의 종류를 solid 로 한다는 뜻입니다. 그러면 선의 종류도 여러 가지가 있는데 보여 드리겠습니다...^^ 저기 border-style뒤에 진하게 된 부분 있지요? 진하게 된 부분을 아래 글자와 같은 것으로 바꿔주시면 아래와 같은 표의 선이 생긴답니다^^ dotted dashed solid double 아마 많이 보셨을 겁니다...^^ 스타일 서식을 이용해서 저렇게 멋진 표도 만들 수 있는 것이져...스타일 시트 강좌에 보시면 스타일로는 아마 못하는게 없을겁니다...그러면 저 표 스타일의 여러 속성을 보도록 하지요. order-top-width:숫자 border-top-color:색상 border-top-style:선의 종류 border-right-width:숫자 border-right-color:색상 border-right-style:선의 종류 border-bottom-width:숫자 border-bottom-color:색상 border-bottom-style:선의 종류 border-left-width:숫자 border-left-color:색상 border-left-style:선의 종류 위와 같이 방향에 따라 표의 두께,색상,종류 등을 가지각색으로 만들 수 있습니다...참고로 나모 웹에디터에서는 표에서 오른쪽 버튼을 누르고 등록 정보를 누르시고 왼쪽 아래에 스타일 단추를 누르시면 스타일을 활용한 여러 표를 만들 수 있을 것입니다~ 그럼 멋진 표를 만드시길 바라면서...이만...^^