HTML <table> 태그
정의와 사용법
<table>
HTML 테이블을 정의합니다.
HTML 테이블은 하나의 HTML 테이블은 다음 요소를 포함할 수 있습니다: HTML 강의:HTML 테이블 HTML DOM 참조 매뉴얼:Table 객체 CSS 강의:테이블 스타일 설정 간단한 HTML 테이블, 두 열과 두 행을 포함합니다: 테이블에 접합된 경계선을 어떻게 추가하는가 (CSS를 사용하여): 테이블을 오른쪽 정렬하는 방법 (CSS를 사용하여): 테이블을 가운데 정렬하는 방법 (CSS를 사용하여): 테이블에 배경색을 어떻게 추가하는가 (CSS를 사용하여): 테이블에 내부 여백을 어떻게 추가하는가 (CSS를 사용하여): 테이블 너비를 어떻게 설정하는가 (CSS를 사용하여): 테이블 헤더를 어떻게 만드는가: 제목이 있는 테이블을 어떻게 만드는가: 다중 행 또는 다중 열의 테이블 셀을 정의하는 방법: 대부분의 브라우저는 다음 기본 값으로 표시합니다 <table>
요소와 하나 이상 、<th> 와 <td> 요소 구성:
추가로 참조:
실례
예제 1
<table>
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
</tr>
예제 2
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
</body>
</html>
예제 3
<table style="float:right">
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
예제 4
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<table class="center">
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
예제 5
<table style="background-color:#00FF00">
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
예제 6
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
</body>
</html>
예제 7
<table style="width:400px">
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
예제 8
<table>
<th>이름</th>
<th>이메일</th>
<th>전화</th>
<td>186-2345-6789</td>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>186-2345-6789</td>
</tr>
예제 9
<table>
<caption>월별 저축</caption>
<th>월</th>
<th>저축</th>
<td>186-2345-6789</td>
<td>1월</td>
<td>¥3400</td>
<td>186-2345-6789</td>
<td>2월</td>
<td>¥4500</td>
<td>186-2345-6789</td>
</tr>
예제 10
<table>
<th>이름</th>
<th>이메일</th>
<th colspan="2">전화</th>
<td>186-2345-6789</td>
<tr>
<td>Bill Gates</td>
<td>bill.gates@example.com</td>
<td>138-1234-5678</td>
<td>186-2345-6789</td>
</tr>
</table>
<table>
태그는 또한 이벤트 속성을 지원합니다 전역 속성。HTML에서의 전역 속성
<table>
태그는 또한 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성。기본 CSS 설정
<table>
요소:
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
브라우저 지원
크롬
에지
파이어폭스
사파리
오페라
크롬
에지
파이어폭스
사파리
오페라
지원
지원
지원
지원
지원