テーブルの役割は、2つの次元データを表示することです。 , it will be introduced later).下面主要介绍用于制作表格的HTML元素。
构建表格表格的基本元素包括：table、tr和td。
テーブルは、Border属性をサポートしてフレームフレームの幅を定義するHTMLドキュメントのテーブルを表します。
TRはテーブルのラインを表します。
TDは、次の属性を含むテーブル内のセルを表します。
1）colspan：細胞が交差できる柱の数。
2）rowspan：セルが交差できる行の数。
3）ヘッダー：標準この属性のヘッド関連ヘッダーは、通常のブラウザーに視覚的な変更を生成しませんが、画面読者は使用できます。
<表> <tr> <td> apples </td> <td>緑</td> <td> medium </td> </tr> <td> oranges </td> <td> orange </td>> <td> large </td> </tr> </table>
上記は、2本の線と3つの列のテーブルを定義しています。ブラウザは、列の幅が最も広いコンテンツを満たし、最大のセルを満たすことができることです。
テーブルボーダー使用table元素的border属性，可以为表格添加边框。
<table border=1> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr></table>
浏览器的默认边框不太美观，通常还需要用CSS来为为各种元素重设边框样式。
不规则表格セルのcolspan属性とrowspan属性を使用すると、テーブルのいくつかの行または列が複数の列の例です。
<table border=1> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td colspan=2>January</td> </tr> <tr> <td colspan=2>February</td> </tr></table>
下面是一个单元格跨多行的一个例子：
<Table border = 1> <ter> <th> Month </th> <th> savings </th> </tr> <td> january </td> <td> $ 100.00 </td> <TD ROWSPAN = 2> $ 50 </td> </tr> <td> 2月</td> <td> $ 10.00 </td> </table>頭
TH要素は、フォームにヘッダーを追加するために使用されます。これは、データのデータと説明を区別するために使用できます。 th要素は次の属性をサポートします。
1）colspan：細胞が交差できる柱の数。
2）rowspan：セルが交差できる行の数。
3）範囲：ヘッドデータをユニットデータに関連付ける方法を定義します。
3）ヘッダー：スペースで区切られたヘッダーIDリストには、この属性のヘッダー情報が提供されますが、通常のブラウザには視覚的な変更が生成されますが、画面リーダーは使用できます。
<表> <ter> <th> rank </th> <th> name </th> <th> color </th> </th> </tr> <th>お気に入り：not/td> <td>オレンジ</td> <td> large </td> </tr> <ter> <th> 3番目のお気に入り：</th> <td>ポメグラアネート</td> <td>緑の赤の一種</ TD> <TD>は中程度から大部分によって異なります</td> </tr> </table>
THとTDはラインで使用できます。
セルにヘッダーを関連付けますTDのヘッダー属性を使用することは、セルに関連付けられています。ヘッダー属性は、1つ以上のTHセルのID属性値にすることができます。
<テーブルボーダー= 1幅= 100％> <ter> <th id = name> name> name </th> <th id = email> email </th> <th id =電話>電話>電話</th> <th id = address> address </th> </tr> <ter> <td headers = name> george bush </td> <td headers = email> [email protected] </td> <td headers =電話> + + 789451236 < /TD> <td Headers = Address> Fifth Avenue New York, USA </td> </tr> </table>複雑な時計を作成します
THのcolspanおよびrowspan属性を使用すると、複雑なテーブルを構築できます。
<テーブルボーダー= 1> <tr> <th colspan = 2>米国の会社</th> </tr> <th> addr </th> </tr> tr> <td > Apple、Inc。</td> <td> 1 Infinite Loop Cupertino、CA 95014 </td> </tr> <td> Google、Inc。</td> 1600 Amphitheater Parkway Mountain View、CA 94043 </td>> </tr> </table>为表格添加结构
Thead、Tbody、およびTfoot要素を使用して、フォームに構造を追加して、フォームの各部分にCSSスタイルを追加して簡単にすることができます。
1）表格主题
Tbody要素は、ヘッダー（Thead要素表現）とスクーター（Tfoot要素表現）を除く、フォームのテーマの全線を表します。
ほとんどのブラウザは、テーブル要素を処理するときにTbody要素を自動的に挿入することに注意してください。
2）フォームヘッダー
Thead要素は、フォームのタイトル行をマークするために使用されます。 thead要素がない場合、すべてのTR要素はフォームの主題の一部と見なされます。
3）脚注を追加します
Tfoot要素は、形成線をマークするために使用されます。 HTML5の前に、Tfoot要素はTbody要素の前にのみ表示され、HTML5ではTfoot要素がTbodyの後にTfoot要素を配置できます。
以下は、Tody、Thead、およびTfoot要素を使用する包括的な例です。
<表> <d> <ter> <th> rank </th> <th> name </th> <th> color </th> <th> size </th> </thead> </thead> < tfoot> <ter> <th> rank </th> <th> name </th> <th>色</th> </th> </ttfoot> <tr> <ter> <th>お気に入り：<th> <td>リンゴ</td> <td>緑</td> <em> medium </td> </tr> <tr> <th> 2番目のお気に入り：</th> <td> oranges </td> <td> orange </td> <td> large </td> </tr> <tr> <th thefals：</th> <td> pomegraanate </td> <td>緑色の赤</td> <td>は中程度によって異なります</td> </tr> </tbody> </table>テーブルにタイトルを追加します
使用caption元素可以为表格定义一个标题，并将其与表格关联起来。
<table> <caption>Results of the 2011 Fruit Survey</caption> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody></table>
フォームには、フォームの最初の要素ではなく、キャプション要素のみを含めることができますが、常にテーブルの上に表示されます。
列テーブルでは、テーブルは線で形成されるため、フォームの列の定義スタイルなど、列の操作は便利ではありません。 Colgroup要素を使用して、グループを指定できます。
<html> <head> <style>＃colryp1 {background-color：red}＃colryp2 {background-color：green} </style> </head> <body> = 1> <colorp id = colorp1 span = 2> </colorp> <colorp id = colorp2> </colorp> <ter> </th> </th> </th>私の最初のCSS </td> <td> $ 47 </td> </tr> </table> </body> </html>上記の例は、最初の列には2つの列が含まれており、2番目の列には残りの1列が含まれており、異なるグループに異なるスタイルを指定します。 Colgroupの属性は、スパン属性が指定されていない場合、次の例を指定できます。
<html> <head> <style>＃colryp1 {background-color：red}＃col3 {background-color：small} </style> </head> <blate> <table idth = 100％ border = 1> <colgroup id = colorp1> <col id = col1and2 span = 2/> <col id = color3/> </colorp> <ter> </th> <th>タイトル</th> <th>価格</th> </tr> <l> <td> 3476896 </td> <td>私の最初のhtml </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <td>私の最初のcss </td> <td> $ 47 </td> </table> </body> </html>上記は、この記事のすべての内容です。