表> <TR> <TD> <TH> <キャプション> ■ <表> <TR> <TD>: これら3つのタグはテーブルを定義する上で最も重要なタグであり、この3つだけを覚えておけば十分だと言えます。 <TABLE> はコンテナ タグです。つまり、これがテーブルであることを宣言するために使用され、他のテーブル タグはそのスコープ内でのみ適用されます。他のコンテナ タグもあります。 <TR> は表の行をマークするために使用されます。 <TD>はストレージセルをマークするために使用されます <TABLE> のパラメータ設定(よく使用されるもの): たとえば、<table width="400" border="1" cellspacing="2" cellpadding="2" align="CENTER" valign="TOP" background="myweb.gif" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#00FF00" bordercolordark="#00FFFF" cols="2"> 幅= "400" 表の幅は、絶対値(80 など)と相対値(80% など)を受け入れます。境界線="1" 表の枠線の太さ。ブラウザによってデフォルト値が異なるため、指定してください。セル間隔="2" 表のグリッドの太さ。グリッドを 5 に太くした例 3 を参照してください。セルパディング="2" テキストとグリッド線の間の距離。パディングが 10 に追加された例 4 を参照してください。 align="中央" テーブルの配置位置(水平方向)。オプションの値は、left、right、centerです。例5または6を参照してください。テーブルは中央に配置されます。一部のブラウザがサポートしないように、センタータグ<CENTER>が追加されています。これは単なるマルチレイヤー保証です。もちろん、<CENTER>のみでも許容されます。 valign="TOP" です。 表内の書道や絵画の垂直配置位置。オプションの値は、上、中、下です。背景="myweb.gif" bgcolor ではテーブル用紙を使用しないでください。 bgcolor="#0000FF" テーブルの背景色。背景と一緒に使用しないでください。例 6 を参照してください。境界線の色="#FF00FF" 表の境界線の色は、NC と IE で効果が異なります。例 6 を参照してください。ボーダーカラーライト="#00FF00" 表の境界線の明るい部分の色については、例 2 を参照してください。 『IEのみ』 bordercolordark="#00FFFF" 表の境界線のバックライト部分の色。例 2 を参照してください。bordercolorlight または bordercolordark が使用されている場合、bordercolor は無効になります。 『IEのみ』 cols="2" テーブル フィールドの数によっては、ダウンロードする前にブラウザーがテーブル全体を描画することしかできません。 <TR> のパラメータ設定(よく使用されるもの): たとえば、<tr align="RIGHT" valign="MIDDLE" bgcolor="#0000FF" bordercolor="#FF00FF" bordercolorlight="#808080" bordercolordark="#FF0000"> align="RIGHT" この列の書道と絵画の水平配置位置。オプションの値は、左、中央、右です。 valign="MIDDLE" この列の書道と絵画の垂直配置位置。オプションの値は、上、中、下です。 bgcolor="#0000FF" この列の背景色については、例 5 を参照してください。ボーダーカラー="#FF00FF" この列の境界線の色については、例 3 を参照してください。 『IEのみ』 bordercolorlight="#808080" 列の境界線の明るい部分の色。例 3 を参照してください。 『IEのみ』 bordercolordark="#FF0000" この列の境界線のバックライト部分の色。例 3 を参照してください。bordercolorlight または bordercolordark が使用されている場合、bordercolor は無効になります。 『IEのみ』 <TD> のパラメータ設定(よく使用されるもの): たとえば、<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif"> width="48%" セル幅は絶対値(80など)と相対値(80%など)の両方を受け入れます。高さ="400" ストレージセルの高さ。列範囲 = "5" セルの右側に開く列の数。例6 rowspan="4" を参照してください。 セルが下に開く行数。例6 align="RIGHT"を参照してください。 このストレージ セル内の書道または絵画の水平位置。オプションの値は、left、center、right です。 valign="下" このストレージ セル内の書道または絵画の垂直配置位置。オプションの値は、上、中、下です。 bgcolor="#FF00FF" このセルの背景色については、例 4 を参照してください。ボーダーカラー="#808080" このセルの境界線の色については、例 3 を参照してください。 『IEのみ』 bordercolorlight="#FF0000" セルの境界線の明るい部分の色。例 3 を参照してください。 『IEのみ』 bordercolordark="#00FF00" セル境界線のバックライト部分の色。例3を参照してください。bordercolorlightまたはbordercolordarkが使用されている場合、bordercolorは無効になります。 『IEのみ』 background="myweb.gif" このストレージ グリッド ペーパーでは、bgcolor のいずれかを使用します。 例1: <テーブルの幅="60%" 境界線="1"> <tr><td>セルが 1 つだけのテーブル</td></tr> 1 つのセルのみで結果を表示する表の例 2: <テーブルの幅="60%" 境界線="5" 境界線の色ライト="#FF00FF" 境界線の色ダーク="#FF0000"> <tr><td>最初の列、最初の列</td><td>最初の列、2 番目の列</td></tr> </table> 結果を表示 列 1 列 1 列 1 列 2 例 3: <テーブルの幅="60%" 境界線="1" セル間隔="5"> <tr bordercolor="#0000FF"> <td>最初の列、最初の行</td> <td>最初の列、2 番目の行</td> </tr> <tr bordercolorlight="#FF00FF" bordercolordark="#00FF00"> <td>2 列目、1 列目</td> <td>2 列目、2 列目</td> </tr> </table> 結果を表示 1列目 1列目 1列目 2列目 2列目 1列目 2列目 例4: <テーブルの幅="60%" 境界線="1" セルパディング="10"> <tr> <td bgcolor="#FFCCE6">最初の列、最初の行</td> <td bgcolor="#FFFFC6">最初の列、2 番目の行</td> </tr> <tr> <td bgcolor="#FFD9FF">2 列目、1 列目</td> <td bgcolor="#DAB4B4">2 列目、2 列目</td> </tr> </table> 結果の表示 最初の列 最初の列 最初の列 2 番目の列 2 番目の列 最初の列 2 番目の列 例 5: ソースコード <中央> <テーブルの幅="60%" セル間隔="0" セルパディング="2" 配置="中央"> <tr> <td bgcolor="#FFD2E9">最初の列、最初の行</td> <td bgcolor="#FFDAB5">最初の列、2 行目</td> <td bgcolor="#FFFFB5">最初の列、3 行目</td> </tr> <tr bgcolor="#C0C0C0"> <td>2 列目、1 列目</td> <td>2 列目、2 列目</td> <td>2 列目、3 列目</td> </tr> </テーブル> </center> 結果を表示 例6 ソースコード <center> <テーブルの幅="350" 境界線="1" セル間隔="0" セルパディング="2" 位置合わせ="中央" bgcolor="#FFC4E1" 境界線カラー="#0000FF"> <tr> <td>最初の行、最初の列</td> <td colspan="2">最初の行、2番目と3番目の列</td> </tr> <tr> <td rowspan="2">2 行目と 3 行目の最初の列</td> <td>2 行目、2 列目</td> <td>2 行目、3 列目</td> </tr> <tr> <td>列 3、列 2</td> <td>列 3、列 3</td> </tr> </テーブル> </center> 結果を表示 ■ <TH>: <TH> と <TD> はどちらもセルをマークしますが、唯一の違いは、<TH> でマークされたセル内のテキストが太字で表示されることです。通常、表の最初の行で列をマークするために使用されます。使用方法は、<TD> の位置を置き換えることです。パラメータ設定については、<TD> を参照してください。 もちろん、<TD> でマークされたセル内のテキストに太字マーク <B> を追加すると、<TH> と同じ効果が得られます。 例: ソースコード <中央> <テーブルの幅="350" 境界線="1" セル間隔="0" セルパディング="2" 配置="中央"> <tr align="CENTER"> <th>月</th><th>IE 訪問者の %</th><th>NC 訪問者の %</th> </tr> <tr align="CENTER"> <td>8月</td><td>61%</td><td>39%</td> </tr> <tr align="CENTER"> <td>7月</td><td>54%</td><td>46%</td> </tr> <tr align="CENTER"> <td>6月</td><td>52%</td><td>48%</td> </tr> </テーブル> </center> 結果を表示 ■ <キャプション> : <CAPTION> の機能は、表の上にグリッド線のないオープン列を追加するのと同じように、表のタイトル列をマークすることです。 もちろん、下に配置することもできます。通常は、テーブルのタイトルを格納するために使用されます。 <CAPTION> のパラメータ設定(よく使用されるもの): 例: <caption align="TOP" valign="TOP"></caption> align="TOP" テーブルに対するテーブルキャプションの水平位置。可能な値は、left、center、right、top、middle、bottom です。align="bottom" の場合、ソースコードで <caption> を <table> の先頭または末尾に配置したかどうかに関係なく、キャプションはテーブルの下に表示されます。 valign="TOP" テーブルタイトル列のテーブルに対する相対的な位置(上または下)。オプションの値は、top、bottom です。これは align="TOP" または align="BOTTOM" と同じです。機能は繰り返されますが、タイトル列を下部に配置して右または左に貼り付ける場合は、両方のパラメータを使用できます。パラメータが 1 つしかない場合は、align を優先してください。valign は HTML 3.0 でのみ導入されたパラメータだからです。 例: <中央> <テーブルの幅="350" 境界線="1" セル間隔="0" セルパディング="2" 配置="中央"> <caption>Web Express 8 月の訪問者のブラウザ使用状況分析</caption> <tr align="CENTER"> <th>月</th> <th>IE 訪問者の %</th> <th>NC 訪問者の %</th> </tr> <tr align="CENTER"> <td>8月</td> <td>61%</td> <td>39%</td> </tr> </テーブル> </center> |
<<: URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述
>>: 特定の部門 ID に基づいて、すべての下位レベルの複数レベルのサブ部門を照会する MySQL の例
Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...
以前、MySQLがローカルでは接続できるのにリモートでは接続できないという問題に遭遇したことがありま...
1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...
最初のステップはmysqlコンテナを作成することです docker exec -it コンテナID ...
名前タグの名前を指定します。形式 <input type="text" n...
この記事では、例を使用して MySQL トリガーの簡単な使用方法を説明します。ご参考までに、詳細は以...
今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの...
1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...
1. dockerでtomcat8をインストールする1. Docker HubでTomcatイメージ...
導入あなたも面接でこれに遭遇したことがあるはずです。トランザクションの分離レベルについてお話ししまし...
この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...
現在多くの携帯電話には、下部のタブバーを切り替える機能があります。私も最近、同様の機能を見つけました...
sshツールをインストールする1. ターミナルを開き、次のコマンドを入力します。 apt-getアッ...
目次リレーショナルデータベースとは何ですか?非リレーショナルデータベースとは何ですか? MySQL ...
序文インデックスを追加した場合と追加しなかった場合の違いを反映するには、数百万のデータを使用する必要...