ga-05-k3

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
当ホームページで作成した テーブルのサンプル

当ホームページの「文字色と背景色」で使用したカラーコード見本帳です。HTMLのtableタグを使って作成しました。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     カラー見本帳(36種類)
=====================================-->
<html>
<head>
    <title>カラーコード見本帳</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div style="margin: 30px auto;
                        width:700px;">
   
    <table border="1" width="650" 
    cellspacing="0" cellpadding="5" bordercolor="gray">

    <tr>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">色種別</font></th>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">濃度1</font></th>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">濃度2</font></th>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">濃度3</font></th>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">濃度4</font></th>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">濃度5</font></th>
        <th height="50" bgcolor="white" 
        width="40"><font color="BLACK">濃度6</font></th>
    </tr>

    <tr>
        <th height="50" bgcolor="white"  
        width="50"><font color="BLACK">赤</font></th>
        <th height="50" bgcolor="#FFE4E1" 
        width="100"><font color="BLACK">red1</font></th>
        <th height="50" bgcolor="#ffcccc" 
        width="100"><font color="BLACK">red2</font></th>
        <th height="50" bgcolor="#FFB6C1" 
        width="100"><font color="BLACK">red3</font></th>
        <th height="50" bgcolor="#ff99cc" 
        width="100"><font color="BLACK">red4</font></th>
        <th height="50" bgcolor="#FF6699" 
        width="100"><font color="white">red5</font></th>
        <th height="50" bgcolor="#ff0000" 
        width="100"><font color="white">red6</font></th>
    </tr>

    <tr>
        <th height="50" bgcolor="white"  
        width="50"><font color="BLACK">茶</font></th>
        <th height="50" bgcolor="#FFE4C4" 
        width="100"><font color="BLACK">brown1</font></th>
        <th height="50" bgcolor="#FFD700" 
        width="100"><font color="BLACK">brown2</font></th>
        <th height="50" bgcolor="#ff9900" 
        width="100"><font color="BLACK">brown3</font></th>
        <th height="50" bgcolor="#d2691e" 
        width="100"><font color="white">brown4</font></th>
        <th height="50" bgcolor="#b22222" 
        width="100"><font color="white">brown5</font></th>
        <th height="50" bgcolor="#800000" 
        width="100"><font color="white">brown6</font></th>
    </tr>

    <tr>
        <th height="50" bgcolor="white" 
        width="50"><font color="BLACK">黄</font></th>
        <th height="50" bgcolor="#FFFFE0" 
        width="100"><font color="BLACK">yellow1</font></th>
        <th height="50" bgcolor="fffacd" 
        width="100"><font color="BLACK">yellow2</font></th>
        <th height="50" bgcolor="#ffffbb" 
        width="100"><font color="BLACK">yellow3</font></th>
        <th height="50" bgcolor="#ffff99" 
        width="100"><font color="BLACK">yellow4</font></th>
        <th height="50" bgcolor="#ffff66" 
        width="100"><font color="BLACK">yellow5</font></th>
        <th height="50" bgcolor="#ffff00" 
        width="100"><font color="BLACK">yellow6</font></th>
    </tr>

    <tr>
        <th height="50" bgcolor="white" 
        width="50"><font color="BLACK">緑</font></th>
        <th height="50" bgcolor="#CCFFCC" 
        width="100"><font color="BLACK">green1</font></th>
        <th height="50" bgcolor="#90EE90" 
        width="100"><font color="BLACK">green2</font></th>
        <th height="50" bgcolor="32cd32" 
        width="100"><font color="BLACK">green3</font></th>
        <th height="50" bgcolor="3cb371" 
        width="100"><font color="black">green4</font></th>
        <th height="50" bgcolor="008000" 
        width="100"><font color="white">green5</font></th>
        <th height="50" bgcolor="006400" 
        width="100"><font color="white">green6</font></th>
    </tr>      

    <tr>
        <th height="50" bgcolor="white" 
        width="50"><font color="BLACK">青</font></th>
        <th height="50" bgcolor="#e0ffff" 
        width="100"><font color="BLACK">blue1</font></th>
        <th height="50" bgcolor="#aeeeee" 
        width="100"><font color="BLACK">blue2</font></th>
        <th height="50" bgcolor="#87ceeb" 
        width="100"><font color="BLACK">blue3</font></th>
        <th height="50" bgcolor="#1E90FF" 
        width="100"><font color="white">blue4</font></th>
        <th height="50" bgcolor="#0066ff" 
        width="100"><font color="white">blue5</font></th>
        <th height="50" bgcolor="#191970" 
        width="100"><font color="white">blue6</font></th>
    </tr>

    <tr>
        <th height="50" bgcolor="white" 
        width="50"><font color="BLACK">白黒</font></th>
        <th height="50" bgcolor="#ffffff" 
        width="100"><font color="BLACK">mono1</font></th>
        <th height="50" bgcolor="#e8e8e8" 
        width="100"><font color="BLACK">mono2</font></th>
        <th height="50" bgcolor="#d0d0d0" 
        width="100"><font color="BLACK">mono3</font></th>
        <th height="50" bgcolor="#a0a0a0" 
        width="100"><font color="black">mono4</font></th>
        <th height="50" bgcolor="#757575" 
        width="100"><font color="white">mono5</font></th>
        <th height="50" bgcolor="#000000" 
        width="100"><font color="white">mono6</font></th>
    </tr>
    </div>
    </table>
</body>
</html>
        
今回はCSSコードはありません。
 back
pagetop
 next

CSSで装飾したテーブルのサンプル

当ホームページで
作成したテーブル
のサンプル

class名を複数記述するサンプル

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken