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 CHARとVARCHARの選択方法

目次VARCHAR 型と CHAR 型結論: VARCHAR 型と CHAR 型VARCHAR と ...

CSS3で実装されたグラデーションスライド効果

成果を達成する コードhtml <div class="css-slideshow&...

適応幅(パーセンテージ)に応じて Div の高さを調整する純粋な CSS

今日のレスポンシブ レイアウトの要件では、サイズを自動的に調整できる多くの要素で高さと幅の適応を実現...

CSS で「プラス記号」効果を実装するためのサンプルコード

以下に示すプラス記号の効果を実現するには: この効果を実現するには、div 要素だけが必要です。 b...

CSS 向け SASS スタイル プログラミング ガイド

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...

アイデアを通じてプロジェクトをDockerにパッケージ化する方法

多くの友人が、Docker でプロジェクトを実行する方法をずっと知りたがっていました。今日は、自分の...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

CSS を使用して fullpage.js のフルスクリーン スクロール効果を実装するサンプル コード

最近 CSS を勉強していたとき、 2 つの CSS プロパティだけを使用して全画面スクロール効果を...

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

クリック範囲を拡大する入力チェックボックスを実装する方法

XML/HTML コードコンテンツをクリップボードにコピー< div style = &quo...

React HTML で react を使用する 2 つの方法

基本的な使い方 <!DOCTYPE html> <html lang="...

Tomcat サーバーが tomcat7w.exe を開けない場合の解決策

今日、Tomcat サーバーの設定時にちょっとした問題が発生したので、参考までにいくつかご説明したい...

MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

実践こそが真実をテストする唯一の方法です。この記事では、インデックスの全体的な使用法についてのみ説明...

Linux で特殊文字のファイル名やディレクトリを削除する方法

inode番号でファイルを削除するまずls -iを使用して、削除するファイルのinode番号を見つけ...