ga-05-k1

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

【 HTML/CSS逆引き辞典 】
HTMLだけで作った テーブルのサンプル

HTMLだけで作成した表(テーブル)のサンプルです。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
     HTMLだけで作るテーブル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="
    style-1.css">
</head>
<body>
    <table border="1"
           style="margin:20px auto;">
       <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>
</body>
</html>
        
ワンポイント

table border="1"
外側及び内側の枠に1pxの枠線を引く

今回は、CSSコードはありません。
 back
pagetop
 next

ナビゲーションから
他ページに
ジャンプする

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

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

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