HtmlHow-ToBeginner · 4 min read

How to Add Border to Table in HTML: Simple Guide

To add a border to a table in HTML, use the border attribute inside the <table> tag or apply CSS styles like border to the table element. The border attribute adds a simple border, while CSS allows more control over border style, width, and color.

📐

Syntax

You can add a border to a table in two main ways:

Using the border attribute: Add border="1" inside the <table> tag to create a simple border.
Using CSS: Apply the border property in a style attribute or stylesheet for more styling options.

html

<table border="1">
  <!-- table rows and cells here -->
</table>

<!-- OR using CSS -->
<table style="border: 2px solid black;">
  <!-- table rows and cells here -->
</table>

💻

Example

This example shows a table with a black border using the CSS border property. It also adds borders to cells for clear separation.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Border Example</title>
  <style>
    table {
      border: 2px solid black;
      border-collapse: collapse;
      width: 50%;
      margin: 20px auto;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Apple</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$0.5</td>
    </tr>
  </table>
</body>
</html>

Output

A centered table with two columns labeled 'Item' and 'Price'. The table has a thick black border around it, and each cell has a thin black border. The rows show 'Apple' with '$1' and 'Banana' with '$0.5'.

⚠️

Common Pitfalls

Common mistakes when adding borders to tables include:

Using only the border attribute without styling cells, which can make the table look incomplete.
Not using border-collapse: collapse; in CSS, causing double borders between cells.
Using outdated HTML attributes instead of CSS for better control and styling.

html

<!-- Wrong way: only border attribute on table -->
<table border="1">
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
</table>

<!-- Right way: CSS with border-collapse and cell borders -->
<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <td style="border: 1px solid black;">Cell 1</td>
    <td style="border: 1px solid black;">Cell 2</td>
  </tr>
</table>

📊

Quick Reference

Method	Usage	Notes
HTML `border` attribute	`<table border="1">`	Simple border, limited styling
CSS border property	`table { border: 2px solid black; }`	Full control over style, width, color
CSS border-collapse	`border-collapse: collapse;`	Removes double borders between cells
Cell borders	`th, td { border: 1px solid black; }`	Borders on individual cells for clarity

✅

Key Takeaways

Use CSS border properties for better control over table borders.

Add borders to both the table and its cells for a clean look.

Apply border-collapse: collapse to avoid double borders between cells.

Avoid relying solely on the HTML border attribute as it is limited.

Use semantic HTML and CSS for accessible and styled tables.