<td>
HTML <td> タグ
インスタンス
<!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 テーブルには 2 つのセル タイプがあります:
- ヘッダー セル - ヘッダー情報が含まれます (<th> 要素によって作成されます)
- 標準セル - データが含まれます (<td> 要素によって作成されます)
ヒントとメモ
ヒント: コンテンツを複数の行または列にまたがる必要がある場合は、colspan 属性と rowspan 属性を使用してください。
HTML 4.01とHTML5の違いHTML 4.01の一部の属性はHTML 5ではサポートされなくなりました。
属性
| 属性 | 値 | 説明 |
|---|---|---|
| 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 | セルに関連付けられた 1 つ以上のヘッダー セルを指定します。 |
| 高さ | ピクセル % | HTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 セルの高さを設定します。 |
| nowrap | nowrap | HTML5 はサポートされていません。 HTML 4.01 は非推奨になりました。 セル内のコンテンツを折り返すかどうかを指定します。 |
| rowspan | number | セルがまたがることができる行数を設定します。 |
| scope | col colgroup row rowgroup | HTML5 はサポートされていません。 ヘッダーセルをデータセルに関連付けるメソッドを定義します。 |
| valign | top middle bottom baseline | HTML5はサポートされていません。 セルの内容の垂直方向の配置を指定します。 |
| 幅 | ピクセル % | HTML5はサポートされていません。 HTML 4.01 は非推奨になりました。 セルの幅を指定します。 |
グローバル属性
<td> タグは HTML グローバル属性をサポートします。
イベント属性
<td> タグは 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チュートリアル: HTMLテーブル
HTML DOMリファレンスマニュアル: Tdオブジェクト
