主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 1) 基本的な構造は次のとおりです: <tr> は表内の行を表し、<td> は行内の列を表します。列について話すとき、実際にはそれを Word のセルと考えることができます。 <th> は実際にはセルですが、表のヘッダーとして使用されます。意味的に言えば、<td> はテーブル内のデータ単位を示し、<th> はテーブル内の列または行のタイトルを示します。 コードをコピー コードは次のとおりです。<テーブル> <tr><th></th></tr> <tr><td><td></tr> </テーブル> 2) タイトルは行タイトルまたは列タイトルである場合があります。これらを区別するにはどうすればよいでしょうか?スコープ属性scope=row/colを使用する必要があります。 コードをコピー コードは次のとおりです。<テーブル> <tr><th スコープ="col"></th></tr> <tr><td><td></tr> </テーブル> 3) 表には独自のタイトルもあります <caption> コードをコピー コードは次のとおりです。<テーブル> <caption>表のタイトル</caption> <tr><th スコープ="col"></th></tr> <tr><td><td></tr> </テーブル> 4) テーブルにサマリー属性を追加する コードをコピー コードは次のとおりです。<table summary="これは表の要約です"> <caption>表のタイトル</caption> <tr><th スコープ="col"></th></tr> <tr><td><td></tr> </テーブル> 5) 表の境界線モデルとセルのデフォルトのパディング。 表の境界線には、分離と結合の 2 つの表示モードがあります。 border-collapse: Separate/collapse IE6 のデフォルトのスタイルは分離されており、3 次元のように見えます。実際には、各セルには独自の独立した境界があります。マージとは境界を共有することを意味します。 テーブル { 境界線の折りたたみ: 折りたたみ; } デフォルトでは、セル間には空白があります。 border-spacing を使用してこれを制御できますが、IE6 ではサポートされていないため、ほとんど使用されません。 IE6 セル間隔を使用します。 コードをコピー コードは次のとおりです。<table summary="これは表の内容の概要です" cellspacing="0"> <caption>表のタイトル</caption> <tr><th スコープ="col"></th></tr> <tr><td><td></tr> </テーブル> 6) 行と列をいくつか追加します。そして、各 <th> に id を追加します。 コードをコピー コードは次のとおりです。<table summary="これは表の内容の概要です" cellspacing="0"> <caption>表のタイトル</caption> <tr> <th scope="col" id="name">名前</th> <th scope="col" id="address">住所</th> <th scope="col" id="databirthday">生年月日</th> </tr> <tr> <td>イーウィー<td> <td>湖北<td> <td>19870102<td> </tr> <tr> <td>レウェ<td> <td>武漢<td> <td>419880103<td> </tr> <tr> <td>ertww<td> <td>宜昌<td> <td>19870205<td> </tr> </テーブル> 7) テーブルを論理的に分割します <thead><tbody><tfoot>。テーブルを複数の論理領域に分割した後、CSS を使用してパフォーマンスをより適切に制御できます。 コードをコピー コードは次のとおりです。<table summary="これは表の内容の概要です" cellspacing="0"> <caption>表のタイトル</caption> <頭> <tr> <th scope="col" id="name">名前</th> <th scope="col" id="address">住所</th> <th scope="col" id="databirthday">生年月日</th> </tr> </thead> <t本文> <tr> <td>イーウィー<td> <td>湖北<td> <td>19870102<td> </tr> <tr> <td>レウェ<td> <td>武漢<td> <td>419880103<td> </tr> <tr> <td>ertww<td> <td>宜昌<td> <td>19870205<td> </tr> <t本文> </テーブル> このエッセイでは、テーブルの構造について簡単に説明します。お役に立てれば幸いです。 |
>>: 大規模なMySQLデータベース用のマスタースレーブシステムを構築するアイデアを共有する
問題の説明:構造:テストには2つのフィールドがあります。これらは col1 と col2 で、どちら...
この記事では、ウェブ計算機のマインスイーパゲームを実装するためのJavaScriptの具体的なコード...
CSSの背景プロパティの値背景色背景画像背景繰り返し背景位置背景添付複合プロパティ: 背景: ba...
画像をダウンロード docker プル openjdkデータボリュームの作成java_appデータボ...
目次文字列の長さ: 長さcharAt() charCodeAt()文字列に値が含まれているかどうかを...
{ {}} 値を取得すると、タグの元のコンテンツはクリアされませんv-textは値を取得し、タグの元...
1.コンテナ内の /etc/hosts、/etc/resolv.conf、/etc/hostname...
リソースを節約するためにWebページの圧縮を設定する1.まず、設定を変更しましょう vim /usr...
1.Docer CEをインストールして使用するこの記事では、CentOS 7 を例に Docker ...
序文要素がビューポート内にあるかどうかを監視する2つの方法を共有する1. 位置計算Element.g...
1. MySQL インストール パッケージをダウンロードします(ここにはコツがあります。おそらく、こ...
今日仕事中に、ビジネス側から次のような質問をされました。テーブルがあり、一意のフィールドを追加する必...
企業の Web サイト、個人のブログ、ショッピング Web サイト、ゲーム Web サイトなど、どの...
ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...