ga-04-11

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

11.表作成(テーブル)

目   次

1.表作成(テーブル)の基本

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

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

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



  1.表作成(テーブル)の基本

HTMLで表を作成するときは、tableタグ、trタグ、thタグ、tdタグを使います。

画像

table
<table>〜</table>の範囲が表となる。

tr
Table Rowの略。
<tr>〜</tr>の範囲が行となる。

th
Table Headerの略。見出しセルとして使われる。
トップ行以外でも使用できる。
<th>〜</th>で囲った部分が見出しの1つとなる。

td
Table Dataの略。データセルとしてtrの要素を構成する。
<td>〜</td>で囲った部分がデータの1つとなる。

  
  2.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コードはありません。
  
  3.CSSで装飾したテーブルのサンプル

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
罫線と罫線の隙間を無くす。 

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

当ホームページの「文字色と背景色」で使用したカラーコード見本帳です。

【サンプル画像】

画像

【サンプル コード】
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: 600px;">
   
    <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コードはありません。

箇条書き

表作成(テーブル)

構造と見た目を分ける

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