テーブルに角丸をつけたい

テーブルの基本構造を知っておきましょう。

テーブルの基本構造については、こちらをご覧ください>> テーブルのシンプルデザイン

ここでは、テーブルの見出しにグラデーションを付けたいのデザインを元に、角丸を付ける方法をご紹介いたします。

テーブルタイトル
名前 年齢 性別
浅井義久 20歳 男性
森村裕子 24歳 女性

上記のテーブルのHTML

<table align="" class="table3" style="width:70%">

<colgroup>

<col style="width: 50%;" />

<col style="width: 25%;" />

<col style="width: 25%;" />

</colgroup>

<caption>テーブルタイトル</caption>

<thead>
  <tr>

    <th>名前</th>

    <th>年齢</th>

    <th>性別</th>

</tr>

</thead>

<tbody>

  <tr>

    <td>浅井義久</td>

    <td>20歳</td>

    <td>男性</td>

  </tr>

  <tr>

    <td>森村裕子</td>

    <td>24歳</td>

    <td>女性</td>

  </tr>

</tbody>

</table>

テーブルのHTMLの貼り付け方

クリックすると拡大表示されます。右ボタンで作業の順番が表示されます。
左側からクリックしてください。

CSS


<style type="text/css">

    .table3{

        border-collapse: separate;

        border-spacing:0;

        border:none;

        -webkit-border-radius: 6px;

        -moz-border-radius: 6px;

        -o-border-radius: 6px;

        border-radius: 6px;

        border:1px solid #8A959F;

    }

    

    .table3 th{

        border:none;

        padding:5px 5px 7px;

        font-size:90%;

        font-weight:normal;

        color:#FFF;

        border:1px solid #729CC6;

        border-right:1px solid #255788;

        border-bottom:1px solid #255788;

        background:linear-gradient(#3377BB,#255788);

        text-shadow:1px 1px 2px rgba(255,255,255,0.7);

        text-shadow:-1px -1px 2px rgba(0,0,0,0.7);

        text-align:center;

     }


    .table3 td{

        background:#f7f7f7;

        font-weight:normal;

        border:none;

        border:1px solid #FFFFFF;

        border-right:1px solid #B7C4D2;

        border-bottom:1px solid #B7C4D2;

        padding:5px 5px 7px;

        font-size:90%;      

        color:#255788;

        text-align:center;

    }


    .table3 caption{

        text-align:left;

        font-size:90%;

        color:#333;

    }    

        

    .table3 thead tr:first-child th:first-child{

        -webkit-border-radius: 6px 0 0 0;

        -moz-border-radius: 6px 0 0 0;

        -o-border-radius: 6px 0 0 0;

        border-radius: 6px 0 0 0;

    }


    .table3 thead tr:first-child th:last-child{

        -webkit-border-radius: 0 6px 0 0;

        -moz-border-radius: 0 6px 0 0;

        -o-border-radius: 0 6px 0 0;

        border-radius: 0 6px 0 0;

    }


    .table3 tbody tr:last-child td:first-child{

        -webkit-border-radius:0 0 0 6px;

        -moz-border-radius:0 0 0 6px;

        -o-border-radius:0 0 0 6px;

        border-radius:0 0 0 6px;

    }


    .table3 tbody tr:last-child td:last-child{

        -webkit-border-radius:0 0 6px 0;

        -moz-border-radius:0 0 6px 0 ;

        -o-border-radius:0 0 6px 0;

        border-radius:0 0 6px 0;

    }

        

</style>


▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。


株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422