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 リバース プロキシ構成の完全なプロセス記録

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

推薦する

MySQL実行計画の詳細な分析

序文前回の面接では、実行計画について質問されたとき、多くの人がそれが何なのか知りませんでした。実行計...

MySQL PXC クラスターの構築方法

目次1. PXCの紹介1.1 PXC の紹介1.2 PXC の特徴と利点1.3 PXCの限界と欠点1...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...

Tomcat が localhost に通常アクセスすると 404 を報告する問題の解決方法

今日、プロジェクトのホームページにアクセスするために Tomcat を設定していたところ、404 エ...

mysql 5.7.17 winx64.zip インストールと設定方法のグラフィックチュートリアル

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

MySQL 5.7 のインストールと設定の詳細な手順

1. MySQLをダウンロードする1. MySQLの公式ウェブサイトにログインし、64ビットシステム...

JavaScript における var と let の違い

目次1. スコープはさまざまな方法で表現されます2. 変動昇進と非昇進の違い3. 一時的なデッドゾー...

MySQLでANDとORを組み合わせる問題を解決する

以下のように表示されます。 SELECT prod_name,prod_price FROM pro...

コピー&ペーストはパッケージングの敵です

OO、デザイン パターン、および多くのオブジェクト指向の原則について話す前に、まず 1 つのことを習...

Dockerイメージの作成、アップロード、プル、デプロイを理解するための記事

目次1. 画像1. 鏡とは何ですか? 2. 画像の構成と目的(1) Dockerファイル(2)スクラ...

この記事ではMySQLのNULLについて説明します。

目次序文MySQL の NULL 2 NULL占有長3 NULL値の比較4SQLはNULL値を処理す...

メタ宣言注釈の手順

メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...

ウェブサイト構築経験概要

<br />注目を集めるウェブサイトを作成するには、どのような原則に従うべきでしょうか?...

シンプルなスネークを実現するためのネイティブjsキャンバス

この記事では、参考までに、簡単なスネークゲームを実装するためのjsキャンバスの具体的なコードを共有し...