How to add border to table in react js?

April 13, 2024

Hi Friends 👋,

Welcome To aHoisting!

To add border to table in react js, you can set border: 1px solid #000; in .bordered-table th and .bordered-table td. It will add border to table in react js.

Today, I am going to show you, how to add border to table in react js.

Table of contents

Install and create a new React app.
Import react component.
Create a Component.

Let’s start with the first step.

Step 1: Install and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import react component.

After installing, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';
import './App.css';

Step 3: Create a Component.

you can use <table className="bordered-table"> and add border to table in react js.

<table className="bordered-table">
  <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        {/* Add more rows as needed */}
  </tbody>
</table>

Define the add border to table example.

The below code is an example of a React. You have to import React and use <table className="bordered-table"> to add border to table in react js.

App.js

import React from 'react';
import './App.css'; 

function TableComponent() {
  return (
    <table className="bordered-table">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        {/* Add more rows as needed */}
      </tbody>
    </table>
  );
}

export default TableComponent;

App.css


.bordered-table {
  border-collapse: collapse; /* Collapse border spacing */
  width: 100%; /* Optional: Set table width */
}

.bordered-table th,
.bordered-table td {
  border: 1px solid #000; /* 1px solid black border for table cells */
  padding: 8px; /* Optional: Add padding to cells */
}

.bordered-table th {
  background-color: #f2f2f2; /* Optional: Add background color to table header */
}

In the above code example, I have used the border: 1px solid #000; css and add border to table in react js.

Check the output of the above code example.

Other example

Define the add border to table example.

The below code is an example of a React. You have to import React and use border='1' to add border to table in react js.

App.js

import React from 'react';

function TableComponent() {
  return (
    <table border='1'>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
        </tr>
        {/* Add more rows as needed */}
      </tbody>
    </table>
  );
}

export default TableComponent;

In the above code example, I have used the border='1' attribute and add border to table in react js.

Check the output of the above code example.

All the best 👍