【2026年8月最新】HTMLテーブルのborder（罫線）設定方法を徹底解説｜非エンジニアでも迷わない実践ガイド

「表に罫線（けいせん）を引きたいだけなのに、HTMLもCSSも分からず手が止まった」——社内資料や簡易ページを自分で作ろうとした経営者・管理職の多くが、一度はこの壁にぶつかります。Excelなら数クリックで済む「表に線を引く」という作業が、Webページ（HTML）になった途端に急に難しく感じられるのです。

HTMLのtable（表）にborder（枠線）をつける方法には、実は2つの流派があります。ひとつは古くからある「HTML属性で指定する方法」、もうひとつは現在主流の「CSSで指定する方法」です。さらに、線が二重になってしまう・色が変わらないといった「あるある失敗」も現場では頻発しています。

この記事では、HTMLタグの基礎から、border属性とCSSの違い、二重線を一本の線にまとめる方法、色を変える方法までを実例付きで整理します。加えて後半では、「この作業を自分で覚えるべきか、AIに任せるべきか」という非エンジニアが本当に知りたい判断基準にも踏み込みます。

代表菅澤

弊社でも会社案内ページや社内マニュアルの表組みを自分たちで整えることがよくあります。最初は border="1" と書いて満足していたのですが、CSSを覚えてから表現の幅が全く変わりました。今日はその実体験も交えてお伝えします。

AI鬼管理山崎

結論を先に言うと、「仕組みを理解する」ことと「毎回自分でコードを書く」ことは別の話です。仕組みは理解した上で、実際の作業はAIに任せるという選択肢もあります。この記事の後半で、その判断基準を整理します。

この記事を読み終える頃には、次の6つが明確になっているはずです。

01 BASICS なぜ経営者・非エンジニアもtableのborder設定を知っておくべきか 「表に線が引けない」は誰にでも起こる壁

1-1. tableタグとborderの基礎知識

<table>タグは、Webページの中に「表（マス目状のデータ）」を作るためのHTMLタグです。行を表す<tr>タグ、セル（マス目）を表す<td>タグを組み合わせて、Excelのような表組みをWebページ上に再現します。

<table>
  <tr>
    <td>項目</td>
    <td>内容</td>
  </tr>
  <tr>
    <td>会社名</td>
    <td>株式会社GENAI</td>
  </tr>
</table>

このコードだけでは、表の枠線（罫線）は表示されません。ブラウザで開くと、文字だけがマス目状に並んで見えるものの、線が一切引かれていない状態になります。ここに罫線をつけるのが、この記事のテーマです。

1-2. 非エンジニアがつまずく典型的な場面

弊社（株式会社GENAI）が経営者・管理職の方から相談を受ける中で、tableのborder設定でつまずく場面は主に3つのパターンに集約されます。

AI鬼管理山崎

検索して出てくる記事の多くは、いつ書かれたものか分からないまま情報だけが並んでいます。「これは古い書き方かもしれない」と疑いながら読む必要があるのは、非エンジニアにとってかなりのストレスだと思います。

02 LEGACY METHOD HTML属性でborderを設定する方法（レガシー手法） 一番シンプルだが、今は推奨されない書き方

最も手っ取り早い方法は、<table>タグに直接borderという属性（HTML属性）を書き加えることです。

<table border="1">
  <tr><td>項目</td><td>内容</td></tr>
  <tr><td>会社名</td><td>株式会社GENAI</td></tr>
</table>

border="1"と書くと、表全体とすべてのセルに線が引かれます。数字を大きくすると外枠の太さが増しますが、セル内側の線の太さには影響しません。線を消したい場合はborder="0"にするか、border属性そのものを書かなければ、線なしの表になります。

2-1. border属性の限界

border属性には大きな弱点があります。線の色・太さ・種類（実線/点線）を柔軟に変更できないことです。属性値の数字を変えても外枠が太くなるだけで、セル内の線を細くしたり、色を変えたりすることはできません。凝ったデザインの表を作りたい場合、border属性だけでは早々に限界が来ます。

代表菅澤

弊社の初期の資料ページも、最初はborder="1"で作っていました。ただ「もう少し線を薄いグレーにしたい」と思った瞬間に、HTML属性ではどうにもならないことに気づいて、CSSに書き直した経験があります。

03 MODERN CSS CSSで正しく罫線を設定する方法（現在の標準） border-collapseとセレクタの考え方を押さえる

現在のWeb制作で標準とされているのは、HTML属性を使わず、CSS（スタイルシート）で罫線を指定する方法です。

