HTML・CSSでテーブル行にシンプルな下線を追加する方法

HTML・CSSでテーブル行（<tr>）に下線を追加する方法

方法1：CSSの border-bottom プロパティを使用する

コード例

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

tr {
  border-bottom: 1px solid #ccc;
}

実行結果

すべてのテーブル行に、1px幅の薄いグレーの下線が追加されます。

解説

• tr セレクタは、すべてのテーブル行を選択します。
• border-bottom プロパティは、下線のスタイルを指定します。
• 1px は、下線の幅をピクセル単位で指定します。
• solid は、下線の種類を「実線」に指定します。
• #ccc は、下線の色をグレー系の色コードで指定します。

ポイント

• 上記のコード例では、すべてのテーブル行に下線を追加していますが、特定の行のみ下線を追加したい場合は、その行のみに border-bottom プロパティを適用すればOKです。
• 下線の幅、種類、色は、自由に設定できます。

方法2：HTMLの border 属性を使用する

<table>
  <tr>
    <th border="bottom">名前</th>
    <th border="bottom">年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

表の見出し行のみ、下線が追加されます。

• border 属性は、テーブル要素の罫線のスタイルを指定します。
• bottom は、下線のみに罫線を適用することを指定します。

• この方法は、表の見出し行など、特定の行のみ下線を追加したい場合に便利です。

方法3：CSSの nth-child セレクタを使用する

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

tr:nth-child(even) {
  border-bottom: 1px solid #ccc;
}

• nth-child セレクタは、要素の子要素の順番を指定してスタイルを適用できます。
• even は、偶数番目の要素を指定します。

• この方法は、交互に下線を追加したい場合などに便利です。
• 具体的な行番号を指定して、特定の行のみ下線を追加することもできます。

HTMLとCSSでテーブル行（<tr>）に下線を追加するには、いくつかの方法があります。それぞれの方法の特徴を理解して、目的に合った方法を選択してください。

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

CSSコード

/* 方法1：すべてのテーブル行に下線を追加 */
tr {
  border-bottom: 1px solid #ccc;
}

/* 方法2：表の見出し行のみ下線を追加 */
th {
  border-bottom: 1px solid #ccc;
}

/* 方法3：偶数番目の行のみ下線を追加 */
tr:nth-child(even) {
  border-bottom: 1px solid #ccc;
}

上記3つの方法をすべて適用した結果、以下のようになります。

• 上記のコードは、あくまでもサンプルです。必要に応じて、下線の幅、種類、色などを変更してください。
• 複数の方法を組み合わせて、より複雑なデザインを実現することもできます。

テーブル行（<tr>）に下線を追加するその他の方法

方法4：CSSの border-collapse プロパティを使用する

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

table {
  border-collapse: collapse;
}

tr {
  border-bottom: 1px solid #ccc;
}

• border-collapse プロパティは、テーブルセルの境界線を隣接するセルの境界線と結合します。
• このプロパティを適用することで、下線がより強調されます。

• この方法は、すべてのテーブル行に下線を追加する場合に有効です。

方法5：CSSの box-shadow プロパティを使用する

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

tr {
  box-shadow: 0 0 5px 0 #ccc;
}

すべてのテーブル行に、下線に似た影を追加されます。

• box-shadow プロパティは、要素に影を付けることができます。
• このプロパティを使用することで、下線に立体感を持たせることができます。

• この方法は、下線に変化を与えたい場合に有効です。
• 影の色、オフセット、ぼかしなどを調整して、さまざまなデザインを実現できます。

方法6：JavaScriptを使用する

<table>
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>山田太郎</td>
    <td>30歳</td>
  </tr>
  <tr>
    <td>佐藤花子</td>
    <td>25歳</td>
  </tr>
</table>

const tableRows = document.querySelectorAll('tr');

for (const row of tableRows) {
  row.style.borderBottom = '1px solid #ccc';
}

• JavaScriptを使用することで、動的に下線を追加することができます。
• さまざまな条件に基づいて、下線のスタイルを変更することもできます。

• JavaScriptの知識が必要になります。