<일>
HTML <th> 태그
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>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
브라우저 지원
모든 주요 브라우저는 <th> 태그를 지원합니다.
태그 정의 및 사용 지침
<th> 태그는 HTML 테이블의 헤더 셀을 정의합니다.
HTML 테이블에는 두 가지 셀 유형이 있습니다.
- 머리글 셀 - 헤더 정보 포함(<번째> 요소로 생성됨)
- 표준 셀 - 데이터 포함(<td> 요소로 생성됨)
< 내의 텍스트 ;th> 요소는 일반적으로 굵게 표시되고 중앙에 표시됩니다.
<td> 요소 내의 텍스트는 일반적으로 왼쪽 정렬 텍스트입니다.
팁 및 참고 사항
팁: 콘텐츠를 여러 행이나 열에 걸쳐 확장해야 하는 경우 colspan 및 rowspan 속성을 사용하세요!
HTML 4.01과 HTML5의 차이점
HTML 4.01의 일부 속성은 HTML 5에서 더 이상 지원되지 않습니다.
Attribute
| Attribute | Value | Description |
|---|---|---|
| abbr | text | HTML5 지원되지 않습니다. 헤더 셀 내용의 축약 버전을 지정합니다. |
| align | 왼쪽 그렇죠 센터 정당화 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 | 헤더 셀과 연결된 하나 이상의 헤더 셀을 지정합니다. |
| 높이 | 픽셀 % | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 머리글 셀의 높이를 지정합니다. |
| nowrap | nowrap | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 헤더 셀의 콘텐츠를 래핑해야 하는지 여부를 지정합니다. |
| rowspan | number | 머리글 셀이 확장할 수 있는 행 수를 지정합니다. |
| scope | col 콜그룹 행 Rowgroup | 은 머리글 셀이 행, 열, 행 그룹 또는 열 그룹의 머리인지 여부를 지정합니다. |
| valign | top 중간 하단 Baseline | HTML5는 지원되지 않습니다. 머리글 셀 내용의 수직 배열을 지정합니다. |
| 너비 | 픽셀 % | HTML5는 지원되지 않습니다. HTML 4.01은 더 이상 사용되지 않습니다. 머리글 셀의 너비를 지정합니다. |
전역 속성
<th> 태그는 HTML 전역 속성을 지원합니다.
이벤트 속성
<th> 태그는 모든 HTML 이벤트 속성을 지원합니다.
사용해 보기 - 예
Title in table
이 예는 표 제목을 표시하는 방법을 보여줍니다. Re 예제
<!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>
예제 실행 »
온라인 인스턴스를 보려면 "예제 실행" 버튼을 클릭하세요.
<!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> <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>
인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.
행이나 열에 걸쳐 있는 테이블 셀이 예에서는 행이나 열에 걸쳐 있는 테이블 셀을 정의하는 방법을 보여줍니다. .
<!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 DOM 참조 매뉴얼: Th 객체