<style>
  table, th, td {
    border: 1px solid #333;
  }
</style>

<table>
  <tr><td>項目</td><td>内容</td></tr>
</table>

このコードでは、table・th・tdという3種類の要素すべてにborder: 1px solid #333;を指定しています。「1px（太さ1ピクセル）・solid（実線）・#333（濃いグレー）」という3つの情報を1行で表現できるのが、CSSの強みです。

3-1. なぜborder属性ではなくCSSが推奨されるのか

CSSを使う最大のメリットは一元管理です。border属性は表1つ1つに書き込む必要がありますが、CSSなら1箇所の記述を変更するだけで、サイト内すべての表のデザインを一括で変更できます。社内資料が10ページ、20ページと増えていく状況を想像すると、この差は決定的です。

AI鬼管理山崎

HTMLとCSSの役割分担は、会社組織にたとえると「構造（誰がどの部署に属するか）」と「運用ルール（服装や働き方）」の関係に近いです。構造をコロコロ変えるより、運用ルールだけを一括で更新する方が、変更は圧倒的に楽になります。

ここまでの流れを整理すると、「HTMLで骨組みを作り、CSSで線の見た目を整え、border-collapseで二重線を解消し、最後に色を調整する」という4ステップになります。次の章では、実際につまずきやすい「二重線問題」と「色の変更」を具体的なコードで解説します。

04 PRACTICAL PATTERNS 二重線を一本にする・色を変える実践パターン border-collapseとborder-colorの使い方

先ほどのCSSコードをそのまま使うと、実は表の内側の線が二重線になって表示されます。table自体の外枠と、各セル（td）の線がそれぞれ独立して描画されるため、隣り合うセルの境目に線が2本重なって見えてしまうのです。

table, th, td {
  border: 1px solid #333;
}
table {
  border-collapse: collapse;
}

border-collapseを指定するのはtable要素1箇所だけで構いません。tdやthに個別に指定する必要はなく、表全体に対して一度書けば、内部のすべてのセル境界に反映されます。

4-1. 線の色を変える方法

線の色を変えたい場合はborder-colorプロパティを使います。

table, th, td {
  border: 1px solid #333;
}
table {
  border-collapse: collapse;
}
th {
  border-color: #dc2626;
  background-color: #fef2f2;
}

このコードでは、見出し行（th）だけborder-colorを赤系に変更し、背景色も薄い赤にしています。このように要素ごとに個別のスタイルを重ねられるのがCSSの柔軟性で、border属性では再現できない表現です。

AI鬼管理山崎

border-collapseは本当に「知っているかどうか」だけの世界です。知らないと延々と二重線に悩まされますが、知っていれば1行追加するだけで解決します。こうした「知っているかどうかで作業時間が大きく変わる」ポイントは、HTML/CSSに数多く存在します。

05 TROUBLESHOOTING よくある失敗とトラブルシューティング 非エンジニアが実務でぶつかりやすい5つの壁

ここでは、弊社が実際に相談を受けてきた中で頻度の高い失敗パターンを5つ紹介します。原因さえ分かれば、対処自体は数行のコード修正で済むケースがほとんどです。

5-1. スマホ表示で崩れる問題への対処

特に相談が多いのが、パソコンでは綺麗に見えていた表が、スマートフォンで開くと横に潰れて読めなくなる問題です。表の列数が多い場合、画面幅に収まりきらずに文字が縮小されたり、レイアウトがはみ出したりします。

代表菅澤

弊社のサイトでも、料金比較表がスマホで潰れてしまい問い合わせが来たことがあります。原因を調べるより先に、まず横スクロール対応を入れるだけで応急処置になるというのは、覚えておいて損はない知識です。

こうしたトラブルシューティングは、原因さえ分かれば対処自体は数行のコード修正で済むケースがほとんどです。しかし非エンジニアにとっては、そもそも「何が原因か」を特定する作業自体が最大のハードルになります。ここからは、この「原因特定と修正」という作業を、弊社が実際にどう効率化しているかを紹介します。

06 GENAI CASE STUDY 【独自データ】GENAI実運用：表デザインの修正をClaude Codeに任せている実例 Max 20xプラン契約企業が、HTML/CSSの細かい修正をどう扱っているか

ここからは弊社（株式会社GENAI）の実例です。弊社ではClaude Max 20xプラン（月額$200・約30,000円）を契約し、経営・営業・広告・開発・経理・秘書業務まで社内のあらゆる業務でClaude Codeを活用しています。開発領域では、WordPressやLP（ランディングページ）制作、表組みを含む細かいHTML/CSS修正も、Claude Codeに任せる場面が多くあります。

