HTML テーブルの使い方 (Web ページの視覚効果を表示する)

HTML テーブルの使い方 (Web ページの視覚効果を表示する)

NetEase Blog で HTML を使用する場合、テンプレートに直接コードを追加できることはわかっていますが、効果はあまり良くありません。それはコードがうまく配置されていないからです。ここでは、テーブルを使用してコードを配置し、特殊効果をうまく表示する方法を説明します。

HTML 構文において、テーブルは欠かせない要素です。テーブルがないと、Web ページの視覚効果を表現することが難しくなります。ここではテーブルについて説明します。以下は 2 行 2 列の表です。

コードは次のとおりです: <TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=1 cellPadding=1 width="100%" border=1>
<本文>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

tr は行、 td は列、 border は太さ (「0」は表示されないことを意味します)、 &nbsp; はスペースを表します。ここで、テーブルの幅は 100% (width="100%") が最適です。これでお分かりいただけましたか?理解できたら、「<TD>&nbsp;</TD>」の中に必要なコードを追加できます。

たとえば、<TABLE style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid" cellSpacing=1 cellPadding=1 width="100%" border=1>
<本文>
<TR>
<td><marquee>ω.⑨s. メッセンジャーのホームページへようこそ</marquee></td>
<TD>&nbsp;</TD></TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD></TR></TBODY></TABLE>

効果は次のとおりです。

ω.⑨s.メッセンジャーホームへようこそ

これと同じように、残りは同じです。

もう 1 つ: テーブルを作成すると、次のようなものもいくつかあります。

そして

アプローチは次のとおりです。

<表の境界線="1" 幅="100%">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</テーブル>

そして
<表の境界線="1" 幅="100%">
<tr>
<td rowspan="2">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</テーブル>

よく見ると、colspan="2" と rowspan="2" が余分にあるのがわかりますよね? ! ! !

これがあなたが望むものです。「2」はパラメータであり、これも自分で設定する必要があります。

<表の境界線="1" 幅="100%">
<tr>
<td colspan="2"><marquee>ω.⑨s.メッセンジャーのホームページへようこそ</marquee></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</テーブル>

そして
<表の境界線="1" 幅="100%">
<tr>
<td rowspan="2"><marquee>ω.⑨s. メッセンジャーのホームページへようこそ</marquee></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</テーブル>

効果は次のとおりです。

ω.⑨s.メッセンジャーホームへようこそ

そして

ω.⑨s.メッセンジャーホームへようこそ

注意: その他のコードは <td>....</td> に追加する必要があります。これは HTML を理解していない友人のためのものです。 !

<<:  Nginx リバース プロキシ構成の完全なプロセス記録

>>:  垂直グリッドと漸進的な行間隔の例

推薦する

VMware での Ubuntu と Windows 間のファイル共有

この記事では、VMware 環境下で Ubuntu と Windows 間でファイルを共有する方法を...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15のインストールと設定方法を参考までに紹介します。具体的な内容は...

iframe ページパラメータの文字化けの問題について議論

非常に珍しいパラメータ文字化けの問題に遭遇しました。まずページを見てみましょう写真に示すように、月次...

CocosCreatorでゲームコントローラーを使用する方法

目次1. シーンレイアウト2. ハンドルリスナーを追加する1. イベントの変更を監視する2. 座標設...

ubuntu20.04 LTSにdockerをインストールする方法

ゼロ: 古いバージョンをアンインストールするDocker の古いバージョンは、docker、dock...

Vant+postcss-pxtoremはブラウザ適応機能を実装します

Remレイアウトの適応Vant のスタイルでは、デフォルトで px を単位として使用します。rem ...

ウェブサイトのコードブロックのpreタグにコピーコードボタンコードを追加します

他のよりプロフェッショナルなブログ システムを参照すると、コード ブロックにコードのコピー ボタンが...

いくつかの CSS3 タグの短縮形 (推奨)

border-radius: CSS3 丸い角構文: border-radius: 25px;楕円...

Vueルーティングはページステータスを復元する操作メソッドを返します

ルートパラメータ、ルートナビゲーションガード: ページが戻ったときに検索結果を保持する需要シナリオ:...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...

Linux デバイス用ネットワーク ドライバーの紹介

有線ネットワーク: イーサネット 無線ネットワーク: 4G、WiFi、Bluetooth、5G 概要...

Linux 上での MySQL データベースのリモート展開の詳細な手順

LinuxリモートMySQLデータベースの展開、参考までに、具体的な内容は次のとおりです。 1.0 ...

MySql ストアド プロシージャ パラメータの初歩的な使用法の詳細な説明

パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...

preタグを自動的に折り返すためのサンプルコード

pre 要素は、フォーマット済みのテキストを定義します。 pre 要素で囲まれたテキストでは、通常、...

Nginx設定の原理と実装プロセスの詳細な説明https

Linuxユーティリティcertbotを使用してhttps証明書を生成するこのツールは Let&#...