- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(52日目その1)


基金訓練(Webデザイン・プログラミング科)の52日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。

本日の内容は下記のとおりです。

1.テーブル(表組み)

左が見出しで右が説明で、普通の罫線の表

teble-layout 表組みをレイアウト表示する際の方法を指定するプロパティ。
table-callapse 表組みの枠の表示モデルを指定するプロパティ。
border-spacing 表組みの枠を分離表示した場合の、各セルのボーダー感覚を指定するプロパティ。

↑こんな感じです。↑

  • CSSの例は下記のとおりです。
    table {
    border: none;
    border-collapse: collapse;
    width: 300px;
    border-color: #000000;
    }
    th {
    width: 120px;
    border: solid 1px #000000;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
    }
    td
    {
    border: solid 1px #000000;
    padding: 8px;
    }
  • HTMLの例は、下記のとおりです。
    <table>
    <tr>
    <th>teble-layout</th>
    <td>表組みをレイアウト表示する際の方法を指定するプロパティ。</td>
    </tr>
    <tr>
    <th>table-callapse</th>
    <td>表組みの枠の表示モデルを指定するプロパティ。</td>
    <tr>
    <th>border-spacing</th>
    <td>表組みの枠を分離表示した場合の、各セルのボーダー感覚を
    指定するプロパティ。</td>
    </tr>
    </tr>
    </table>

※paddingを設定して、セル内の文字と罫線の隙間を空けたほうが見栄えがよい。




実習で使用している教本