【デイトラ学習記録】Web制作コース　中級編旧課題DAY46　テーブルとGoogle マップ（iframe）埋め込みのコーディング【テーブル編】

2023年8月4日2023年12月7日

みなさん、こんにちは。ここぽてとです。本日もWEB制作中級編に取り組んでいきます。今回の学習は本当はテーブルとGoogleマップの埋め込みのコーディングなのですが、半分に分けてこちらのテーブル学習編を先に学習の記録として残したいと思います。

コーディングの条件
テーブル下の「お問い合わせ」はリンク（中身は空でOK）

テーブルの設置の仕方

横に並べる写真やテーブルの設置にはdivを囲っておく

写真と価格表（テーブル）は”display: flex;” で横並びにしますが、imgとtable（flexの子要素）をdivタグ（ブロック要素）で囲むことで意図しない表示崩れを防ぐことができるということみたいです。なので、3つdivタグが必要ということになります。

<div class="price_contents">
   <div class="price_left">
   <img src="/img/price_image.png">
   </div>
   <div class="price_right">
  /* テーブルのエリア */
  </div>
</div>

.price_contents {
  display: flex;
}
.price_left{
    img{
    width: 454px;
    height: 290px;
    margin-right: 40px;
    }
}
.price_right{
   width: 708px;
   height: 290px;
   margin-left: auto;
}

テーブルの設置方法

テーブルの設置にはtableタグ、trタグ、thタグ、tdタグとセットで使われますが、意味を覚えるとそこまで難しくありません。英語が苦手な人は、図で覚えると良いと思います。

table：表全体をはさむ。<table>〜</table>の範囲が表となる。

tr：Table Rowの略。行全体をはさむ。いくつ使ってOK。

th：Table Headerの略。trの中で使う。はさまれた部分は見出しセルとなる。

td：Table Dataの略。trの中で使う。はさまれた部分が表の中身のセルとなる。いくつ使ってOK。

https://saruwakakun.com/html-css/basic/table

<table class="table-default">
  <tr>
    <th></th>
    <th>column1</th>
    <th>column2</th>
  </tr>
<tr>
  <th>row1</th>
  <td>100円</td>
  <td>100円</td>
</tr>
</table>

セルの中身を上下中央に配置したい！

セルの中身のコンテンツ配置は、”vertical-align”を使い、”vertical-align: middle;” 上下中央の配置が可能です。

table内の列の幅を均等にしたい！

tableタグに”table-layout: fixed;” と ”width: 100%;” を指定するだけで、列の幅が均一になります。

1列目の幅だけ大きさを変えたい！

特定の列だけwidthを指定すれば、その列のみ指定した幅、その他は自動で均等にすることができます。ここではfirst-childを使っています。

/*table内の列の幅を均等にしたいとき*/
.table-example {
  width: 100%;
  table-layout: fixed; 
}
/*1列目の幅だけ大きさを変えたいとき*/
.table-example th:first-child {
  width: 170px;
}

実際に書いたコード

クラス名を後から確認するとよくわからないものをつけてしまって反省です。クラス名は誰が見てもわかりやすいものをつけましょう。

    <table class="table">
      <tr><th class="cr"></th><th class="cr">column1</th><th class="cr">column2</th></tr>
      <tr><td class="cr">row1</td><td>100円</td><td>100円</td></tr>
      <tr><td class="cr">row2</td><td>6,000円</td><td>0円</td></tr>
      <tr><td class="cr">row3</td><td class="hl">6,000円<p class="hs">※今だけ半額</p></td><td>0円</td></tr>
      <tr><td class="cr">row4</td><td>100円</td><td>100円</td></tr>
    </table>

table {
	border: 1px solid #707070;
	border-collapse: collapse; /*ボーダーをまとめて一つにする*/
	table-layout: fixed;
	width: 100%;
   th,td {
	border: 1px solid #707070;
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    background:#fff;
    &:first-child {
        width: 80px;
        height: 54px;
    }
   }
   td{
    margin-right: 24px;
   }
  .cr{
    text-align: center;
    background: #999999;
    color:#fff;
    width: 172px;
    height: 58px;
    }
}