0
0
Bootsrapmarkup~5 mins

Bordered and borderless tables in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Tables help organize data in rows and columns. Borders make it easier to see each cell, while borderless tables give a cleaner look.

When you want to clearly separate data cells for easy reading.
When you want a simple table without lines for a minimal design.
When showing financial or tabular data that needs clear cell boundaries.
When creating a report or dashboard with neat data presentation.
When designing a form or layout that uses tables but looks modern.
Syntax
Bootsrap
<table class="table table-bordered">
  ... table content ...
</table>

<table class="table table-borderless">
  ... table content ...
</table>
table-bordered adds borders around all cells.
table-borderless removes all borders for a clean look.
Examples
This table has borders around every cell, making it easy to see each piece of data.
Bootsrap
<table class="table table-bordered">
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>30</td></tr>
    <tr><td>Bob</td><td>25</td></tr>
  </tbody>
</table>
This table has no borders, giving a clean and simple look.
Bootsrap
<table class="table table-borderless">
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Book</td><td>$10</td></tr>
    <tr><td>Pen</td><td>$2</td></tr>
  </tbody>
</table>
Sample Program

This page shows two tables: one with borders around each cell and one without any borders. The bordered table helps separate data clearly. The borderless table looks clean and simple.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bordered and Borderless Tables</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-4">
    <section>
      <h2>Bordered Table</h2>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>City</th>
            <th>Country</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Paris</td>
            <td>France</td>
          </tr>
          <tr>
            <td>Tokyo</td>
            <td>Japan</td>
          </tr>
        </tbody>
      </table>
    </section>
    <section class="mt-5">
      <h2>Borderless Table</h2>
      <table class="table table-borderless">
        <thead>
          <tr>
            <th>Fruit</th>
            <th>Color</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Apple</td>
            <td>Red</td>
          </tr>
          <tr>
            <td>Banana</td>
            <td>Yellow</td>
          </tr>
        </tbody>
      </table>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use table-bordered to add visible borders around all table cells.

Use table-borderless to remove all borders for a minimal style.

Both classes work with Bootstrap's table class for consistent styling.

Summary

Tables organize data in rows and columns.

table-bordered adds borders to cells for clarity.

table-borderless removes borders for a clean look.