table内のｔｒタグにborder-bottomを適用して罫線を表示する方法

カテゴリ：HTML　タグ：TABLE

HTMLで表をつくる際につかうtable（テーブル）タグ。
スタイルシートでborder-bottomプロパティを使用して、ノート風罫線のような見栄えにすることができます。

見出し1	内容1
見出し2	内容2
見出し3	内容3
見出し4	内容4
見出し5	内容5

ただし、tableのborder-collapseプロパティの値がcollapseに設定されていることが前提です。

border-collapseとは？

隣接するセルのボーダーを重ねて表示するか、間隔をあけて表示するかを指定するプロパティです。
【値】
・重ねて表示：collapse
・間隔をあけて表示：separate

コードを書いて試してみよう

HTML記述例

<table>
<tr><th>見出し1：</th><td>内容1</td></tr>
<tr><th>見出し2：</th><td>内容2</td></tr>
<tr><th>見出し3：</th><td>内容3</td></tr>
<tr><th>見出し4：</th><td>内容4</td></tr>
<tr><th>見出し5：</th><td>内容5</td></tr>
</table>

CSS記述例

table{border-collapse:collapse;} 　//隣接するセルのボーダーを重ねて表示する
tr{border-bottom:1px dashed #ccc;} //trに下線を表示する

※その他必要に応じて、セルの横幅や余白などを設定してください。

trタグにborder-bottomを設定することで、同じ行に複数のセルが並んでいてもセル毎の設定は不要になります。