How to create a table only using tag and bootstrap?

Question

I have code below using table tag. But I want the same table using div tag. I have tried but could not make it same. Below I have attached the the image as well. Please help me

Answer 1

This isn't Bootstrap, this is just native HTML and CSS, but you can build table layouts (and table-like layouts) using:

• CSS Tables
• CSS Flex (with caution, see below)
• CSS Grid

Here's a quick primer:

---

Table Layout using CSS Tables

You can create tabular layouts using CSS Table display values:

• display: table // <table>
• display: table-header-group // <thead>
• display: table-row-group // <tbody>
• display: table-row // <tr>
• display: table-cell // <td> & <th>

Working Example:

/* HTML TABLE STYLES */

table thead {
font-weight: bold;
background-color: rgb(191, 191, 191);
}

table th, table td {
padding: 0 6px;
text-align: center;
}


/* CSS TABLE STYLES */

.css-table {
display: table;
}

.css-table-header {
display: table-header-group;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

.css-table-body {
display: table-row-group;
}

.css-table-row {
display: table-row;
}

.css-table-header div,
.css-table-row div {
display: table-cell;
padding: 0 6px;
}

.css-table-header div {
text-align: center;
border: 1px solid rgb(255, 255, 255);
}

<h2>HTML Table</h2>
<table>
<thead>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</thead>

<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter@mail.com</td>
</tr>

<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker@mail.com</td>
</tr>

<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>

<h2>CSS Table</h2>
<div class="css-table">
<div class="css-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-table-body">
<div class="css-table-row">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>
</div>

<div class="css-table-row">
<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>
</div>

<div class="css-table-row">
<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>
</div>

As you can see the HTML Table and the CSS Table above look pretty much identical.

In general CSS Tables are a pretty good (if, arguably, underused) solution for elements which require tabular layouts.

But if you want to get use more sophisticated CSS tools - especially if you want table-like 2D layouts for things which aren't tables (e.g. User Interfaces) - you can use CSS Flex and CSS Grid.

---

Table-like 2D Layout using CSS Flex

N.B. Flexbox isn't intended for complex 2-dimensional layouts and it's really far from ideal for tabular layout, so the example below is a proof-of-concept.

It can be done, but it's really better not to use Flexbox for table-like layouts (or any other nested 2D layout).

.css-flex-table {
display: flex;
width: 80%;
}

.css-flex-table-header,
.css-flex-table-body {
display: flex;
flex: 0 0 100%;
}

.css-flex-table,
.css-flex-table-body {
flex-wrap: wrap;
}

.css-flex-table-header div {
padding: 6px;
text-align: center;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

.css-flex-table-header div,
.css-flex-table-body div {
flex: 0 1 100px;
padding: 0 6px;
border: 1px solid rgb(255, 255, 255);
box-sizing: border-box;
}

.css-flex-table-header div:nth-of-type(4n),
.css-flex-table-body div:nth-of-type(4n) {
flex: 0 1 calc(100% - 308px);
}

<div class="css-flex-table">

<div class="css-flex-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-flex-table-body">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>

<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>

<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>

---

Table-like 2D Layout using CSS Grid

This is an ideal solution. CSS Grid is like CSS Tables on steroids.

.css-grid-table,
.css-grid-table-header,
.css-grid-table-body {
display: grid;
}

.css-grid-table {
grid-template-rows: 24px 72px;
width: 80%;
}

.css-grid-table-header,
.css-grid-table-body {
grid-template-columns: auto auto auto minmax(150px, 25%);
line-height: 24px; 
}

.css-grid-table-header {
grid-column-gap: 2px;
grid-template-rows: auto;
}

.css-grid-table-body {
grid-template-rows: auto auto auto;
}

.css-grid-table-header div {
text-align: center;
font-weight: bold;
background-color: rgb(191, 191, 191);
}

<div class="css-grid-table">

<div class="css-grid-table-header">
<div>Row</div>
<div>First Name</div>
<div>Last Name</div>
<div>Email</div>
</div>

<div class="css-grid-table-body">
<div>1</div>
<div>John</div>
<div>Carter</div>
<div>johncarter@mail.com</div>

<div>2</div>
<div>Peter</div>
<div>Parker</div>
<div>peterparker@mail.com</div>

<div>3</div>
<div>John</div>
<div>Rambo</div>
<div>johnrambo@mail.com</div>
</div>
</div>