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>

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

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

格子を付けたいなら、「<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>…………
member score
take 90
miho 93
yoshi 80
ryu 68
sachi 100