CSS.19 // 테이블(table)태그 .01

채유성·2025년 1월 30일
post-thumbnail

table ★

table태그는 표를 만드는 태그로, 웹사이트에서 게시판과 같은 영역을 만들때 사용한다.
또한 일반적인 표를 만들때에 주로 사용된다. 
table태그 안에는 자식태그로 tr, td태그를 사용한다. 
모든 태그는 block속성을 가진다.
table태그 안에서 tr은 칸들을 묶어주는 한 줄을 의미하고, td는 한 칸을 의미한다.
한 행의 td의 갯수는 모두 동일해야 한다.

[기본형]

<table> -> 표 전체
  <tr> -> 행. 칸들을 묶어주는 한 줄
     <td>내용</td> -> 열. 1칸
  </tr>
</table>

th, caption, figcaption

표를 만들다보면 표에 제목을 넣고 싶을때가 있다. 
표에 제목을 넣을때에는 행이나 열의 제목을 뜻하는 th태그나 표전체의 제목을 지정하는 
catption, figcaption 태그를 사용한다.
하지만 표 전체 제목을 지을 때 반드시 이 태그를 써야하는 것은 아니고 
h2~h6까지의 태그로 나타내도 된다.
th는 제목을 나타내는 한 칸을 지정한다. 
또한 글자가 굵게 표시되고, 칸의 중앙에 나오는 것이 기본값이다.
td태그는 내용칸을 의미하고 글자는 왼쪽정렬되어 표시된다.

caption태그는 표 전체에 제목을 붙일때 사용한다. 
table태그의 바로 안쪽에 출력해야 한다.
figcaption태그도 표 전체에 제목을 붙일때 사용하고 table태그의 위나 아래쪽에 출력한다.

ex)

0개의 댓글