プログラミング学習備忘録

【プログラミング学習備忘録②】よくある診療時間の表の作り方

こんにちは。まつもとです。(@matsumoto_54111

本日の【プログラミング学習備忘録】では、病院のホームページなどでよくある診療時間の表の作り方についてです。自分でも後で見返せるように、できるだけ簡潔にまとめようと思います。

以下のような表を作っていきます!

それでは、作っていきましょう。

表の作成に使うタグ

表を作る際は、いくつかのタグを使います。それぞれの働きは以下の通り。

<table> : 表全体を囲むように書く
<th> : 表の見出し (上の表だと、「診療時間」と各曜日がこれにあたる)
<td> : 表のデータ (上の表だと、「午前診療…」と「午後診療…」と「〇」「×」がこれにあたる)
<tr> : 表の1行を囲むように書く

HTML/CSSの書き方

HTML
<table>
 <tr>
  <th>診療時間</th>
  <th>月</th>
  <th>火</th>
  <th>水</th>
  <th>木</th>
  <th>金</th>
  <th>土</th>
  <th>日</th>
 </tr>
 <tr>
  <td>午前診療 | 08:00~12:00</td>
  <td>〇</td>
  <td>〇</td>
  <td>〇</td>
  <td>〇</td>
  <td>〇</td>
  <td>〇</td>
  <td>×</td>
 </tr>
 <tr>
  <td>午後診療 | 13:00~17:00</td>
  <td>〇</td>
  <td>〇</td>
  <td>×</td>
  <td>〇</td>
  <td>〇</td>
  <td>〇</td>
  <td>×</td>
 </tr>
</table>

CSS
table {
 border-collapse: collapse; /*それぞれの枠線を重ねて表示(この設定により同じ太さの枠が出来る)*/
}

table th {
 padding: 10px;
 background-color: #4699ca;
 border: 1px solid #97cdf3;
}

table td {
 font-size: 15px;
 text-align: center;
 border: 1px solid #97cdf3;
}

以上です。

私と同じようにHTML/CSSを学習中の方にとって、少しでも役立つと思っていただけましたら幸いです。
これからも日々学んだことをまとめて記録していこうと思います。

最後まで読んでいただき、ありがとうございました!^^