HTMLのtable borderとは？表の枠線を設定・デザインする方法を徹底解説

HTMLで表（table）を作成する際、デザインや見た目を大きく左右するのが「border（枠線）」の設定です。

枠線の太さや色、線の結合方法を調整することで、表の視認性が向上し、より洗練されたレイアウトを実現できるためです。

本記事では、HTMLにおけるtableタグの基本から、border属性の具体的な使い方、線のカスタマイズ方法までを初心者にもわかりやすく解説します。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

HTMLにおけるtable（表）とは？

HTMLにおけるtableタグは、Webページ上で表（テーブル）を作成するための要素です。

行（row）と列（column）を使って、情報を整理・視覚的にわかりやすく表示できるため、データ一覧やスケジュール表、料金表などで幅広く活用されています。

tableは情報を体系的に伝える場面では重要な役割を果たし、リストでは伝えにくい複数項目の比較や、定型的なレイアウトを必要とするデータ表現に不可欠です。

ユーザーとしても視認性が高く、内容を直感的に理解しやすいメリットがあります。

tableの構成と実行例

HTMLのtableは、一般的に以下のような構成要素で作られます：

たとえば、基本的なtable構文と結果を以下に記します。

<table border="1">
  <tr>
    <th>名前</th>
    <th>年齢</th>
  </tr>
  <tr>
    <td>佐藤</td>
    <td>28</td>
  </tr>
  <tr>
    <td>鈴木</td>
    <td>34</td>
  </tr>
</table>

実行結果：

このように、行ごとに<tr>、列の内容には<td>や<th>を使うのが基本です。

次章では、表の「枠線（border）」をどのように設定・調整できるかを詳しく見ていきます。

tableのborder（枠線）とは？

HTMLにおけるborderとは、表（table）のセルや外枠に線を表示するための属性やCSSプロパティのことです。

もともとはHTMLタグに直接、

border="1"

などと記述することで枠線を表示できましたが、現在ではより柔軟なCSSを使い、デザイン調整を行うのが一般的です。

枠線は、表の区切りを視覚的に明確にするための重要な要素です。

たとえば、線の太さ・色・スタイル（実線・点線など）を調整することで、単なる情報の羅列が「見やすく整理された表」に変わります。

特にデータ表や価格表、スケジュールのように複数項目が並ぶ場合、borderの使い方ひとつで印象や使いやすさが大きく変わります。

次の章からは、HTMLやCSSでのborderの基本的な使い方や応用テクニックを順を追って紹介していきます。

boder属性の使い方・設定方法

この章では、boder属性の使い方・設定方法として、以下をそれぞれ詳しく解説していきます。

• boder属性の使い方・設定方法
• border属性を設定する方法
• border属性を消す方法
• border属性で二重線を一本線にする方法
• borderで線の色を変える方法
• borderで枠線の間隔を変える方法
• border属性の枠線を結合する方法

border属性を設定する方法

HTMLの<table>タグにborder属性を追加することで、表全体に枠線を表示できます。最も基本的な構文は以下のとおりです。

<table border="1">
  <!-- 表の内容 -->
</table>

border=”1″の数値部分を変えることで、線の太さを調整できます。数字が大きいほど太い枠線になります。以下は実際の使用例です。

<table border="2">
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>100円</td>
  </tr>
</table>

実行結果：

また、現在主流となっている「CSSで枠線を作成する方法」については、以下の記事が参考になります。

border属性を消す方法

HTMLで設定した表の枠線（border）を消すには、いくつかの方法があります。

もっとも簡単な方法は、<table>タグに書かれているborder属性を削除することです。

修正前

<table border="1">

修正後

<table>

また、CSSでスタイルを設定している場合は、以下のように

border: none;

を別途指定すれば、枠線を消せます。

<table style="border: none;">

border属性で二重線を一本線にする方法

HTMLで表（table）に枠線を設定した際、セル同士の境界が「二重線」のように見えてしまうことがあります。

これは、各セル（<td>や<th>）がそれぞれ独立して枠線を持っているため、隣り合う線が重なって表示されるためです。

この二重線を一本線にまとめて、すっきりとした見た目にするには、CSSのborder-collapseプロパティを使います。

<table border="1" style="border-collapse: collapse">
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>100円</td>
  </tr>
</table>

実行結果：

表の枠線がスッキリ整い、より読みやすい見た目に仕上がりました。

borderで線の色を変える方法

HTMLのtableで表示される枠線の色は、CSSのborder-colorプロパティを使って変更できます。

