What is Basic table styling in Bootsrap?

Bootsrapmarkup~5 mins

Basic table styling in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Tables organize data in rows and columns. Styling tables makes them easier to read and nicer to look at.

You want to show a list of products with prices.

You need to display a schedule or timetable.

You want to compare features side by side.

You want to highlight important rows or columns in a table.

Syntax

Bootsrap

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Add class="table" to your <table> tag to apply Bootstrap's basic styling.

You can add more classes like table-striped or table-bordered for extra styles.

Examples

This is a simple table with basic Bootstrap styling.

Bootsrap

<table class="table">
  <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>

Adding table-striped adds alternating row colors for easier reading.

Bootsrap

<table class="table table-striped">
  <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>

Adding table-bordered adds borders around cells.

Bootsrap

<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>

Sample Program

This example shows a table with Bootstrap's basic styling, striped rows, borders, and a dark header for better contrast.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Basic Table Styling</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-4">
    <h1>Basic Table Styling with Bootstrap</h1>
    <table class="table table-striped table-bordered">
      <thead class="table-dark">
        <tr>
          <th>Item</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Apples</td>
          <td>10</td>
          <td>$5</td>
        </tr>
        <tr>
          <td>Bananas</td>
          <td>6</td>
          <td>$3</td>
        </tr>
        <tr>
          <td>Cherries</td>
          <td>20</td>
          <td>$15</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>

OutputSuccess

Important Notes

Use semantic tags like <thead> and <tbody> to organize your table content.

Bootstrap's table classes make tables responsive and accessible by default.

Try viewing your table on different screen sizes to see how Bootstrap helps with responsiveness.

Summary

Use class="table" to add basic Bootstrap styling to tables.

Add classes like table-striped or table-bordered for extra visual effects.

Tables help organize data clearly and Bootstrap makes them look good easily.