How to Add a Border to an HTML Table-html教程-PHP中文网

How to Add a Border to an HTML Table

This tutorial explains how to properly add visible borders to HTML tables using both legacy border attributes and modern CSS techniques—with clear examples, common pitfalls, and best practices.

this tutorial explains how to properly add visible borders to html tables using both legacy `border` attributes and modern css techniques—with clear examples, common pitfalls, and best practices.

Adding a visible border to an HTML table is a fundamental styling task—but it’s also a frequent source of confusion, especially for beginners. In your original code, the

element has no border defined, so browsers render it without visible borders by default—even though the table structure is perfectly valid.

✅ Quick Fix: The Legacy border Attribute

The simplest (but outdated) way is to add the border attribute directly to the

tag:

Name	Courses	Marks
Suresh	Btech	89
Mukesh	MBA	75
Kamlesh	BA	90

⚠️ Note: The border attribute is obsolete in HTML5. While it still works in most browsers for backward compatibility, it’s not recommended for new projects—it mixes presentation with structure and offers limited control (e.g., no border color, style, or individual cell customization).

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ Recommended Approach: CSS Borders

Use external or internal CSS for full control, semantic clarity, and responsiveness:

<style>
  #table {
    border-collapse: collapse; /* Ensures borders merge cleanly */
    width: 100%;
  }
  #table th,
  #table td {
    border: 1px solid #333; /* Uniform border on all cells */
    padding: 8px;
    text-align: left;
  }
  #table th {
    background-color: #f2f2f2;
  }
</style>

? Key CSS properties explained:

border-collapse: collapse prevents double borders between adjacent cells (the default separate causes gaps).
border: 1px solid #333 applies a thin, solid, dark-gray border to each and .
You can further customize with border-radius, box-shadow, or hover effects—impossible with the border attribute.

? Pro Tips & Common Pitfalls

❌ Never omit closing tags like or

✅ Use semantic table structure: , , and improve accessibility and SEO.
? Avoid border="0" when you want no border — use CSS border: none instead for consistency.
? Debug tip: Inspect the table in browser DevTools (F12) to verify whether borders are applied—and whether border-collapse is set correctly.

In summary: while border="1" gets you a quick visual result, embracing CSS-based borders ensures maintainability, design flexibility, and standards compliance. Start with border-collapse: collapse and build from there.

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！