例えば「この表の罫線をもう少し薄いグレーにして、見出し行だけ背景色をつけてほしい」という指示を日本語のまま伝えると、border-collapseの指定漏れやセレクタの選定まで含めてコードが生成されます。非エンジニアの担当者がCSSのプロパティ名を覚えていなくても、完成形をイメージして言葉で伝えるだけで修正が反映される体験です。

注意したいのは、「完全に手離れする」わけではないという点です。生成されたコードが意図通りかを人間が確認する工程は必ず発生します。それでも、CSSのプロパティ名を1つ1つ調べながら書く作業と比較すると、確認作業だけで済む分、体感の負荷は大きく下がります。

代表菅澤

HTML/CSSを自分で完璧に覚える必要はもうないというのが正直な実感です。仕組みを理解した上で「これはAIに任せた方が早い」と判断できるかどうかが、これからの経営者・管理職に求められるスキルだと思っています。

AI鬼管理山崎

弊社では「依頼→生成→確認→反映」というシンプルな4ステップに業務を分解しています。確認の工程を絶対に省略しないことが、品質を保ったまま作業時間を圧縮するコツです。

07 DECISION CRITERIA 【独自】「自分で覚える」vs「AIに任せる」の判断基準 すべてを覚える必要はない。判断基準を持つことが重要

ここまでHTML属性とCSSの違い、二重線の解消方法、色の変更方法を解説してきました。最後に、非エンジニアの経営者・管理職が本当に知りたいであろう問い——「これは自分で覚えるべきか、AIに任せるべきか」——に答えます。

7-1. 「仕組みの理解」と「作業の実行」は分けて考える

ここで強調したいのは、「AIに任せる」ことと「仕組みを理解しなくていい」ことはイコールではないという点です。border-collapseが何をしているかを理解していれば、AIが生成したコードが正しいかどうかを判断できます。逆に仕組みを一切理解していないと、AIの出力が意図通りかどうかを確認する術がありません。

弊社の経験上、非エンジニアの経営者・管理職がゼロからCSSを体系的に学ぶ時間対効果は、正直なところ高くありません。それよりも「何が起きているかを大まかに理解した上で、実際の作業はAIに指示する」というスタイルの方が、限られた時間の中で成果を出しやすいというのが実感です。

AI鬼管理山崎

よく「AIに任せると自分の力にならないのでは」と聞かれますが、弊社の考え方は逆です。仕組みの理解に時間を使い、単純作業の実行はAIに任せることで、経営者は「判断」により多くの時間を割けるようになります。

08 CONCLUSION まとめ ── 表の罫線設定から見える「学ぶ」と「任せる」の使い分け HTML/CSSの基礎知識と、AI活用の判断基準を両方持つ

この記事では、HTMLのtable（表）にborder（罫線）を設定する方法を、HTML属性・CSSの2つのアプローチから解説し、二重線の解消・色の変更・トラブルシューティングまでを実例付きで整理しました。最後にポイントを振り返ります。

HTMLとCSSの世界は、この記事で紹介したborder設定のように「知っているかどうかで作業時間が大きく変わる」ポイントが数多く存在します。すべてを自分で覚えるか、必要な時にAIに任せるか——どちらか一方を選ぶのではなく、状況に応じて使い分けることが、非エンジニアの経営者・管理職にとって最も現実的な選択だと弊社は考えています。

代表菅澤

弊社では「AI鬼管理」というサービスで、Claude Codeを使った業務自動化の設計から伴走まで支援しています。表組みの調整のような小さな作業から、業務プロセス全体の見直しまで、無料相談で具体的にお答えしますので、お気軽にどうぞ。

HTML/CSSを覚える時間がなくても、Claude Codeで業務は前に進められます

社内資料の表組み調整からLP全体の改善まで、AI鬼管理が実運用ノウハウをもとに導入設計をサポートします。
「何から始めればいいか分からない」という段階からご相談いただけます。

AI鬼管理山崎

まずは無料相談で、貴社の業務の中でどこにAIを組み込むと一番インパクトが大きいかを一緒に整理しましょう。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？

AI活用を自社で回せるようになりたい方へ

AI鬼管理

Claude Code・Cowork導入支援から業務設計・社内浸透まで実践ベースで伴走。「自社で回せる組織」を90日で作る経営者向けトレーニング。

AI鬼管理を詳しく見る →

業務を丸ごと任せたい方へ

AIBPO by AI鬼管理

請求処理・データ入力・問い合わせ対応などの定型業務を、AI×人の品質管理体制で丸ごと代行。いまのコストの50%目安で、日々は成果物を承認するだけ。

