How to Use HTML Table Border Tag: Complete Guide with Code Examples

HTML Tutorials · HTML Table Borders Tag · Introduction

HTML Table Borders Tutorial: Border Attribute, CSS Borders & Styling Explained

HTML tables are used to display data in a structured format, typically in rows and columns. Also main important feature of HTML tables is the ability to add borders, this helps to table cells, rows, and columns, making data easier to read and visually organized.

This tutorial covers six distinct border styles with rendered examples, the CSS properties behind them, how to move from inline styling to a reusable stylesheet class, individual cell borders versus whole-table borders, responsive behavior on small screens, and accessibility basics, plus a live playground further down the page where you can test any border style instantly.

Table Border Styling Examples

Six practical border styles, from a basic solid line to a rounded, colored border, each with the exact code and its rendered result.

📋 1. Basic Table Border

<table style="border: 1px solid black;">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

🧹 2. Dotted Table Borders

<table style="border: 2px dotted blue;">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>$10</td>
  </tr>
</table>

🧹 3. Round Table Borders Example

<table style="border: 2px solid gray; border-radius: 10px;">
  <tr>
    <th>Language</th>
    <th>Difficulty</th>
  </tr>
  <tr>
    <td>Python</td>
    <td>Easy</td>
  </tr>
</table>

🧹 4. Style Table Borders Example

<table style="border: 3px double black;">
  <tr>
    <th>Country</th>
    <th>Capital</th>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
  </tr>
</table>

🧹 5. Collapsed Table Borders Example

<table style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th>Product</th>
    <th>Qty</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>50</td>
  </tr>
</table>

🧹 6. Border Color Example

<table style="border: 2px solid; border-color: orange;">
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Gym</td>
  </tr>
</table>

🔍 Table Tag Breakdown

Try It Yourself (Copy This Code and Paste. See how it works). Paste any of the six border examples above into the live playground below and adjust the width, style, or color values to see the change instantly.

Live Code Preview

CSS Border Properties Quick Reference

Every border example on this page combines three separate CSS values, width, style, and color, into a single shorthand property. Understanding each piece individually makes it much easier to build a custom border from scratch rather than copying an example.

Writing border: 2px dotted blue;, as the Dotted Table Borders example earlier on this page does, is really just these three parts written together in width-style-color order, the standard order CSS expects for the border shorthand property.

Responsive Table Borders on Small Screens

A table that looks perfectly organized on a desktop monitor can become cramped or force horizontal scrolling on a narrow phone screen, since table columns do not naturally reflow the way paragraphs do. A couple of simple techniques keep bordered tables usable on smaller devices.

<div style="overflow-x: auto;">
    <table style="border-collapse: collapse; width: 100%;">
        <tr>
            <th style="border:1px solid #333; padding:6px;">Name</th>
            <th style="border:1px solid #333; padding:6px;">Age</th>
        </tr>
        <tr>
            <td style="border:1px solid #333; padding:6px;">John</td>
            <td style="border:1px solid #333; padding:6px;">30</td>
        </tr>
    </table>
</div>

Wrapping a table in a <div> with overflow-x: auto; lets a wide, bordered table scroll horizontally within its own container on a small screen, rather than breaking the rest of the page's layout or shrinking every column down to an unreadable width.

Real-World Example: A Bordered Pricing Table

To see several border techniques from this page working together, here is a small pricing table combining a custom border color, collapsed borders, and a styled header row:

<table style="border: 2px solid #2563eb; border-collapse: collapse; width: 100%;">
    <tr>
        <th style="border:1px solid #2563eb; padding:8px; background:#eff6ff;">Plan</th>
        <th style="border:1px solid #2563eb; padding:8px; background:#eff6ff;">Price</th>
    </tr>
    <tr>
        <td style="border:1px solid #2563eb; padding:8px;">Basic</td>
        <td style="border:1px solid #2563eb; padding:8px;">$9/mo</td>
    </tr>
    <tr>
        <td style="border:1px solid #2563eb; padding:8px;">Pro</td>
        <td style="border:1px solid #2563eb; padding:8px;">$29/mo</td>
    </tr>
</table>

Reading through this example: the outer table border, individual cell borders, and header background color all use the same blue tone for a cohesive look, border-collapse: collapse; keeps the grid lines clean and single, and padding gives each cell enough breathing room to stay readable. This is close to how a real pricing table on a marketing page would be built, just with inline styles instead of a shared class for simplicity, though moving it into a .pricing-table class in a stylesheet, using the same technique covered earlier on this page, would be the natural next step for a production site.

Try pasting this pricing table into the live editor above and swapping the plan names, prices, and border color to build a version of your own.

Understanding the border-collapse Property

The Collapsed Table Borders example earlier on this page uses a property worth understanding on its own: border-collapse. By default, every table cell draws its own separate border, which means where two cells touch, you actually see two border lines sitting right next to each other, making the overall grid look thicker and slightly uneven.

Most real, production tables use border-collapse: collapse;, since a clean, single-line grid generally looks more polished than the doubled default, which is exactly why the reference examples on this page mostly include it.

Styling Table Borders with Internal or External CSS

Every example so far uses an inline style attribute directly on the <table> tag, which is perfect for quick practice, but repeating the same styling on every table across a real website is inefficient. Moving the same rules into an internal or external stylesheet, using a class selector, solves this the same way it did for text styling earlier in this tutorial series.

