UI / UX 웹 퍼블리셔 & 프론트엔드 [5] - <table> 태그 심화

저번에 이어 <table> 태그를 더 진행하였다.

 

index5.html - <table>심화

 

border="" 속성

: 테두리를 지정하며 1은 사용, 0은 사용하지 않음을 뜻한다.

  이외 두께, 스타일, 색상도 설정할 수 있다 [1px solid black]

 

ex) <table border="1" width="600" height="150">

→ 테이블의 테두리를 나타내고 가로 600, 세로 150의 크기로 지정한다.

 

 

align="" 속성

: 정렬의 의미를 가지며 <table>, <tr>, <td>에 적용할 수 있다.

 

** left : 왼쪽 정렬

** right : 오른쪽 정렬

** center : 가운데 정렬

 

 

colspan="" / rowspan="" 속성

: 병합의 의미를 가지며 각각 가로, 세로를 뜻한다.

  뒤에 오는 숫자 칸만큼 병합하여 그다음 줄 또는 열에는 해당 칸을 입력하지 않아도 된다.

 

ex)<td colspan="2" rowspan="2">9</td>

→ 이 칸을 기준으로 가로 병합 2칸, 세로 병합 2칸을 하고 내용은 9로 한다. 

 

bgcolor="" 속성

: background-color의 약자로 배경색을 의미한다.

 뒤에는 색과 관련된 단어나 해쉬 코드가 들어간다.

 

ex) green, blue, #FFFFFF

 

index5.html - <table> 심화

cellspacing="" / cellpadding="" 속성

: cellspacing은 셀 간 간격, cellpadding은 셀과 글자의 간격을 뜻한다.

 cellspacing의 숫자가 커질수록, 셀 간 간격이 커져 테두리가 두꺼워질 것이고

 cellpadding의 숫자가 커질수록, 테두리와 글자 간 사이가 넓어진다.

 

▶ 실습에서는 단순히 둘 다 없애기 위해 0을 사용하였다.

 

 

index5.html (결과)

 

테이블의 병합, 글자 정렬 그리고 테두리 설정까지 직접 설정할 수 있는 실습이었다.