<番目>
HTML <th> タグ
インスタンス
<!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> タグをサポートしています。
タグの定義と使用方法
HTML テーブルには 2 つのセル タイプがあります:
- ヘッダー セル - ヘッダー情報が含まれます (<th> 要素によって作成されます)
- 標準セル - データが含まれます (<td> 要素によって作成されます)
ヒントとメモ
ヒント: コンテンツを複数の行または列にまたがる必要がある場合は、colspan 属性と rowspan 属性を使用してください。
HTML 4.01とHTML5の違いHTML 4.01の一部の属性はHTML 5ではサポートされなくなりました。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| abbr | text | HTML5はサポートされていません。 ヘッダー セルの内容の短縮バージョンを指定します。 |
| 整列 | 左 そう センター 正当化する char | HTML5 はサポートされていません。 ヘッダー セルの内容の水平方向の配置を指定します。 |
| axis | category_name | HTML5はサポートされていません。 ヘッダーセルを分類します。 |
| bgcolor | rgb(x,x,x) #xxxxxx カラー名 | HTML5 はサポートされていません。 HTML 4.01 は非推奨になりました。 ヘッダーセルの背景色を指定します。 |
| char | character | HTML5 はサポートされていません。 コンテンツの位置を揃えるのにどの文字を使用するかを指定します。 |
| charoff | number | HTML5 はサポートされていません。 位置合わせ文字のオフセットを指定します。 |
| colspan | number | ヘッダーセルがまたがることができる列の数を指定します。 |
| headers | header_id | ヘッダー セルに関連付けられた 1 つ以上のヘッダー セルを指定します。 |
| 高さ | ピクセル % | HTML5 はサポートされていません。 HTML 4.01 は非推奨になりました。 ヘッダーセルの高さを指定します。 |
| nowrap | nowrap | HTML5 はサポートされていません。 HTML 4.01 は非推奨になりました。 ヘッダー セルのコンテンツを折り返すかどうかを指定します。 |
| rowspan | number | ヘッダーセルがまたがることができる行数を指定します。 |
| スコープ | col コルグループ 行 Rowgroup | は、ヘッダー セルが行、列、行グループ、または列グループの先頭であるかどうかを指定します。 |
| ヴァライン | トップ 真ん中 下 ベースライン | HTML5 はサポートされていません。 ヘッダー セルの内容の垂直方向の配置を指定します。 |
| 幅 | ピクセル % | HTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 ヘッダーセルの幅を指定します。 |
グローバル属性
<th> タグは HTML グローバル属性をサポートします。
イベント属性
<th> は、すべての 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>
例の実行 »
オンライン インスタンスを表示するには、「例の実行」ボタンをクリックしてください
<!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>
インスタンス
<!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>例
<!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>インスタンス
<!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リファレンスマニュアル: オブジェクト
