① HTML에서 테이블(Tables)는 데이터를 행과 열로 배열시켜 표로 만들어준다.
㉠ <table> 태그로 HTML에서 사용되는 표를 생성할 수 있다.
㉡ <table> 요소를 구성하는 태그는 <tr> 태그, <th> 태그, <td> 태그가 있다.
ⓐ <tr> 태그는 table row를 의미하며, 테이블에서 열을 구분해준다.
ⓑ <th> 태그는 표 헤더 셀(table header cell)을 의미하며, 열의 제목을 나타낸다. 또한, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 된다.
ⓒ <td> 태그는 표 데이터 셀(table data cell)을 의미하며, 테이블의 열을 각각의 셀로 나누어 준다.
ⓓ 태그는 필수 요소는 아니지만, 사용하는 것이 권장되는 태그이다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <!-th가 없는 표-> | |
| <table> | |
| <tr> | |
| <td> | |
| 1행 1열 | |
| </td> | |
| <td> | |
| 1행 2열 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 2행 1열 | |
| </td> | |
| <td> | |
| 2행 2열 | |
| </td> | |
| </tr> | |
| </table> | |
| </body> |
| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <table> | |
| <tr> | |
| <td> | |
| 1행 1열 | |
| </td> | |
| <td> | |
| 1행 2열 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 2행 1열 | |
| </td> | |
| <td> | |
| 2행 2열 | |
| </td> | |
| </tr> | |
| </table> | |
| <!-th가 있는 표-> | |
| <table> | |
| <tr> | |
| <th> | |
| 1행 1열 | |
| </td> | |
| <td> | |
| 1행 2열 | |
| </td> | |
| </tr> | |
| <tr> | |
| <th> | |
| 2행 1열 | |
| </td> | |
| <td> | |
| 2행 2열 | |
| </td> | |
| </tr> | |
| </table> | |
| </body> |
| 1행 1열 | 1행 2열 |
| 2행 1열 | 2행 2열 |
| 1행 1열 | 1행 2열 |
|---|---|
| 2행 1열 | 2행 2열 |
㉢ colspan 속성을 사용하여 테이블의 열을 합칠 수 있다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <table border> | |
| <tr> | |
| <th colspan="3"> | |
| 음식 | |
| </th> | |
| </tr> | |
| <tr> | |
| <td> | |
| 김치 | |
| </td> | |
| <td > | |
| 피자 | |
| </td> | |
| <td> | |
| 탕수육 | |
| </td> | |
| </tr> | |
| </table> | |
| </body> |
| 음식 | ||
|---|---|---|
| 김치 | 피자 | 탕수육 |
㉣ rowspan 속성을 이용해 테이블의 행을 합칠 수 있다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <table border> | |
| <tr> | |
| <th rowspan="3"> | |
| 음식 | |
| </th> | |
| <td> | |
| 김치 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 치즈 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 볶음밥 | |
| </td> | |
| </tr> | |
| </table> | |
| </body> |
| 음식 | 김치 |
|---|---|
| 치즈 | |
| 볶음밥 |
㉤ <caption> 태그를 이용해 테이블 상단에 제목이나 짧은 설명을 붙일 수 있다.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <table border> | |
| <caption>맛있는 음식</caption> | |
| <tr> | |
| <th rowspan="3"> | |
| 음식 | |
| </th> | |
| <td> | |
| 치킨 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 피자 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| 햄버거 | |
| </td> | |
| </tr> | |
| </table> | |
| </body> |
| 음식 | 치킨 |
|---|---|
| 피자 | |
| 햄버거 |
'All about WEB > All about HTML' 카테고리의 다른 글
| 19. HTML ID (0) | 2021.07.18 |
|---|---|
| 18. HTML 클래스(Class) (0) | 2021.07.18 |
| 17. HTML 리스트(Lists) (0) | 2021.07.18 |
| 16. HTML 이미지(Images) (0) | 2021.07.18 |
| 15. HTML Links (0) | 2021.07.17 |
