HTMLテーブルで、各セルに異なる色と幅を設定します

HTMLテーブルで、各セルに異なる色と幅を設定します
設定が有効にならない場合が多いため、幅や高さなどをテーブル内で直接設定しないことをお勧めします。

スタイルに設定を追加すれば問題ありません。コードをそのままbodyの途中にコピーして使用できます。

コードをコピー
コードは次のとおりです。

<table cellspacing="0" style="color:#FFF; text-align:left; font-size:14px; font-weight:bold; margin-left:220px; width:980px; height:200px;text-align:center">
<tr>
<td bgcolor="e91e6f"; style=" width:196px;">01</td>
<td bgcolor="224071"; style=" width:196px;">02</td>
<td bgcolor="f12339"; style=" width:196px;">03 </td>
<td bgcolor="1ea27e"; style=" width:196px;">04</td>
<td bgcolor="224071"; style=" width:196px;">05</td>
</tr>
<tr>
<td bgcolor="1ea27e">06</td>
<td bgcolor="e91e6f">07</td>
<td bgcolor="224071">08</td>
<td bgcolor="f12339">09 </td>
<td bgcolor="1ea27e">10</td>
</tr>
<tr>
<td bgcolor="e91e6f">11</td>
<td bgcolor="224071">12</td>
<td bgcolor="f12339">13</td>
<td bgcolor="1ea27e">14 </td>
<td bgcolor="224071">15</td>
</tr>
<tr>
<td bgcolor="1ea27e">16</td>
<td bgcolor="e91e6f">17</td>
<td bgcolor="224071">18</td>
<td bgcolor="f12339"></td>
<td bgcolor="1ea27e"></td>
</tr>
</テーブル>

効果画像:

<<:  ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明

>>:  VMware、nmap、burpsuite インストール チュートリアル

推薦する

SASSで変数のデフォルト値を使用する方法

SASS で定義された変数では、後で設定された値によって古い値が上書きされます。 $色: 赤; $色...

HTML+CSS でハートビートの特殊効果を作成する

今日は、シンプルなハートビート効果を作成します。多くのコードは必要ありません。ボックスを追加し、CS...

MySQLデータをOracleに移行する正しい方法

mysql データベースには student テーブルがあり、その構造は次のとおりです。 Oracl...

VUE無限レベルツリーデータ構造表示の実装

目次コンポーネントの再帰呼び出しレンダリングメソッドの使用プロジェクトに取り組んでいると、左側のメニ...

ネイティブ js で呼び出し、適用、バインドを実装する方法

1. 呼び出しを実装するステップ:関数をオブジェクトのプロパティとして設定します。これを関数に割り当...

シェルスクリプトはNginxのaccess.logのPVを定期的にカウントし、APIに送信してデータベースに保存します。

1. PVとIPの統計一日のPV(ページビュー)をカウントする cat access.log | ...

この記事では、6つの負荷分散技術の実装方法をまとめます(要約)

ロード バランシングは、サーバー クラスタの展開でよく使用されるデバイスです。マシンのパフォーマンス...

Reactでプロキシを有効にする2つの実用的な方法

プロキシを有効にする2つの方法React には、直接使用できるカプセル化された Ajax リクエスト...

印刷広告を成功させるための「3I」基準

国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...

JavaScript でロジック判定コードを最適化する方法

序文日常生活で使用する論理的判断文には、if...else...、switch...case...、...

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

MySQL で重複行を見つけて削除する方法

目次1. 重複行を見つける方法2. 重複行を削除する方法3. 複数の列で重複を見つける方法4. クエ...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

SQL と NoSQL の違いのまとめ

主な違い: 1. タイプSQL データベースは主にリレーショナル データベース (RDBMS) とし...