표를 만드는 태그
<table> 태그 (MDN)
:: 표의 시작과 끝을 나타내는 태그.
:: 기본 스타일에서는 테두리가 표시되지 않는다.
<caption> 태그 (MDN)
:: 표의 제목을 나타낸다.
:: <table> 태그의 첫번째 자식이어야 한다.
:: 표의 상단에 가운데 정렬로 표시된다.
<tr> 태그 (MDN)
:: 표의 행(row: 가로줄)을 나타내는 태그.
:: <table> 태그 안에 사용한다.
<th> 태그 (MDN)
:: 표에서 제목셀의 역할을 하는 셀 한칸을 나타내는 태그.
:: 전역 속성인 id 속성을 사용해서 id를 지정해두면 headers 속성으로 관련된 셀임을 나타낼 수 있다.
:: abbr 속성을 사용하여 화면엔 표시되지 않지만 접근성에 도움을 주는 셀 내용에 대한 간략한 설명을 추가할 수 있다.
:: scope 속성을 사용하여 화면엔 표시되지 않지만 이 제목셀이 어떤 셀들과 연관되는지 표시할 수 있다.
:: <td>태그와 마찬가지로 colspan과 lowspan 속성을 이용해 셀들을 합칠 수 있다.
<td> 태그 (MDN)
:: 표의 셀 한칸을 나타내는 태그.
:: colspan과 rowspan 속성을 이용해서 셀을 합칠 수 있다.
:: headers 속성을 이용하면 화면에 표시되지는 않지만 관련된 th 셀을 표시할 수 있다.
<thead> 태그 (MDN)
:: 표의 내용을 의미론적으로 구조화할 때 표의 상단 부분을 나타낼 때 사용하는 태그.
:: tbody 태그 앞에 위치해야 한다.
<tbody> 태그 (MDN)
:: 표의 내용을 의미론적으로 구조화할 때 표의 본문 부분을 나타낼 때 사용하는 태그.
:: thead 태그 뒤, tfoot태그 앞에 위치해야한다.
<tfoot> 태그 (MDN)
:: 표의 내용을 의미론적으로 구조화할 때 표의 하단 부분을 나타낼 때 사용하는 태그.
:: tbody 태그 뒤에 위치해야한다.
-- 크롬으로 실행해본 결과 <thead><tbody><tfoot>의 순서를 뒤섞어서 작성해도 자동으로 정렬되어 표현되었다.
<colgroup> 태그 (MDN)
:: col 태그를 묶기 위해서 사용되는 구획 태그.
:: caption태그 뒤, 첫번째 tr태그나 thead태그 앞에 위치해야한다.
<col> 태그 (MDN)
:: 표 내부에서 하나의 열이나 여러개의 열을 묶어서 스타일을 지정할 때 사용하는 태그.
:: 닫는 태그는 없다.
:: 사용된 순서대로 표의 열을 첫번째부터 순서대로 가리키며 span 태그로 묶으면 그 갯수만큼의 열을 가리킨다.
:: caption태그 뒤, 첫번째 tr태그나 thead태그 앞에 위치해야한다.
:: 사실상 CSS를 위한 태그라서 예제 코드에 CSS가 포함되었다.
-- 행을 묶는 태그는 tr태그로 충분하므로 존재하지 않는다.
표를 만드는 예제
See the Pen table example 1 by lypi (@Lypi) on CodePen.
썸네일용