HTMLのtableタグに格子線をつけたい！

結論

「<table border=”1″>」でいけます。

詳細

「style=””」は使わない！？

CSSの設定で「<table style=”border:1px;”>」とすれば出来るのかなと思ったのですができませんでした。

Google検索「table 格子 付けたい」
border-style－スタイルシートリファレンス

マークダウンでは次のように記述します。

member | score
- | -
take | 90
miho | 93
yoshi | 80
ryu | 68
sachi | 100

これを「markdownテキスト変換ツール」で変換すると次を得ることができます。

<table>
<thead>
<tr>
  <th>member</th>
  <th>score</th>
</tr>
</thead>
<tbody>
<tr>
  <td>take</td>
  <td>90</td>
</tr>
<tr>
  <td>miho</td>
  <td>93</td>
</tr>
<tr>
  <td>yoshi</td>
  <td>80</td>
</tr>
<tr>
  <td>ryu</td>
  <td>68</td>
</tr>
<tr>
  <td>sachi</td>
  <td>100</td>
</tr>
</tbody>
</table>

表示は次のようになります。

格子を付けたいなら、「<table border=”1″>」を記述します。もう一つ設定しました。「style=”border-collapse: collapse”」を追加してデフォルトの二重枠線を単線にしました。

Google検索「table border 二重線」
HTMLのtable（表）のborder（枠線）を設定する方法を解説！ | 侍エンジニア塾ブログ（Samurai Blog） – プログラミング入門者向けサイト

<table border="1">
<thead>
<tr>
  <th>member</th>
  <th>score</th>
</tr>…………