반응형
HTML 테이블은 각 열, 행 또는 전체 테이블의 크기가 다를 수 있다.
아래 그림은 다양한 테이블 크기의 예시이다.
width 또는 height 속성과 함께 style 속성을 사용하여 테이블, 행 또는 열의 크기를 지정한다.
HTML 테이블 너비(Table Width)
표 너비를 100%로 설정한다:
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>100% 너비 HTML 테이블</h2> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
참고: 너비에 대한 크기 단위로 백분율을 사용하는 것은 이 요소가 부모 요소(이 경우에는 <본체> 요소)와 비교되는 너비를 의미한다.
HTML 테이블 열 너비
특정 열의 크기를 설정하려면, <th> 또는 <td> 요소에 style 특성을 추가한다:
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>첫 번째 열을 테이블 너비의 70%로 설정</h2> <table style="width:100%"> <tr> <th style="width:70%">이름</th> <th>성</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
HTML 테이블 행 높이
특정 행의 높이를 설정하려면 테이블 행 요소에 스타일 특성을 추가한다:
| <!DOCTYPE html> <html> <style> table, th, td { border:1px solid black; border-collapse: collapse; } </style> <body> <h2>첫 번째 열을 테이블 너비의 70%로 설정</h2> <table style="width:100%"> <tr> <th>이름</th> <th>성</th> <th>나이</th> </tr> <tr style="height:200px"> <td>길동</td> <td>홍</td> <td>50</td> </tr> <tr> <td>영희</td> <td>이</td> <td>94</td> </tr> <tr> <td>철수</td> <td>김</td> <td>80</td> </tr> </table> </body> </html> |
마무리
이번 글에서는 HTML 테이블의 행의 높이와 열의 너비 등을 설정하는 방법에 대해 살펴보았다.
꼭 실습하며 HTML문서 작성하는데 익숙하기를 바란다.
모두 화이팅하세요!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 테이블 채우기와 간격(HTML Table Padding & Spacing) (0) | 2023.05.09 |
|---|---|
| HTML 테이블 헤더(Table Headers) (0) | 2023.05.08 |
| HTML 테이블 테두리(Table Borders) (0) | 2023.05.06 |
| HTML 테이블(Table) (0) | 2023.05.05 |
| HTML 페이지 제목(Page Title) (0) | 2023.05.04 |
댓글