........글/태그 배우기

테이블의 기본적인 활용입니다

미션(cmc) 2010. 5. 22. 10:39

테이블의 기본적인 활용입니다

1] 기초적인 테이블 1단계를 만듭니다
  


  


위 테이블의 작성 예입니다
    


  2] 테이블 안에 또 테이블을 만드는 예입니다
  


  


위 테이블의 작성 예입니다


  


  tbody 명령을 사용하며  테이블안에 또 하나의 칸을 만들고 싶을때 마다
  그 수많큼의 테이블에 이 명령어를 적용합니다

아래는 보기입니다
  


  


위 테이블의 작성 예입니다
 


  


3] 테이블을 옆으로 두칸 만들어 봅니다
  


  
1칸 2칸


위 테이블의 작성 예입니다


  
1칸 2칸


이렇게 td명령 소스를 작성하면 칸이 만들어지는데 원하는 칸 많큼의
수를 위의 td명령 작성식대로 하면 됩니다
예로 6칸차리입니다


  
1칸 2칸 3칸 4칸 5칸 6칸


위의 소스 예입니다


  
1칸 2칸 3칸 4칸 5칸 6칸


테이블의 아래로 두칸입니다
  


  
1칸
2칸


   소스입니다
     


  
1칸
2칸


아래 두칸 옆으로 두칸 합해서 4칸입니다
 


  
위쪽1칸 위옆2칸
아래2칸 옆에2칸


소스입니다


  
위쪽1칸 위옆2칸
아래2칸 옆에2칸


위쪽 칸을 하나로 합칩니다


  
위쪽1칸합
아래2칸 옆에2칸


소스입니다


  
위쪽1칸
아래2칸 옆에2칸


아래쪽 두칸을 합칩니다


  
위쪽1칸 위옆2칸
아래2칸합


소스입니다


  
위쪽1칸 위옆2칸
아래2칸합


  왼쪽 칸 위와 아래를 합칩니다


  
왼쪽1칸 위옆2칸
옆에2칸


소스입니다


  
왼쪽1칸 위옆2칸
옆에2칸


오른쪽칸 위와 아래를 합칩니다


  
위쪽1칸 2칸합
아래2칸


소스입니다


  
위쪽1칸 2칸합
아래2칸


이런식으로 테이블의 칸을 나누고  칸을 지정하는 td명령어속에다
각각의 원하는 태그를 적용하면 되겠지요
예제 입니다


  




  테이블의 아래로 4칸입니다
 


  
1칸
2칸
3칸
4칸


  소스입니다


  
1칸
2칸
3칸
4칸

 
4] 1항의 테이블에 배경색을 그림으로 바꿉니다


  


  배경그림을 바꾼 소스 예입니다


실제 이미지 크기입니다

5] 2항의 테이블에 배경색을 그림으로 바꿉니다
  


  





위 테이블의 작성 예입니다 배경색을 그림으로 바꾼 소스 보기입니다 실제 이미지 크기입니다 6] 3항의 배경색을 그림으로 바꿉니다
1칸2칸
7] 테이블의 두께에 따른 변화입니다 border 값을 0로 지정했을때
위 테이블과 같은 효과를 이렇게도 합니다
마퀴 태그에 폭과 높이를 지정하고 배경색을 지정해 주면 이렇게 됩니다
위 마퀴태그의 예입니다
마퀴 태그에 폭과 높이를 지정하고 배경색을 지정해 주면 이렇게 됩니다
border 값을 0로 지정하고 배경그림을 넣을때
border 값을 0로 지정하고 배경그림과 색을 넣었을때
실제 사용된 이미지 크기입니다 border 값을 1로 지정했을때
border 값을 5로 지정했을때
border 값을 10로 지정했을때
border 값을 10로 지정하고 밝은부분과 어두운 부분을 나누어서 색을 지정했을 때
위 테이블의 소스 예입니다
border 값을 10로 지정하고 밝은부분과 어두운 부분을 나누어서 색을 지정하고 table에 배경그림을 지정해 주었을 때
위항의 소스 예 입니다
실제 사용된 이미지 크기입니다 이렇게 이미지 크기는 작고 하나이지만 배경그림으로 테이블 안에 삽입 할 경우에는 테이블 크기많큼 채워집니다 예로 이미지 하나를 더 사용해 보겠습니다
8] 테이블에서의 간격과 여백을 나타냅니다 태그 명령어는 sellspacing=셀간의 간격을 sellpadding=셀 안쪽의 여백을 지정해 줍니다 2항의 테이블입니다
이 테이블에 셀의 간격과 여백을 0으로 지정해 줍니다 위 테이블과 비교해 보세요
이 테이블에 셀의 간격과 여백을 10으로 지정해 줍니다 위 테이블과 비교해 보세요
위 테이블의 소스 보기입니다 내용 중 숫자를 바꾸어 보시면 되겠지요
위 테이블에 배경그림을 넣을 경우입니다