こんにちは。まつもとです。(@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を学習中の方にとって、少しでも役立つと思っていただけましたら幸いです。
これからも日々学んだことをまとめて記録していこうと思います。
最後まで読んでいただき、ありがとうございました!^^