HTML <table> 태그
예시
2개의 열과 2개의 행을 포함하는 간단한 HTML 테이블:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
태그 는 <table>HTML 테이블을 정의합니다.
HTML 테이블은 하나의 <table>요소와 하나 이상의 <tr> ,
<th> 및 <td> 요소로 구성됩니다.
<tr> 요소는 테이블 행을 정의하고 <th> 요소는 테이블 헤더를 정의하며 <td> 요소는 테이블 셀을 정의합니다.
HTML 테이블에는 <caption> , <colgroup> , <thead> , <tfoot> 및 <tbody> 요소도 포함될 수 있습니다.
브라우저 지원
| Element | |||||
|---|---|---|---|---|---|
| <table> | Yes | Yes | Yes | Yes | Yes |
전역 속성
<table>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<table>태그는 HTML의 이벤트 속성 도 지원합니다 .
더 많은 예
예시
접힌 테두리를 테이블에 추가하는 방법(CSS 사용):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
예시
표를 오른쪽 정렬하는 방법(CSS 사용):
<table style="float:right">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
표를 가운데 정렬하는 방법(CSS 사용):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table
class="center">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
테이블에 배경색을 추가하는 방법(CSS 사용):
<table style="background-color:#00FF00">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
표에 패딩을 추가하는 방법(CSS 사용):
<html>
<head>
<style>
table, th, td {
border: 1px solid
black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
예시
표 너비를 설정하는 방법(CSS 사용):
<table style="width:400px">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
테이블 헤더를 만드는 방법:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
</tr>
</table>
예시
캡션이 있는 테이블을 만드는 방법:
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
예시
둘 이상의 행 또는 열에 걸쳐 있는 테이블 셀을 정의하는 방법:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th colspan="2">Phone</th>
</tr>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
관련 페이지
HTML 튜토리얼: HTML 테이블
HTML DOM 참조: 테이블 개체
CSS 튜토리얼: 테이블 스타일 지정
기본 CSS 설정
대부분의 브라우저는 <table>다음 기본값으로 요소를 표시합니다.
예시
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}