AIBPOを詳しく見る →

よくある質問

Q. HTML属性のborderは、もう使ってはいけないのですか？

A. 完全に禁止されているわけではなく、現在のブラウザでも表示は可能です。ただし色や線の種類を細かく指定できない、複数ページへの一括反映ができないといった制約が大きいため、新しく表を作る場合はCSSでの指定を優先することをおすすめします。既存ページの保守で使われている分には、急いで書き換える必要はありません。

Q. border-collapseとborder-spacingの違いは何ですか？

A. border-collapseは、table・th・tdがそれぞれ持つ線を1本に統合するかどうかを決めるプロパティです。一方border-spacingは、border-collapseがseparate（初期値）の状態で、セルとセルの間の余白（間隔）を調整するためのプロパティです。二重線を解消したいだけであれば、まずborder-collapse: collapseを試してください。

Q. 表の一部のセルだけ線の色を変えることはできますか？

A. できます。CSSのセレクタを使えば、特定の行や列、あるいは個別のセルにだけborder-colorを指定できます。例えば見出し行だけthセレクタで色を指定したり、特定のセルにクラス名をつけて個別にスタイルを当てたりする方法が一般的です。要素ごとに柔軟にスタイルを重ねられるのがCSSの強みです。

Q. スマホで表が崩れる問題は、どこまで自分で対処できますか？

A. 簡易的な対処であれば、表全体をdivタグで囲み、overflow-x: autoを指定するだけで横スクロール対応が可能になり、多くの場合はこれで実用上の問題は解消します。ただし、列数が非常に多い表を根本的にスマホ向けにレイアウトし直す場合は、CSSの設計変更が必要になり、難易度が上がります。

Q. ExcelのセルとHTMLのtableは、そもそも仕組みが違うのですか？

A. 見た目は似ていますが、仕組みは大きく異なります。ExcelはセルごとにGUI（画面操作）で書式を設定しますが、HTMLのtableは「タグで構造を作り、CSSで見た目を指定する」というテキストベースの仕組みです。慣れるとCSSの方が一括変更や複数ページへの反映が圧倒的にやりやすくなります。

Q. Claude Codeに表のデザイン修正を頼むとき、どう指示すればいいですか？

A. 「この表の線をもう少し薄いグレーにして、見出し行に背景色をつけてほしい」のように、完成形を日本語でそのまま伝えるだけで十分です。border-collapseやborder-colorといったCSSのプロパティ名を覚えている必要はなく、見た目のイメージを言葉にできれば、コードの生成と修正はClaude Code側で行われます。

Q. border属性とCSSのborderを両方書いてしまった場合、どちらが優先されますか？

A. 基本的にはCSSの指定が優先されます。HTML属性のborderは見た目の初期値程度の役割に留まり、CSSで明示的にborderプロパティを指定すると、そちらの値で上書きされます。混在させると意図しない見た目になることがあるため、どちらか一方に統一して管理するのが安全です。

監修 最終更新日: 2026年8月13日

菅澤 孝平 株式会社GENAI 代表取締役

• AI業務自動化サービス「AI鬼管理」を運営 — Claude Code を活用し、経営者の業務を「AIエージェントに任せる仕組み」へ転換するパーソナルトレーニングを 伴走構築 で提供。日報・採用・問い合わせ対応・経費精算・議事録・データ集計・営業リスト等の定型業務を、AIに代行させる体制を経営者と一緒に作り込む
• Claude Code 実装ノウハウを 経営者・法人クライアント に直接指導。生成AIを「便利ツール」ではなく 「業務を任せる存在」 として運用する手法を体系化
• 「やらせ切る管理」メソッドの開発者。シンゲキ株式会社（2021年設立・鬼管理専門塾運営）にて累計3,000名以上の学習者を志望校合格に導いた管理メソッドを、AI × 経営者支援 に転用
• 著書『3カ月で志望大学に合格できる鬼管理』(幻冬舎)、『親の過干渉こそ、最強の大学受験対策である。』(講談社)
• メディア出演: REAL VALUE / カンニング竹山のイチバン研究所 / ええじゃないかBiz 他
• 明治大学政治経済学部卒

現在は AI鬼管理（Claude Code活用の伴走型パーソナルトレーニング）を主事業とし、経営者と二人三脚で「AIに業務を任せる仕組み」を実装。「実行を強制する環境」を AI で構築する手法を、自社の実運用知見をもとに発信している。

▸ 代表 菅澤孝平 のプロフィール詳細を見る