<style>
    .data-table {
        border-collapse: collapse;
        width: 100%;
    }
    .data-table th, .data-table td {
        border: 1px solid #333;
        padding: 8px 12px;
        text-align: left;
    }
    .data-table th {
        background-color: #f0f0f0;
    }
</style>

<table class="data-table">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
</table>

Every table that uses class="data-table" automatically picks up identical borders, spacing, and header shading, and updating the single .data-table rule in the stylesheet instantly restyles every table on the site that uses it, without touching a single HTML file.

Individual Cell Borders vs Whole-Table Borders

Every example on this page so far has applied a border to the <table> tag itself, but borders can just as easily be applied to individual <th> or <td> cells instead, which is actually necessary once border-collapse: collapse; is in use, since the outer table border alone will not draw lines between individual cells.

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid black; padding: 6px;">Name</th>
    <th style="border: 1px solid black; padding: 6px;">Score</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 6px;">Amit</td>
    <td style="border: 1px solid black; padding: 6px;">92</td>
  </tr>
</table>

Here, the border is applied to each <th> and <td> individually rather than to the table as a whole, which is exactly the pattern this tutorial page's own rendered previews use behind the scenes, and it is the more common real-world approach once a table has more than a couple of rows.

Common Mistakes With HTML Table Borders

• Setting a border only on the table tag and expecting individual cell lines to appear automatically, when border-collapse: collapse; and per-cell borders are usually both needed for a full grid.
• Forgetting border-collapse entirely, resulting in the doubled, slightly uneven default border appearance between cells.
• Leaving a table tag unclosed or a row missing its closing </tr>, which can distort the entire table's structure, exactly the kind of bug worth double-checking with the live editor above.
• Repeating the same inline border styling across many separate tables instead of using a shared class in a stylesheet.
• Mixing up border-color and border shorthand, forgetting that border-color only sets color and needs the width/style still defined separately, as shown in the Border Color example earlier on this page.

Table Accessibility Basics

The Table Tag Breakdown above lists several tags, <caption>, <thead>, and <tbody>, that go beyond pure border styling and genuinely help both screen readers and search engines understand a table's structure.

<table style="border-collapse: collapse;">
  <caption>Weekly Activity Schedule</caption>
  <thead>
    <tr>
      <th style="border:1px solid #333; padding:6px;">Day</th>
      <th style="border:1px solid #333; padding:6px;">Activity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border:1px solid #333; padding:6px;">Monday</td>
      <td style="border:1px solid #333; padding:6px;">Gym</td>
    </tr>
  </tbody>
</table>

• <caption> gives the whole table a announced title, helping a screen reader user understand what the table is about before it reads through the rows.
• <thead> and <tbody> separate header rows from data rows structurally, which some assistive tools use to repeat the header context on long tables.
• None of these tags change border appearance on their own, they can be styled with the exact same border techniques covered throughout this tutorial.

Practice Exercises: Style Your Own Bordered Table

The fastest way to make table border styling feel natural is to build a few variations yourself. Try each of these directly in the live editor above:

1. Recreate the Basic Table Border example, then change its color from black to a hex code of your choice.
2. Add border-collapse: collapse; to a table with individual cell borders and compare it side by side with one that omits it.
3. Build a small internal stylesheet with a .data-table class and apply it to two separate tables.
4. Add a <caption> above one of your tables describing what it shows.
5. Combine a rounded border (border-radius) with a custom border-color on the same table.

Working through these five exercises touches every border technique covered in this tutorial at least once, from the simplest solid line to a fully styled, accessible, class-based table.

Gallery of CSS Border Style Values

The Style part of the border shorthand covered above accepts several different values beyond just solid and dotted, each producing a visually distinct line.

The Style Table Borders example earlier on this page uses double, which is exactly why that table's border renders as two thin parallel lines rather than one, a distinctive look that works well for a more formal or decorative table without needing any custom colors.

The Deprecated HTML border Attribute

Long before CSS became the standard way to style tables, HTML itself had a built-in border attribute that could be added directly to the <table> tag without any style attribute at all.

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</table>

This older border="1" attribute still works in every modern browser today, but it only accepts a plain number for thickness, with no support for color, style, or rounded corners, none of the flexibility shown throughout this tutorial. Modern HTML and CSS best practices recommend using the style attribute or a stylesheet instead, exactly as every example on this page already demonstrates, reserving the legacy attribute for quick, throwaway tests rather than real production code.

Border Radius and Rounded Table Corners

The Round Table Borders example earlier on this page uses border-radius: 10px; to soften the table's corners, a property borrowed from general CSS box styling rather than being table-specific at all.

• A larger radius value produces more noticeably rounded corners, while a smaller value keeps the effect subtle.
• border-radius works best paired with border-collapse: separate; (the default), since collapse can clip or hide rounded corners on some browsers.
• Rounded tables pair naturally with softer border styles, such as a lighter gray or a pastel border color, for a friendlier, less rigid visual feel than a sharp, dark grid.

This is why the Round Table Borders example on this page intentionally does not combine border-radius with border-collapse: collapse;, keeping the two separate-border and rounded-corner effects working together cleanly rather than fighting each other.

Frequently Asked Questions About HTML Table Borders