[HTML] Table 태그

Table 태그

• table 태그는 블록요소에 해당된다.
• 예전에는(지금은 지양 하는 사항임) 테이블 태그를 가지고 레이아웃을 짜기도 했다고 한다. 배열 형태로 레이아웃을 짜기에 적합한 형태를 제공하므로!.
• table 태그 또한 header, main, footer로 의미론적으로 나눠서 쓸 수 있는데, 이는 table 태그의 자식요소로 thead, tbody, tfoot 요소를 씀으로써 가능하다. 이 때, thead, tfoot은 각각 한개씩 사용해야하지만, tbody는 여러개가 사용가능하다. 하지만, 역시 의미론적인 마크업 요소이기 때눈에 view 특정한 역할을 하지는 않기에 나중에 css를 적용하면서 그 진가(?)가 발휘된다.
  ** 이 때, tbody, thead, tfoot 등의 형제요소로 서로를 써줘야지 thead 다음에 tr 등의 태그가 나와서는 안된다.
• table의 최상위 자식 요소로 caption 태그를 달 수 있는데, 이는 자동으로 가운데 정렬이 되어 테이블의 제목 등을 달 수 있는 태그이다.
  ** caption 태그는 인라인 요소이다.
• 테이블에는 행과 열이 있는데, 이를 마크업하는 태그는 각각 tr태그와 th 혹은 td 태그이다. 여기서 tr태그는 table row의 약어이고, th 태그는 table header 그리고 td는 table data의 축약어이다. tr 통해 행을 표현하고, 그 tr태그의 자식요소로 th 혹은 td 태그를 써서 열을 표현해준다. 이 때, th는 한열 혹은 한 행을 대표하는 열을 나타내는 것이어서 th이고, 나머지 열은 td로 표현한다.
• th 태그에만 쓸 수 있는 attribute가 있는데, 그것은 scope 속성이다. scope 속성에는 "col", "row"를 쓸 수 있는데, 전자는 열을 대표하는 header라는 것이고, 후자는 행을 대표하는 header라는 의미이다. 이역시 view에 영향을 미치지는 않고, 스크린 리더 등에 영향을 미친다.
• th, td 둘다에 쓸 수 있는 attribute로는 colspan과 rowspan 속성이 있다. 전자는 두개의 열의 공간을 차지하면서 하나의 칸으로 쓰고 싶을 때, 엑셀의 셀병합을 열단위로 하는 것으로 colspan="2"라고 해주면, 바로 옆칸과 병합하여 표현된다. 후자는 행을 기준으로 병합하는 것으로 아래 위 칸을 병합하여 하나로 표현한다. 만약 rowspan="3"을 써주면 현재칸부터 아래2칸을 포함해 3칸을 합치게 된다. colspan도 3,4...등 다른 수를 쓸 수 있다.