HTML - Table 태그 정리

191218 수업 내용 정리

---

 

           <table> 태그 : 표를 만들 때 사용함 

               ▷ 속성 : border: 테두리 선의 굵기, 픽셀 수로 지정

                               width, height : pixel/%(모니터의 n%로 분할됨)로 지정,

                               cellspacing : 셀(cell)간 거리 (default = "0")

                               cellpadding : 셀 - 입력된 문자 사이의 거리 (default = "0")  

                ▷ 화면에서 표 정렬하는 법: <center>태그로 <table>태그 전체를 묶어주기

 

---

           

                <tr> : 행(가로줄)을 만들 때 사용   

                <td> : 열(세로줄)을 만들 때 사용 
                <th> : table heading, 표의 제목을 둘 때 사용, 문자가 가운데 정렬되며 진하게 표시됨  
                ▷ 속성 align : "left", "center", "right" 수평 정렬
                                          valign : "top", "middle", "bottom" 수직 정렬
                                          두 속성을 이용해서 원하는 행, 칸 내의 문자열을 정렬할 수 있음
                                         ※ align 속성을 테이블에 적용시 모니터에서 표출되는 표의 위치를 결정

                                          bgcolor : 셀의 색을 지정, 색 이름, RGB로 값을 할당, table, tr, td, th에 모두 적용 가능

 

                        ※셀 병합하는 방법 : colspan : "합칠 셀 개수"를 값으로 지정, 해당 수만큼 가로로 셀 병합

                                                               ex) <td colspan="2"></td> : 가로로 2칸을 합침 

                                                               rowspan : 세로 병합, colspan과 동시에 사용 가능​

 

                ※ 공백란을 만들고 싶을 때 :  &nbsp(공백) 추가  

 

---

                <caption> : 테이블에 제목을 붙여줌, <table>안에 사용

 

---

table 태그에 대한 대략적인 설명 요약했습니다.

셀 병합의 경우, 막상하려면 복잡한 면이 있기 때문에 실습을 해보는 것이 중요해 보입니다.