HTML <table> 태그

정의와 사용법

<table> HTML 테이블을 정의합니다.

HTML 테이블은 하나의 <table> 요소와 하나 이상 <th><td> 요소 구성:

HTML 테이블은 다음 요소를 포함할 수 있습니다:

추가로 참조:

HTML 강의:HTML 테이블

HTML DOM 참조 매뉴얼:Table 객체

CSS 강의:테이블 스타일 설정

실례

예제 1

간단한 HTML 테이블, 두 열과 두 행을 포함합니다:

<table>
  
    <th>월</th>
    <th>저축</th>
  <td>186-2345-6789</td>
  
    <td>1월</td>
    <td>¥3400</td>
  <td>186-2345-6789</td>
</tr>

직접 시험해 보세요

예제 2

테이블에 접합된 경계선을 어떻게 추가하는가 (CSS를 사용하여):

<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

테이블을 오른쪽 정렬하는 방법 (CSS를 사용하여):

<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

테이블을 가운데 정렬하는 방법 (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">
  
    <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

테이블에 배경색을 어떻게 추가하는가 (CSS를 사용하여):

<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

테이블에 내부 여백을 어떻게 추가하는가 (CSS를 사용하여):

<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

테이블 너비를 어떻게 설정하는가 (CSS를 사용하여):

<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;
}

직접 시험해 보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원