HTML에서 표(Table)를 만드는 방법을 이해하는 것은 웹 페이지에서 데이터를 구조화하고 시각적으로 보기 쉽게 만드는 데 매우 중요합니다.
표는 행(row)과 열(column)로 구성되며, 그 교차점에 셀(cell)이 위치합니다
HTML에서 표를 만들기 위해 사용되는 주요 태그들과 속성에 대해 설명하겠습니다.
기본 HTML 구조
<!DOCTYPE html> <!-- HTML5 문서 형식을 선언 --> <html lang="en"> <!-- 문서의 언어를 영어로 설정 --> <head> <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 UTF-8로 설정 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 화면 크기에 맞춰 콘텐츠를 조정 --> <title>표 관련 태그</title> <!-- 문서 제목 --> </head> <body>
표를 구성하는 기본 태그
<!-- 표: 웹 문서에서 자료를 정리할 때 주로 사용 행과 열로 이루어져 있고, 행과 열이 만나는 지점을 셀이라고 한다. 표를 만들기 위한 태그: <table>, <tr>, <td>, <th> <table></table>: 기본적인 표를 생성해주는 태그 <tr></tr>: 표의 한 행을 나타내는 태그 <th></th>: 표의 제목 셀을 나타내는 태그 -> 글자를 굵게, 가운데 정렬 <td></td>: 표의 일반 셀을 나타내는 태그 * th*3 하면 3개가 한 번에 생성된다 (td도 동일) --> <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></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>
<table>태그는 기본적인 표를 생성합니다.<tr>태그는 표의 한 행(row)을 나타냅니다.<th>태그는 표의 제목 셀(header cell)을 나타내며, 기본적으로 글자가 굵고 가운데 정렬됩니다.<td>태그는 표의 일반 셀(data cell)을 나타냅니다.
기본적인 표 만들기
<h1>기본적인 표 만들기</h1> <table border="1"> <!-- border 속성: 표에 테두리 두께를 지정 --> <caption><b>휴대폰의 종류</b></caption> <!-- 표의 제목을 표의 상단에 표시 --> <tr> <th>모델명</th> <th>제조사</th> <th>홈페이지</th> </tr> <tr> <td>갤럭시</td> <td>삼성</td> <td>https://www.samsung.com/sec/</td> </tr> <tr> <td>아이폰</td> <td>애플</td> <td>https://www.apple.com/sec/</td> </tr> <tr> <td>픽셀</td> <td>구글</td> <td>https://store.google.com/gb/category/phones?hl=en-GB&pli=1</td> </tr> </table>
<caption>태그는 표의 제목을 지정하여 표의 상단에 표시합니다.<table>태그의border속성은 표에 테두리를 추가하며, 숫자로 두께를 지정할 수 있습니다.
표의 행과 열을 합치는 속성
<h1>표의 행과 열을 합치는 속성</h1> <h3>이력서</h3> <table border="1"> <tr> <td width="130" height="130" rowspan="2" colspan="2">사진</td> <!-- rowspan과 colspan을 사용하여 셀을 합침 --> <td width="80">이름</td> <td width="200">전제민</td> </tr> <tr> <td>연락처</td> <td>010-0000-0000</td> </tr> <tr> <td width="70" height="50">주소</td> <td colspan="3">경기도 군포시 xxx xxxx xxxx</td> <!-- colspan을 사용하여 열을 합침 --> </tr> <tr> <td width="130">자기소개</td> <td colspan="3">안녕하세요 반갑습니다 오늘은 ㅇㅁ장ㅈ매아ㅐㅁ장ㅈ매</td> </tr> </table>
colspan="2": 두 개의 열을 합칩니다.rowspan="2": 두 개의 행을 합칩니다.
표의 구조를 나누는 태그들
<table border="1"> <thead> <!-- 표의 머리 부분을 정의 --> <tr> <th>이름</th> <th>나이</th> <th>주소</th> </tr> </thead> <tbody> <!-- 표의 본문 부분을 정의 --> <tr> <td>전제민</td> <td>23</td> <td>경기도 남양주시 xxx</td> </tr> <tr> <td>박지수</td> <td>30</td> <td>경기도 하남시 xxx</td> </tr> </tbody> <tfoot> <!-- 표의 하단 부분을 정의 --> <tr> <td>총인원</td> <td colspan="2">2명</td> </tr> </tfoot> </table>
<thead>: 표의 머리 부분을 정의합니다.<tbody>: 표의 본문 부분을 정의합니다.<tfoot>: 표의 하단 부분을 정의합니다. 하단 부분은 주로 요약 정보를 표시하는 데 사용됩니다.
초보부터 시작하는 개발자 생활