17. HTML 테이블(Tables)

① HTML에서 테이블(Tables)는 데이터를 행과 열로 배열시켜 표로 만들어준다.

  ㉠ <table> 태그로 HTML에서 사용되는 표를 생성할 수 있다.

  ㉡ <table> 요소를 구성하는 태그는 <tr> 태그, <th> 태그, <td> 태그가 있다.

    ⓐ <tr> 태그는 table row를 의미하며, 테이블에서 열을 구분해준다.

    ⓑ <th> 태그는 표 헤더 셀(table header cell)을 의미하며, 열의 제목을 나타낸다. 또한, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.

    ⓒ <td> 태그는 표 데이터 셀(table data cell)을 의미하며, 테이블의 열을 각각의 셀로 나누어 준다.

    ⓓ 태그는 필수 요소는 아니지만, 사용하는 것이 권장되는 태그이다.

 

1행 1열	1행 2열
2행 1열	2행 2열

 

1행 1열	1행 2열
2행 1열	2행 2열

1행 1열	1행 2열
2행 1열	2행 2열

  ㉢ colspan 속성을 사용하여 테이블의 열을 합칠 수 있다.

 

음식
김치	피자	탕수육

  ㉣ rowspan 속성을 이용해 테이블의 행을 합칠 수 있다.

 

음식	김치
	치즈
	볶음밥

  ㉤ <caption> 태그를 이용해 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.

 

맛있는 음식

음식	치킨
	피자
	햄버거