主にその構造といくつかの重要な特性について説明します。少しずつ改善しながら紹介していきます。 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データベース用のマスタースレーブシステムを構築するアイデアを共有する
今日は、ローカルの Docker プロジェクト イメージを dockerhub に公開する方法を紹介...
<br />海外メディアの報道によると、マイクロソフトはソフトウェアの相互運用性への取り...
最近、cronスケジュールタスク用のdockerを作りたいと思っており、Dockerfileで次のよ...
導入この記事では、django + uwsgi + nginx デプロイメントを使用して、Docke...
目次1. インストール2. インポート3. 検証ルールを定義します(エクスポート用に js ファイル...
目次1. setState() の説明1.1 データの更新1.2 推奨構文1.3 2番目のパラメータ...
目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...
今日は、ネイティブ JS で実装されたブリージング カルーセルを紹介します。効果は次のとおりです。 ...
序文データベースをバックアップするときは、データベース全体のバックアップを使用します。ただし、何らか...
この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...
1. はじめに最近、 Webpackの原理を勉強しています。これまでは Webpack の設定方法し...
準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...
結果: コードロジックを実装するのが主な部分であり、具体的なページ構造を一つ一つ紹介することはありま...
開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...
目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...