<테이블>
HTML <table> 태그
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>0</td> </tr> <tr> <td>February</td> <td></td> </tr> </table> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
모든 주요 브라우저는 <table> 태그를 지원합니다.
태그 정의 및 사용 지침
<table> 태그 정의 HTML 테이블
HTML 테이블에는 <tr>, <th> 요소가 하나 이상 포함되어 있습니다.
<tr> 요소는 테이블 행을 정의하고, <th> 요소는 테이블 헤더를 정의하며, <td> 요소는 테이블 셀을 정의합니다.
보다 복잡한 HTML 테이블에는 <caption>, <col>, <colgroup>, <thead>, <tfoot> 및 <tbody> 요소가 포함될 수도 있습니다.
HTML 4.01과 HTML5의 차이점
HTML5에서는 "border" 속성만 지원되며 "1" 또는 "" 값만 허용됩니다.
Attribute
| Attribute | Value | Description |
|---|---|---|
| align | left 센터 그렇죠 | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 주변 요소를 기준으로 테이블 정렬을 지정합니다. |
| bgcolor | rgb(x,x,x) #xxxxxx Colorname | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 테이블의 배경색을 지정합니다. |
| 국경 | 1 "" | 표 셀에 테두리가 있는지 지정합니다. |
| cellpadding | pixels | HTML5는 지원되지 않습니다. 셀 가장자리와 내용 사이의 공간을 지정합니다. |
| cellspacing | pixels | HTML5는 지원되지 않습니다. 셀 사이의 공간을 지정하세요. |
| frame | void 위 아래 히사이드 ㅋㅋㅋ rhs 비사이드 상자 Border | HTML5는 지원되지 않습니다. 외부 테두리의 어느 부분이 표시되는지 지정합니다. |
| 규칙 | 없음 그룹 행 열 모두 | HTML5는 지원되지 않습니다. 내부 테두리의 어느 부분이 표시되는지 지정합니다. |
| summary | text | HTML5는 지원되지 않습니다. 양식 요약을 처방합니다. |
| 너비 | 픽셀 % | HTML5는 지원되지 않습니다. 테이블의 너비를 지정하세요. |
전역 속성
<table> 태그는 HTML 전역 속성을 지원합니다.
이벤트 속성
<table> 태그는 HTML 이벤트 속성을 지원합니다.
사용해 보기 - 예
Title in table
이 예는 표 제목을 표시하는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>表格使用水平标题:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> </tr> </table> <h4>表格使用垂直标题:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> </table> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
빈 셀
이 예에서는 " "를 사용하여 내용이 없는 셀을 처리하는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table border="1"> <tr> <td>一些文本</td> <td>一些文本</td> </tr> <tr> <td></td> <td>一些文本</td> </tr> </table> <p>如果在上面的空单元格中没有边框，你可以插入一个空格 ： </p> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
제목이 있는 테이블
이 예에서는 캡션이 있는 테이블을 보여줍니다.
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>0</td> </tr> <tr> <td>February</td> <td></td> </tr> </table> </body> </html>
예제 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
테이블의 라벨
이 예는 다른 요소 내에 요소를 표시하는 방법을 보여줍니다.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table border="1"> <tr> <td> <p>这是一个段落</p> <p>这是另一个段落</p> </td> <td>这个单元格包含一个表格: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>这个单元格包含一个列表 <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
행이나 열에 걸쳐 있는 테이블 셀
이 예에서는 행이나 열에 걸쳐 있는 테이블 셀을 정의하는 방법을 보여줍니다. .
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h4>单元格跨两格:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>单元格跨两列:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>
예제 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
관련 기사
HTML 튜토리얼: HTML 테이블
HTML DOM 참조 매뉴얼: 테이블 객체
