ga-05-k2

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

【 HTML/CSS逆引き辞典 】
CSSで装飾した テーブルのサンプル

HTMLだけで作成したテーブルをCSSで装飾したテーブルのサンプルです。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     CSSで装飾するテーブル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div class="boxa">
        <table>
           <tr>
                <th>種 類</th><th>値 段</th>
                <th>特   徴</th><th>人気</th>
           </tr>
           <tr>
              <td>ブレンド</td><td>¥200</td>
                <td>自慢の独自配合</td>
                <td style="text-align: center">◎</td>
           </tr>
            <tr>
              <td>カフェオレ</td><td>¥300</td>
                <td>クリームでまろやか</td>
                <td style="text-align: center">○</td>
           </tr>
            <tr>
              <td>アメリカン</td><td>¥280</td>
                <td>すっきりとした口当たり</td>
                <td style="text-align: center">△</td>
           </tr>
        </table>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   CSSでテーブルを装飾する
--====================================*/
.boxa{
    margin: 30px auto;
    width:600px;
}
.boxa table {
    border: 3px darkblue solid;  
       /* 太さ3pxで濃い青の実線 */
    border-collapse: collapse;
    background: lightyellow;
       /*全体の背景色*/
}
.boxa table th {
    font-size: 20px;
    padding: 20px;
       /*上下左右20pxずつの余白を造る*/
    background: yellow;
       /*見出しの背景色*/
    color: darkblue;
    border: solid 1px black;
       /*実線 1px 黒*/
}
.boxa table td {
    font-weight: bold;
    padding: 6px 20px;
       /*上下6pxで左右20pxの余白を造る*/
    color: royalblue;
       /*テーブル内のすべての文字をroyalblueに変える*/
    border: solid 1px black;
       /*実線 1px 黒*/
}
        
ワンポイント

border-collapse: collapse
罫線と罫線の隙間を無くす。 

 back
pagetop
 next

HTMLだけで作った
テーブルのサンプル

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

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

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