목록 수정 삭제 쓰기

홈페이지를 제작하는데 있어서 표를 빼놓고는 홈페이지를 만든 다는 생각을 할 수 없을 정도로 table 태그는 아주 중요합니다. 또한 table 태그만 잘만 사용해도 웹 디자인은 따로 할 필요가 없을 정도로 유용한 태그입니다. 표를 잘 이용하면 홈페이지를 아주 간결하고 산뜻하게 꾸밀 수 있답니다. 이러한 table 태그를 잘 하기 위해선 몇가지 속성만 잘 이해하시면 됩니다.......그게 어떤 속성인지는 앞으로 차차 설명하면서 이야기 하기로 하고 기초부터 하나하나 배워보도록 하겠습니다.
 일단 아래 표에 있는 기본명령어와 속성을 한번 쭉~ 읽어보세요. 한번에 외우면 좋겠지만 어디 처음부터 그게 쉽게 되나요?^^ 하나하나 예제와 설명을 들어가며 보신다면 굳이 안 외워도 강좌가 끝날 때쯤이면 머리속에 다 들어 있을 것입니다.
 

기본명령어 속성
<table></table>  테이블 태그에 맨처음과 맨 끝에 들어갑니다. 
<tr></tr>  한 행을 만들어 줍니다. 
<caption></caption>  표에 제목을 나타냄
<td></td>  한 셀을 만들어 줍니다. 
<th><th> 셀 제목을 나타냅니다. 
 부가적 속성  기능
CELLSPACING=수치 셀과 셀사이의  간격 조정
CELLPADDING=수치 셀 내부에 간격 조정
WIDTH=수치 가로 넓이를 지정한다. 
HEIGHT=수치 세로 높이를 지정한다
border=수치 표에 테두리 두께 조정
<TD COLSPAN=가로셀수 ROWSPAN=세로셀수> 셀을 가로,세로로 합치고 싶을때 사용

 자~ 한번 씩 읽어보셨는지요?^^ 한번에 이해가 다 되신다면 제가 더 이상 설명할 필요가 없겠지만 그렇지 않으신 분들이 우리 주위에는 많기(?) 때문에 하나씩 집어가며 설명드리겠습니다. 그전에 먼저 table 태그에 기본 뼈대를 알려드리지요. 이건 꼭 외우시기 바랍니다. 위에 건 못 외워도 아래 table 태그의 기본 뼈대는 반드시 외우셔야 합니다. ^^.......뭐라고요? 군대에서도 외우는 게 없는데 왜 외워야 하냐구요? 흠......그럼 반드시 숙지하시기 바랍니다.^^ 이걸 다 숙지 해놔야 만히 나중에 편합니다.....

기본뼈대 설명 　
<table>
<tr>
<td>
</td>
</tr>
</table>		 <--표를 시작한다는 의미
<--표의 한 행의 시작을 의미
<--표의 한 셀(칸)을 시작한다는 의미
<--표의 한 셀(칸)을 종료한다는 의미
<--표의 한 행을 종료한다는 의미
<--표를 종료한다는 의미 		 　

 먼저 <table></table> 명령어부터 이야기 하지요^^  여러분 태그를 이용해서 웹페이지를 제작할 때 웹페이지 제일 앞에 적어주는 게 뭐였죠? 뭐 였더라????????? 하핫^^ 잘 생각해보세요. 그렇죠! 바로 <html> 을 가장 먼저 적어 줍니다. 그럼 <html>의 기능이 뭐였죠? <html>은 있어도 그만 없어도 그만이지만 HTML을 이용해서 웹페이지의 작성을 시작한다는 것을 의미하죠. 또한 웹페이지의 맨 마지막에도 </html>을 적어 줍으로서 여기서 작성을 끝낸다는 의미를 나타내죠. 이제 감히 잡히시는지......^^ <table></table> 역시 같은 기능을 해줍니다. 바로 "<table> <-- 여기서 부터 표를 만들기 시작해서 </table> <--여기서 표를 끝내준다는 의미를 해줍니다." 그러나 <html></html> 과는 다른 점이 있다면 <table> 에는 부가적인 속성이 붙는 다는 겁니다. 그럼 속성을 한번 봐 볼까요? ^^ 잘 보세요^^
 

속성 기능
border="수치" 표의 테두리 두께를 조정해줍니다.
WIDTH="수치" or "수치%" 표의 가로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용가능
HEIGHT="수치" or "수치%" 표의 세로넓이를 지정된 수치만큼 정해줍니다. 백분율 사용가능
CELLSPACING="수치" 셀의 구분 선굵기를 조정합니다.
CELLPADDING="수치" 셀의 안쪽여백의 간격을 조정합니다.
bgcolor="색명" or "색상코드명" 표의 배경색을 정해줍니다.

 보통 사용할 때
 
 <table border="수치" width="수치" height="수치" cellspacing="수치" cellpadding="수치" bgcolor="색명"> 
 
  이런 식으로 사용을 합니다.  그럼 하나하나 설명해 보죠^^ 먼저 border="수치" 는 설명드린대로 표의 테두리 두께를 조정해줍니다.

border="0" border="1" border="5" border="15" border="15"
표 만
기 들
표 만
기 들
표 만
기 들
표 만
기 들
표 만
기 들

흠......더 이상 설명 안해도 이해가 되시겠죠^^ 근뎅....다른 건 다 이해가 되는데 맨 끝에 있는 색깔이 들어 있는 표는 어떻게 한거냐구요?^^ 흠...관찰력이 매우 뛰어 나신데요.......^^ 테두리 선에 색을 넣는 것은 그렇게 흔하게 사용되는 것이 아니라서 미리 설명을 안했었는데....간단합니다. 부과적으로....태그에....
 bordercolorlight="색명"  bordercolordark="색명" 만 넣어 주시면 됩니다. 굳이 해석하자면 "밝은 테두리색"," 어두운테두리색" 이 되겠지만....밝은 테두리색이 위부분에 오는 거구요.....어두운 테두리색이 아래쪽에 오는 겁니다.^^
 헉....벌써.....여러분의 화면 오른쪽의 스크롤바가 한참 내려왔네요^^ 요즘은 대부분의 휠마우스지만.....전 아직도 그냥 마우스에요 ㅜㅜ 스크롤바 내리기 힘드니깐 다음 페이지로 넘어가서 계속 설명드리지요.....^^

                                                                                                                            출처 : 태그매니아

이 게시물을