How to Add a Border to an HTML Table Without Using CSS

Adding a border to a table helps make your data easier to read and visually organized. While CSS is the modern way to style borders, you can still add a border without using any CSS, using just plain HTML attributes.

In this blog post, you’ll learn:

• ✅ How to add borders to tables using pure HTML
• 🧪 Practical examples with the border attribute
• ⚠️ Why this method is outdated but still useful for learning

✅ The border Attribute (HTML-only)

To add a border to a table in HTML without CSS, use the border attribute directly in the <table> tag.

📌 Syntax:

<table border="1">
  <!-- Table rows and data go here -->
</table>

The value of the border attribute defines the thickness of the border in pixels.

🧪 Example: Table With a Simple Border

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>$0.50</td>
  </tr>
</table>

✅ This creates a table with a 1-pixel-wide border around each cell.

🔢 Customizing Border Width

You can increase the number in the border attribute to make the border thicker:

<table border="3">
  ...
</table>

✅ This will give you a 3-pixel-wide border around the table and its cells.

⚠️ Important Notes

❌ Deprecated in HTML5

• The border attribute is no longer recommended in modern HTML (deprecated in HTML5).
• For better flexibility and accessibility, use CSS instead.

✅ But it still works in most browsers and is useful for quick tests, learning, or internal tools.

🧠 Summary

🏁 Final Thoughts

While the <table border="1"> method is considered outdated by modern HTML standards, it’s still a valid and simple way to quickly add a border to a table without needing CSS. It’s great for beginners or fast prototyping, but for production websites, switch to CSS for better control and design.