医療記事を作成するときには、多くの情報を「文章」ではなく「表」にしてまとめることで、記事が格段に読みやすくなることがあります。WordPressの場合、テーブルブロックを追加すると簡単に表は作成できるのですが、セルの幅や色味が自由に変更できないという難点もあります。
この記事では、ITのバックグラウンドがない薬剤師でもHTMLで表を作成する方法について解説します。
そもそもHTMLって何？
HTMLとは、HyperText Markup Languageの略で、Webページを作成するために開発された言語のことです。 専用の文字列を用いて、文章の構成や役割を示し、Web上に表記させます。
HTMLを使用して表を作成することで、より細かい指定をすることができ、表を自分好みにカスタマイズすることができます。
たとえば…こちら▼は、WordPressのテーブルブロックから作成した表です。簡単に作成できるので便利ですが、背景色やセル幅などは自由に選択できません。
| 薬Aの副作用 | ・〇〇 ・△△ |
| 薬Bの副作用 | ・〇〇 ・◆◆ |
| 薬Cの副作用 | ・◆◆ ・×× |
次にこちら▼はHTMLを使用して、自分好みに背景色や幅をカスタマイズして作成した表です。
| 薬Aの副作用 | ・〇〇 ・△△ |
|---|---|
| 薬Bの副作用 | ・〇〇 ・◆◆ |
| 薬Cの副作用 | ・◆◆ ・×× |
どのようにHTMLで作成したかというと、以下のような専用の文字列を使用して作成しました。
<table style=”margin: 3.5rem, 0; width: 100%;”>
<tr>
<th style=”font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080; width: 170px;”>薬Aの副作用</th>
<td style=”border-bottom: 0.5px solid #808080;padding-left: 10px;”>・〇〇<br> ・△△
</tr>
<tr>
<th style=”font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;”>薬Bの副作用</th>
<td style=”border-bottom: 0.5px solid #808080; padding-left: 10px;”>・〇〇<br> ・ ◆◆
</tr>
<tr>
<th style=”font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;”>薬Cの副作用</th>
<td style=”border-bottom: 0.5px solid #808080; padding-left: 10px;”>・◆◆<br> ・××
</tr>
</table>
これらの文字列は、一見すると分かりにくいのですが、まとまりごとに分解して見ると分かりやすくなります。
| タグ | 内容 |
| <table>～ </table> | 表（テーブル）を作成する |
| <tr>～ </tr> | 表（テーブル）の横一行を定義する |
| <th>～ </th> | 表（テーブル）の見出しとなるセルを作成する |
| <td>～ </td> | 表（テーブル）のセルを作成する |
| <br> | 改行 |
| background:#FFA07A | 背景の色を指定、今回は橙色の#FFA07A |
| text-align:center;padding | 文字を中央揃えにする |
| padding-left | 文字を左揃えにする |
| width | テーブル全体の幅を指定 |
HTMLでいろいろな種類の表を書いてみよう！
ここでは、HTMLを使用してさまざまな種類の表を作成します。
一度テンプレートで作ってしまうと、あとは使用時に行数などを変更すればよいため便利です。
3行2列：行・列に背景色あり
| 薬の成分 | 製品の例 |
|---|---|
| A | ○○®、△△® |
| B | □□®、××®、▼▼® |
<table style="margin: 3.5rem, 0; width: 100%;">
<tr>
<th style="font-weight: normal; background:#FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080; width: 130px;">薬の成分</th>
<td style="border-bottom: 0.5px solid #808080;background: #FFA07A; text-align:center; padding: 15px;">製品の例</td>
</tr>
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">A</th>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 15px;">○○®、△△®</td>
</tr>
<tr>
<th style="font-weight: normal; background:#FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">B</th>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 15px;">□□®、××®、▼▼®</td>
</tr>
<tr>
</table>4行5列：行・列に背景色あり
| 薬の成分名 | 商品A | 商品B | 商品C | 商品D |
|---|---|---|---|---|
| ▲▲▲▲ | 〇 | 〇 | × | × |
| □□□□ | 〇 | × | × | × |
| ▼▼▼▼ | × | × | 〇 | 〇 |
<table style="margin: 3.5rem, 0; width: 100%;">
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080; width: 210px;">薬の成分名</th>
<td style="border-bottom: 0.5px solid #808080;background: #FFA07A; text-align:center; padding: 15px;">商品A</td>
<td style="border-bottom: 0.5px solid #808080;background: #FFA07A; text-align:center; padding: 15px;">商品B</td>
<td style="border-bottom: 0.5px solid #808080;background: #FFA07A; text-align:center; padding: 15px;">商品C</td>
<td style="border-bottom: 0.5px solid #808080;background: #FFA07A; text-align:center; padding: 15px;">商品D</td>
</tr>
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">▲▲▲▲</th>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">〇</td>
<td style="border-bottom: 0.5px solid #808080;text-align:center;padding: 15px; font-size: 14px;">〇</td>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">×</td>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">×</td>
</tr>
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">□□□□</th>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">〇</td>
<td style="border-bottom: 0.5px solid #808080;text-align:center;padding: 15px; font-size: 14px;">×</td>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">×</td>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">×</td>
</tr>
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">▼▼▼▼</th>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">×</td>
<td style="border-bottom: 0.5px solid #808080;text-align:center;padding: 15px; font-size: 14px;">×</td>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">〇</td>
<td style="border-bottom: 0.5px solid #808080; text-align:center;padding: 15px; font-size: 14px;">〇</td>
</tr>
<tr>
</table>
2行2列：列に背景色あり
| 薬A （成分〇〇） |
薬B （成分△△） |
|---|---|
| ・□□□□□□□
・▼▼▼▼▼▼▼ ・××××××× | ・□□□□□□□
・▲▲▲▲▲▲▲ ・◇◇◇◇◇◇◇ |
<table style="margin: 3.5rem, 0; width: 100%;">
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080; width: 150px;">薬A<br>（成分〇〇）</th>
<td style="border-bottom: 0.5px solid #808080;background:#FFA07A; text-align:center; padding: 15px; width: 150px;">薬B<br>（成分△△）</td>
</tr>
<tr>
<td style="border-bottom: 0.5px solid #808080; padding-left: 15px; font-size: 15px;">・□□□□□□□
<br>・▼▼▼▼▼▼▼ <br>・××××××× </th>
<td style="border-bottom: 0.5px solid #808080; padding-left: 15px; font-size: 15px;">・□□□□□□□
<br>・▲▲▲▲▲▲▲ <br>・◇◇◇◇◇◇◇</td>
</tr>
<tr>
</table>
3行2列：行に背景色あり
| 薬Aの副作用 | ・〇〇 ・△△ |
|---|---|
| 薬Bの副作用 | ・〇〇 ・◆◆ |
| 薬Cの副作用 | ・◆◆ ・×× |
<table style="margin: 3.5rem, 0; width: 100%;">
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080; width: 170px;">薬Aの副作用</th>
<td style="border-bottom: 0.5px solid #808080;padding-left: 10px;">・〇〇 <br>・△△
</tr>
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">薬Bの副作用</th>
<td style="border-bottom: 0.5px solid #808080; padding-left: 10px;">・〇〇 <br>・◆◆
</tr>
<tr>
<th style="font-weight: normal; background: #FFA07A; text-align:center; padding: 1rem;border-bottom: 0.5px solid #808080;">薬Cの副作用</th>
<td style="border-bottom: 0.5px solid #808080; padding-left: 10px;">・◆◆ <br>・××
</tr>
</table>
