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

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

推薦する

HTMLはマーキーを使用してテキストを左右にスクロールします

コードをコピーコードは次のとおりです。 <本文> //マーキーの助けを借りて<MA...

ランダム点呼 Web ページを実装するための JavaScript

JavaScriptは、参考のためにランダムな点呼Webページを作成します。具体的な内容は次のとお...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

IE8はマルチ互換モードを使用してWebページを正常に表示します

IE8には複数の互換モードがあります。 IE プラットフォームの設計者である Chris Wilso...

CocosCreator ソースコードの解釈: エンジンの起動とメインループ

目次序文準備行く!文章プロセスを開始するメインループまとめ要約する序文準備皆さんは、こんなことを考え...

シンプルなショッピングカートの最も完全なコード分析を実装する JavaScript (ES6 オブジェクト指向)

この記事では、シンプルなショッピングカートを実装するためのJavaScriptの具体的なコードを参考...

ウェブサイトを黒、白、グレーにする4つのコードの詳細な説明

2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...

Vueはダイアログのカプセル化を実装します

目次Vue2 ライティングVue3プラグインのバージョンの記述Vue3 動的コンポーネントの記述書き...

CSS3で線形グラデーションを実装するためのコードの詳細な説明

序文デモでは古いバージョンのブラウザのグラデーションが実装されています[IE9-]。 IE9 より前...

指定したディレクトリに nginx をインストールする方法の例

会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...

MySQL での Truncate の使用法の詳細な説明

序文:テーブルをクリアしたいときは、truncate ステートメントをよく使用します。ほとんどの場合...

MySQL デッドロックのトラブルシューティング プロセスの完全な記録

序文これまで遭遇したデータベースのデッドロックはすべて、バッチ更新中のロック順序の不一致が原因でした...

Vue-pdfはPDFファイルのオンラインプレビューを実装します

序文ほとんどのプロジェクトでは、PDF ファイルのオンライン プレビューに遭遇するでしょう。このプロ...

JSベースの手持ち連射機能+テキスト揺れ特殊効果コードの簡単実装

少し前にTikTokで揺れる連打が流行っていたので真似してみることにしました。さっそく効果をみてみま...