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

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

推薦する

React は入力値を取得し、2 つのメソッドの例を送信します

方法1: DOMが提供するイベントオブジェクトのターゲットイベント属性を使用して値を取得し、送信する...

React Nativeでaxiosを使用してネットワークリクエストを行う方法

フロントエンド開発では、Ajax、jQuery ajax、axios、fetch など、データ要求を...

Vue + 要素を使用して背景データをオプションに動的に表示する

必要:ハードコードされたデータの代わりに、セレクター内のオプション値の動的な表示を実装します。私のロ...

Mac での MySql の詳細なインストールと構成

1.ダウンロードしてインストールする公式ウェブサイトからコミュニティ エディションの dmg インス...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

Dockerイメージのエクスポートとインポート操作

基本イメージが以前に構成されていて、これらのイメージが他の場所でも必要な場合はどうなりますか?回答:...

光るテキストとちょっとしたJS特殊効果を実現するCSS

実装のアイデア: CSSでtext-shadowを使用してテキストの光る効果を実現します効果画像: ...

React diffアルゴリズムソースコード分析

目次単一ノード差分単一要素を調整するマルチノード差分調整子配列ノードが移動したかどうかを判断するには...

MySQLクエリデータを時間別に表示します。データがない場合は0を入力してください。

需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...

HTML での位置の使用に関する簡単な紹介

昨日 HTML を少し学んだばかりで、JD.com の検索バーを作るのが待ちきれませんでした。 作っ...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

MySQLデータ行と行オーバーフローのメカニズムの詳細な説明

1. 行の形式は何ですか? MySQL の行形式の設定は次のように表示されます。 実際、MySQL ...

フロントエンドタスク構築のための強力なツールであるGulp.jsの使い方を詳しく説明します

目次概要Gulp.jsをインストールするGulp.jsを使用してプロジェクトを作成するgulpfil...

Linuxはバイナリモードを使用してmysqlをインストールします

この記事では、LinuxにバイナリモードでMySQLをインストールする具体的な手順を参考までに紹介し...

ネイティブ js でカスタム スクロール バーを実装する

この記事の例では、カスタムスクロールバーを実装するためのjsの具体的なコードを参考までに共有していま...