[HTML] 테이블 (table 태그)

HTML Table

HTML에서 표를 만들 때 사용하는 태그. <table> 태그로 시작한다. 각 테이블의 행은 <tr> 태그로 시작된다. 각 테이블 요소의 분류나 제목에 해당하는 table header는 <th> 태그로 정의된다. 별다른 설정이 없으면 table header는 bold 속성과 가운데 정렬된다. 그리고 각 테이블의 요소는 <td> 태그로 정의된다. 

 

 

<td> 요소에 들어가는 값들은 text 뿐만 아니라 images, lists, 다른 테이블까지 들어갈 수 있다. 또한 table 태그에 width 속성을 통해 테이블의 폭을 조정할 수 있다.

---

Table - Border

테이블에 Border(테두리 선) 속성 적용하기. Default 값 : 없음.

위와 같이 각 table, th, td 요소에 전부 테두리 선을 생성한다.

이게 보기 좀 그렇고 한 줄로만 나타내고 싶으면 collapse 속성을 이용하면 된다. 각 요소들끼리 간격을 두고 싶을 때는

border-spacing 속성을 통해 간격을 조정한다.

 

 

여기서 각 요소들을 가운데 정렬이나 왼쪽 정렬을 하고 싶으면 text-aling 속성을 이용한다.

---

마지막으로, CSS를 통해 표를 디자인할 수 있다. 테이블이 여러 개 일때, 해당 테이블에 아이디를 주고 CSS에서는 그 아이디를 통해 HTML요소를 제어한다.

id 부여