HTMLで表を作成する方法とは？Webライターが医療記事を作成するときに便利なおすすめ4選

医療記事を作成するときには、多くの情報を「文章」ではなく「表」にしてまとめることで、記事が格段に読みやすくなることがあります。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>