[HTML] 부모 태그와 자식 태그를 알아보자 :: <table> 태그

[HTML 부모 자식 태그]

 

영어를 배울때 문법에 맞게 말하는게 중요하듯 HTML에도 문법이 있다.

구조상 상위에 위치한 태그를 부모 태그, 하위에 위치한 태그를 자식 태그라고 한다.

부모태그를 사용하여 자식태그를 grouping 할 수 있고 경계를 줄 수 있다. 부모태그는 자식태그가 존재하기 위한 전제 조건이된다.

 

(ex) <li> 태그 - <ul> 혹은 <ol> 태그 는 부모 자식 간의 관계이다 [2단계]

(ex) <td> 태그 - <tr> 태그 - <table> 태그는 부모 자식 간의 관계이다 [3단계]

 

빠르게 table 태그를 활용한 요가 수업 시간표를 만들었다.

 

 

근데 무언가 이상함을 감지. 테이블 테두리.. 어딨니?

 

테두리 찾으려고 google 에 ' html table line tag ' 라고 검색했다가 아래 페이지를 발견했다.

 

 

 

알게된 점 

 - <tr> element defines a table row

 - <th> element defines a table header

 - <td> element defines a table cell

 

테두리는 CSS 를 이용해서 효과를 줘야 한다.

CSS 는 아직 안 들어갔으니까, 사이트에 있는 예제문을 보고 어림잡아 따라해보았다.

 

 

table 헤더 부분은 <th>로 태그 바꾸고, table border 굵기/색상을 넣었다

 

 

table CSS 속성 안에 border-collapse 값이 있더라.

예제에서는 collapse 로 지정되어 있던데, collapse / separate 둘 중 하나를 선택하는 것 같아

separate를 적용하니 각 값을 둘러싼 테두리가 하나 더 생겼다.

 

 

 

표(table)와 셀(td) 사이에 경계가 생김