반응형
HTML 테이블을 사용하면 웹 개발자가 데이터를 행과 열로 정렬할 수 있다.
| <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <h2>HTML 표</h2> <table> <tr> <th>회사</th> <th>연락처</th> <th>국가</th> </tr> <tr> <td>삼성</td> <td>김철수</td> <td>대한민국</td> </tr> <tr> <td>애플</td> <td>이영희</td> <td>미국</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>BMW</td> <td>박희애</td> <td>독일</td> </tr> <tr> <td>테슬라</td> <td>최슬라</td> <td>캐나다</td> </tr> </table> </body> </html> |
HTML 테이블 정의하기
HTML의 표는 행과 열 내부의 표 셀로 구성된다.
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <h2>HTML 기본 테이블</h2> <table style="width:100%"> <tr> <th>회사</th> <th>연락처</th> <th>국가</th> </tr> <tr> <td>삼성</td> <td>김철수</td> <td>대한민국</td> </tr> <tr> <td>애플</td> <td>이영희</td> <td>미국</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> </table> <p>예제를 더 잘 이해하기 위해 표에 테두리를 추가했습니다.</p> </body> </html> |
테이블 셀(Table Cells)
각 테이블 셀은 <td> 및 </td> 태그로 정의된다.
| <td> | 테이블 데이터를 의미한다. |
<td>와 </td> 사이의 모든 것이 표 셀의 내용이다.
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <h2>TD요소는 테이블 셀을 정의한다.</h2> <table style="width:100%"> <tr> <td>C언어</td> <td>파이썬</td> <td>HTML</td> </tr> </table> <p>예제를 더 잘 이해하기 위해 표에 테두리를 추가했습니다.</p> </body> </html> |
참고: 테이블 셀은 텍스트, 이미지, 목록, 링크, 기타 테이블 등 모든 종류의 HTML 요소를 포함할 수 있다.
테이블 행(Table Rows)
각 테이블 행은 <tr>로 시작하여 </tr> 태그로 끝납니다.
| <tr>은 테이블 행을 의미한다. |
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <h2>TR 요소는 테이블 행을 정의한다.</h2> <table style="width:100%"> <tr> <td>사과</td> <td>수박</td> <td>망고</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> <p>예제를 더 잘 이해하기 위해 표에 테두리를 추가했습니다.</p> </body> </html> |
테이블에 원하는 만큼의 행을 지정할 수 있다. 각 행의 셀 수가 동일한지 확인한다.
참고: 행에 다른 행보다 셀이 적거나 많을 수 있다. 그것에 대해서는 다음 장에서 알게 될 것이다.
테이블 헤더
때때로 당신은 당신의 셀이 표제 셀이 되기를 원합니다. 이러한 경우에는 <td> 태그 대신 <th> 태그를 사용한다:
| <th> 태그는 테이블 헤더 셀을 의미한다. |
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; } </style> <body> <h2>TR 요소는 테이블 행을 정의한다.</h2> <table style="width:100%"> <tr> <th>판매원 1</th> <th>판매원 2</th> <th>판매원 3</th> </tr> <tr> <td>사과</td> <td>수박</td> <td>망고</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table> <p>예제를 더 잘 이해하기 위해 표에 테두리를 추가했습니다.</p> </body> </html> |
HTML 테이블 태그
| 태그 | 내용 |
| <table> | 테이블을 정의한다. |
| <th> | 테이블 내에 셀 헤더를 정의한다. |
| <tr> | 테이블 내에 행을 정의한다. |
| <td> | 테이블 내에 셀을 정의한다. |
| <caption> | 테이블 캡션을 정의한다. |
| <colgroup> | 서식 지정을 위해 테이블에 있는 하나 이상의 열 그룹을 지정한다 |
| <col> | <colgroup> 요소 내의 각 열에 대한 열 속성을 지정한다 |
| <thead> | 테이블의 머리글 내용을 그룹화한다. |
| <tbody> | 표의 본문 내용을 그룹화한다 |
| <tfoot> | 테이블의 바닥글 내용을 그룹화한다 |
마무리
HTML 문서의 테이블에 대한 개략적인 정의와 실습을 통해 이해하였다.
앞으로 대략 7차례에 걸쳐 HTML 테이블 관련 글을 작성할 예정이다.
이어서 꼭 읽어보시고 실습하기를 권한다.
모두 화이팅하세요.~~
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 테이블 크기(Table Sizes) (0) | 2023.05.07 |
|---|---|
| HTML 테이블 테두리(Table Borders) (0) | 2023.05.06 |
| HTML 페이지 제목(Page Title) (0) | 2023.05.04 |
| HTML 파비콘(Favicon) (0) | 2023.05.03 |
| HTML <picture> 요소 (0) | 2023.05.02 |
댓글