0x12_ HTML Tables

HTML Tables allow web authors to arrange date into raws and comlumns

01_ Defining an HTML Table

• <tr>태그는 테이블의 행을 정의한다.
• <th>태그는 테이블의 제목을 의미한다.(기본값으로 bold체와 center 정렬)
• <td>태그는 테이블의 데이터/셀을 정의한다.

Note.
<td>요소는 테이블의 데이터를 담기위한 컨테이너다.
또한, <td>요소 안에 모든 HTML 요소들을 담을 수 있다.

02_ Adding a Border

• 테이블 테두리를 명시하지 않으면, 테두리 없이 표가 보이게 된다.
• 테두리는 CSS property를 사용하여 설정한다.

Ex)
table, th, td{
	border: 1px solid #000;
}
- 테이블과 셀까지 함께 border를 적용해야함.

03_ Adding Border Spacing

• Border spacing은 셀 사이의 공간을 명시한다.

Ex)
table{
	border-spacing: 5px;
}
- 테이블에 collapsed border를 적용한다면, 위 속성은 영향을 줄 수 없다.

04_ Cells that Span Many Columns

• 열병합을 사용하고 싶을 때, colspan attribute를 사용한다.

05_ Cells that Span Many Rows

• 행병합을 사용하고 싶을 때, rowspan attribute를 사용한다.

06_ Adding a Caption

• 테이블의 제목을 추가할 때, caption 태그를 사용한다.
• caption 태그는 table 태그 다음에 바로 위치해야한다.