HTML table 태그 알아보기

html table 태그에 대해서 알아보도록 하겠습니다.

table은 표를 그리는 태그로 <tr> 태그와 <td> 로 구성 됩니다.

1. table 속성

  - Align : 정렬 을 지정 할 수 있습니다. ( left , right , center )

  - Background : 표 배경 이미지를 지정 할 수 있습니다.( 이미지경로 )

  - Bgcolor : 표 배경 색깔을 지정 할 수 있습니다.

  - Border : 표 테두리 두께를 지정 할 수 있습니다.

  - Bordercolor : 표 테두리 색깔을 지정 할 수 있습니다.

  - Cellpadding : 셀 경계와 셀 안의 텍스트 사이의 간견을 지정 할 수 있습니다.

  - Cellsapcing : 셀과 셀 사이 간격을 지정 할 수 있습니다.

  - Height : 표 전체 높이를 지정 할 수 있습니다.

  - Width : 표 전체 넓이를 지정 할 수 있습니다.

2. table 실습

  

 > table에 align속성을 활용하여 인터넷 익스플로러 중앙에 위치하게 하였습니다.

  > table에 bgcolor속성을 활용하여 테이블 배경색을 노란색으로 하였습니다.

  > table에 width속성을 활용하여 익스플로러  넓이에 2/1 크기로 넓이를 지정 하였습니다.

     (익스플로러 크기가 작아지면 테이블 크기도 작아짐, 커지면 테이블 크기도 커짐)

  > table에 height속성을 활용하여 익스플로러 높이에  5/1 크기로 높이를 지정 하였습니다.

3. 행 병합 및 셀 병합

  - rowspan : 행을 병합하는 속성 입니다.

  - colspan : 열을 병합하는 속성 입니다.

> table border , align , bgcolor , width , height 는 위의 예제와 동일하게 설정 하였습니다.

 > rowspan 이용하여 1행1열 과 2행1열 을 병합하였습니다. (스타일을 활용하여 중앙에 정렬 하였습니다.)

 > colspan 이용하여 3행1열,2열,3열 을 병합하였습니다. (스타일을 활용하여 중앙에 정렬 하였습니다.)

html table 태그에 대해서 알아보았습니다.

다음에는 다른 태그에 대해서 알아보도록 하겠습니다.