<table style="border: 2px solid blue; border-collapse: collapse;">
  <tr>
    <th>商品名</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>りんご</td>
    <td>150円</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>100円</td>
  </tr>
</table>

実行結果：

HTMLのborder属性だけでは色の指定はできないため、線の色をカスタマイズしたい場合は、CSSによるスタイル指定が必要です。

なお、色の指定方法には、次のような種類があり、用途によって柔軟に使い分けることが可能となっています。

• カラー名（例：red、blue、green）
• 16進数コード（例：#ff0000）
• RGB値（例：rgb(255,0,0)）

tableの色の指定についてより詳しく知りたい方は、以下の記事も参考にしてください。

borderで枠線の間隔を変える方法

HTMLのtableにおいて「枠線の間隔」を変えるには、主にborder-spacingプロパティを使います。

これは、セル同士の間にどれくらいの空白（間隔）をあけるかを指定できるCSSのプロパティです。使用例は以下です。

<table style="border: 2px solid black; border-spacing: 10px; border-collapse: separate;">
  <tr>
    <th style="border: 1px solid black;">項目</th>
    <th style="border: 1px solid black;">値</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">温度</td>
    <td style="border: 1px solid black;">25℃</td>
  </tr>
</table>

実行結果：

上記の実行結果では、10pxの間隔が生まれています。「border-spacing」の後に、空ける間隔の数字を指定しているためです。

なお、各項目を黒い線で囲っているのは、空いている間隔がわかりやすくするためです。tableの間隔調整についてもっと詳しく知りたい方は、以下の記事をご覧ください。

border属性の枠線を結合する方法

HTMLのtableでは、見た目や構造を整理するために「セルの結合」がよく使われます。

セルを結合することで、表の中で強調したい情報や、行・列にまたがる見出しなどをわかりやすく表現できるからです。

セルを結合する際は、HTMLのrowspan属性（縦方向）またはcolspan属性（横方向）を使います。それぞれ、順に見ていきましょう。

H4 縦方向に結合する場合のやり方

縦に並ぶ複数のセルを1つにまとめるには、<td>または<th>タグにrowspan属性を指定します。

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black;" rowspan="2">項目</th>
    <td style="border: 1px solid black;">温度</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">湿度</td>
  </tr>
</table>

実行結果：

このように、縦2行にまたがる「項目」セルが1つに結合されます。

rowspan="2"

上記の数字は、結合するセル数のことです。

H4 横方向に結合する場合のやり方

横に並ぶ複数のセルを1つにまとめたい場合は、colspan属性を使います。

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black;" colspan="2">計測データ</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">温度</td>
    <td style="border: 1px solid black;">湿度</td>
  </tr>
</table>

実行結果：

セルの結合と枠線の整形をうまく使うことで、表の視野性が向上し、情報がさらに伝わりやすくなります。

複雑な表を作成する際には、ぜひ積極的にrowspan・colspanを活用してみましょう。セル結合についてもっと深堀りしたい方は、以下の記事をご覧ください。

まとめ

ここまで、HTMLのtableやborderについて解説してきました。

HTMLのtableは、情報を整理して伝えるうえで非常に重要な要素であり、中でもborder（枠線）の設定は、表の見やすさや印象を大きく左右します。

枠線の有無や太さ、色、セルの結合方法などを工夫するだけで、視認性に大きな差が生じます。

HTML属性はもちろん、現代では主流のCSSを活用することで、デザインの幅も広がります。

ぜひ本記事を参考に、視認性の高い表デザインを作ってみてください。

「本格的にHTMLやCSSを学びつつ、実務でも使えるスキルを身につけたい」と感じた方には、DMM WEBCAMPのフロントエンドコースがおすすめです。

モダンなフレームワークであるVue.jsや、Firebaseによるバックエンド開発を基礎から学べる実践型カリキュラムで、非同期チャットアプリなど本格的なWebサービスの開発にも挑戦できます。

週2回のマンツーマンメンタリングと、現役エンジニアによる質問サポート体制も充実しており、「一人では続けられない」「挫折が不安」という方でも安心です。

さらに経済産業省のリスキリング支援制度により、受講料の最大70％が補助される制度も活用可能。学びながら将来のキャリアアップにも直結する内容となっています。

そしてDMM WEBCAMPは、満足度90%の無料相談を設けています。専属カウンセラーがコース選びはもちろん、キャリア相談まで、どんなことでも親身になって対応しますので、ぜひこの機会にお気軽にご相談ください！

＞＞DMM WEBCAMP フロントエンドコースの詳細はこちら