HTMLのtableタグの基礎学習チュートリアル

テーブル タグを使用して Web 上にテーブル コンテンツを表示することは、HTML の最も基本的な機能の 1 つです。ここでは、HTML のテーブル タグの基本的な学習チュートリアルを見ていきます。必要な方は、HTML のタグ構成を参照してください。テーブル

HTML のテーブルはメインタグとして

で構成されており、ブラウザはこのタグをテーブルとして解釈します。テーブル内の行は、 タグを使用して定義されます。 タグは タグを設定すると、テーブルを複数の行に分割できます。 、、 はブラウザが十分にサポートしていないため、ほとんど使用されません。

テーブルとボーダーの属性
テーブル自体は、テーブルのボーダーの幅を決定するボーダー属性を定義できます。この属性の値は、デフォルトでは数値単位で表示されます。たとえば、border="1" の単位です。この値はピクセルです。境界値の後に単位を追加しないでください。追加すると、値が正しく認識されなくなります。
テーブルのヘッダー

タグはテーブルの列を定義するために使用されます。そのため、各行には対応する数の	タグを設定する必要があります。列を分離して完全なフォームを形成します。 表のタグの組み合わせ関係は次のとおりです: <table> <tr> <td>我是单元格1</td> <td>我是单元格2</td> </tr> </table> テキスト、画像、リスト、段落、フォーム、水平線などの任意のHTMLタグを表に挿入でき、ページレイアウトにも使用できます。 。ただし、テーブル レイアウトには、コードが長すぎる、HTML 仕様に準拠していない、検索エンジンが使いにくいなどの問題があります。したがって、ページ上で本当に表が必要な場合を除き、ページ レイアウトに表を使用しないことをお勧めします。 残りの	、

では、テーブルヘッダーの タグと同じレベルにあります。 、ヘッダーは通常、タグの前の に表示されます。テーブルの場合、ヘッダーは必要なく、必要に応じて挿入できます。

タグは

タグ内のテキストは自動的に太字になります。

セルの結合
セルの結合は、垂直結合と水平結合に分けられます。結合するときは、他の行と列に対応する数のセルがあるかどうかを判断する必要があります。
セルを水平方向に結合するには、colspan 属性を使用します。その値は結合するセルの数を決定します。たとえば、colspan="2" は 2 つのセルを右側に結合することを意味します。 セルの垂直結合では rowspan 属性を使用します。これは、水平結合属性と同じで、数値形式で結合するセルの数も決定します。たとえば、rowspan="2" は 2 つのセルを下方向に結合することを意味します。
デモ コードの例:

<table border=“1”>  
<tr>  
<th>姓名</th>  
<th colspan=“2”>电话</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>姓名</th>  
<td>Bill Gates</td>  
</tr>  
<tr>  
<th rowspan=“2”>电话</th>  
<td>555 77 854</td>  
</tr>  
<tr>  
<td>555 77 855</td>  
</tr>  
</table>

デモ効果の例:

セルの余白

テーブルには、パディング スタイルと同様のパディング関数があります。

タグ内で cellpadding 属性を定義すると、タグの下のすべての ラベルの内側のマージンが 10 ピクセルであることを意味します。

セル間隔
セル 間隔は、 タグの外側の余白を設定するもので、

要素にパディングを設定できます。 cellpadding 属性のパラメーターは、マージンのサイズを決定する数値の形式です。たとえば、cellpadding="10" は、テーブル内のすべての

タグでセル間隔属性を定義することで、次のことができます。タグの下のすべての td 要素の外側のマージンを設定します。この属性は、余白のサイズも数値形式で決定します。たとえば、cellspacing="10" は、このテーブル内のすべての タグの余白が 10px であることを意味します
テーブルの背景を設定します

テーブルは背景を渡すことができます このプロパティはテーブルまたはセルの背景として任意の画像を設定します。その使用法は CSS の背景と非常によく似ています。背景に対応する画像パスを設定して、セルに対応する画像を表示させます。たとえば、background="table_bg.gif"
表の内容の配置

表の配置は、水平方向の配置と垂直方向の配置に分けられます。これら 2 つの属性は、それぞれ align 属性と valign 属性です。これらの 2 つの属性を対応する

タグに挿入すると、セル内のテキストまたは画像の位置合わせが完了します。 水平方向の位置合わせには、左、中央、右の 3 つの値があります。
垂直方向の位置合わせにも、上、中央、下、ベースラインの 3 つの値があります。 ベースライン配置は文字通りには理解できないかもしれませんが、実際、ベースライン配置とは、テキストが表の中央ではなく中央上部に表示されることを意味します。テキストが大きくない場合、効果は中と同様、中よりわずかに高くなります。


追記: CSS の table-layout ステートメント

このステートメントは、

などのテーブル表示のスタイルを指定するために使用できます。

CSS コードコンテンツをクリップボードにコピーします

1. table { table-layout: fixed }

3 つの値を取ることができます:
* auto (デフォルト)
*修正済み
*inherit
auto は、セルのサイズがコンテンツによって決定されることを意味します。固定とは、セルのサイズが固定されており、指定されたサイズの最初のセルによって決定されることを意味します。すべてのセルのサイズが指定されていない場合は、セル内のコンテンツのデフォルトのサイズによって決定されます。セルを超えています グリッドのサイズは CSS のオーバーフロー コマンドによって制御されます。 Microsoft は、このコマンドを使用すると、表の表示速度を 100 倍高速化できると主張しています。
ちなみに、表の表示を高速化するには、あらかじめCSSで表の幅と高さ（またはtableタグのwidthとheight属性）を指定しておくとよいでしょう。

HTML のテーブル タグの基本学習チュートリアルに関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。