【超初心者向け】簡単な表をつくるHTMLコード

仕事で表を表を作るシーンが多いんだけどコピペして使うしかできない！！

ホームページの修正、管理をしていると表を作ったり修正したりする場面が異様におおいんですけど、
コピペして使いまわせばいいときは良いものの、

行を追加したいとか、
列を追加したいとか、

カスタマイズになるとお手上げ・・・。

ということで、今回は表を作るためのHTMLコードを勉強しました～

基本のシンプルな表HTML

まずは一番シンプルな二列の形。

<table class="my-custom-table">
<tr>
<th>項目</th>
<th>内容</th>
</tr>
<tr>
<th>項目</th>
<th>内容</th>
</tr>
</table>

参列にする場合は、<th>を足せばOK

<table class="my-custom-table">
<tr>
<th>項目</th>
<th>内容</th>
<th>内容</th>
</tr>
<tr>
<th>項目</th>
<th>内容</th>
<th>内容</th>
</tr>
</table>

診療表のような横列と縦列に項目の入った表にするには

<div style="overflow-X: auto;"><table class="clinic-table">
<thead>
<tr>
<th>診療時間</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th>土</th>
<th>日</th>
</tr>
</thead>
<tbody>
<tr>
<th>9:00～12:00</th>
<td>●</td>
<td>●</td>
<td>／</td>
<td>●</td>
<td>●</td>
<td>●</td>
<td>／</td>
</tr>
<tr>
<th>15:00～18:00</th>
<td>●</td>
<td>●</td>
<td>／</td>
<td>●</td>
<td>●</td>
<td>／</td>
<td>／</td>
</tr>
</tbody>
</table>
</div>

●が左に寄ってしまっているので、治す場合は、trの部分（二か所）を下記のように書き換えます。

<tr style="text-align: center;">

こんな感じ。

もっとデザインを素敵にする場合にはCSSで設定が必要になります。