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 インストール チュートリアル

推薦する

Vueタイムラインコンポーネントの使い方

この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具...

Docker JVM メモリ使用量の表示

1. Docker コンテナのホスト マシンに入り、指定されたイメージを実行しているコンテナ ID ...

大規模なMySQLデータベース用のマスタースレーブシステムを構築するアイデアを共有する

今週は戦争のように忙しかったです。他人に操られているような気がします。毎日朝早く出勤して夜遅く帰り、...

Vue+canvas は、ウォーターフォール チャートを上から下までリアルタイムに更新する効果を実現します (QT と同様)

早速ですが、デモ画像をご紹介します。実装されている機能は、左側に凡例、右側にウォーターフォール チャ...

クリックして認証コードと認証を切り替えるJavaScript

この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...

Workbench を介して MySQL データベースにリモートでアクセスする方法の詳細な説明

序文Workbench が 1 台のコンピューターにインストールされており、別の Ubuntu サー...

Nginx プロセス管理とリロードの原則の詳細な説明

プロセス構造図Nginx はマルチプロセス構造です。マルチプロセス構造は、次のような Nginx の...

MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

MySQLインストーラをダウンロードする公式ダウンロードアドレス: http://dev.mysq...

CSS クラスと ID の一般的な命名規則

ページの公開名: #wrapper - ページの外側の端が全体のレイアウト幅を制御します#conta...

CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法

以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...

MySQL の一時テーブルと派生テーブルについての簡単な説明

派生テーブルについてメイン クエリに派生テーブルが含まれている場合、または SELECT ステートメ...

CSS でインラインブロック要素間のギャップを削除するいくつかの方法の詳細な説明

最近、モバイルページを制作する際には、レイアウトにインラインブロック要素がよく使われますが、インライ...

Vue3 (パート 2) Ant Design Vue の統合

目次1. Ant Design Vueを統合する2. コンポーネントの使用1. 完全な引用2. コン...

Linux の MySQL でリモート接続を承認する方法

注意: 他のマシン (IP) は、承認なしではクライアント経由で MySQL データベースに接続でき...