<TD>
HTML <td> 태그
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table border="1"> <tr> <td>Cell A</td> <td>Cell B</td> </tr> </table> </body> </html>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
모든 주요 브라우저는 <td> 태그를 지원합니다.
태그 정의 및 사용 지침
<td> 태그는 HTML 테이블의 표준 셀을 정의합니다.
HTML 테이블에는 두 가지 셀 유형이 있습니다.
- 머리글 셀 - 헤더 정보 포함(<번째> 요소로 생성됨)
- 표준 셀 - 데이터 포함(<td> 요소로 생성됨)
< 내의 텍스트 ;th> 요소는 일반적으로 굵게 표시되고 중앙에 표시됩니다.
<td> 요소 내의 텍스트는 일반적으로 왼쪽 정렬 텍스트입니다.
팁 및 참고 사항
팁: 콘텐츠를 여러 행이나 열에 걸쳐 확장해야 하는 경우 colspan 및 rowspan 속성을 사용하세요!
HTML 4.01과 HTML5의 차이점
HTML 4.01의 일부 속성은 HTML 5에서 더 이상 지원되지 않습니다.
Attribute
| Attribute | Value | Description |
|---|---|---|
| abbr | text | HTML5 지원되지 않습니다. 셀 내용의 축약된 버전을 지정합니다. |
| align | left right center justify char | HTML5 지원되지 않습니다. 셀 내용의 수평 정렬을 지정합니다. |
| axis | category_name | HTML5는 지원되지 않습니다. 범주 셀. |
| bgcolor | rgb(x,x,x) #xxxxxx colorname | HTML5 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 셀의 배경색을 지정하세요. |
| char | character | HTML5는 지원되지 않습니다. 콘텐츠 정렬에 사용할 문자를 지정합니다. |
| charoff | number | HTML5는 지원되지 않습니다. 정렬된 문자의 오프셋을 지정합니다. |
| colspan | number | 셀이 확장할 수 있는 열 수를 지정합니다. |
| headers | header_id | 셀과 연결된 하나 이상의 헤더 셀을 지정합니다. |
| height | pixels % | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 셀의 높이를 설정하세요. |
| nowrap | nowrap | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 셀의 내용을 줄바꿈할지 여부를 지정합니다. |
| rowspan | number | 셀이 확장할 수 있는 행 수를 설정합니다. |
| scope | col colgroup row rowgroup | HTML5는 지원되지 않습니다. 헤더 셀을 데이터 셀과 연결하는 방법을 정의합니다. |
| valign | top middle bottom baseline | HTML5는 지원되지 않습니다. 셀 내용의 수직 배열을 지정합니다. |
| width | pixels % | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 셀 너비를 지정하세요. |
전역 속성
<td> 태그는 HTML 전역 속성을 지원합니다.
이벤트 속성
<td> 태그는 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>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
행이나 열에 걸쳐 테이블 셀
이 예에서는 행이나 열에 걸쳐 테이블 셀을 정의하는 방법을 보여줍니다. .
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 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 참조 매뉴얼: Td 개체
