How Create Table Only Using ≪Div≫ Tag and Css

How to create a table only using div tag and bootstrap?

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>

Create table using div and CSS

You can use this css:

.div-table{
  display:table;         
  width:auto;         
  background-color:#eee;         
  border:1px solid  #666666;         
  border-spacing:5px;/*cellspacing:poor IE support for  this*/
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col{
  float:left;/*fix for  buggy browsers*/
  display:table-column;         
  width:200px;         
  background-color:#ccc;  
}

making a table using div in HTML

Your HTML structure has a few errors..
You see.. the last cell has a whole table in it and so should your HTML structure have a whole table inside the last cell like this:

.tableMain {  display: table;  width: 100%;  background-color: black;}
.tableRow {  display: table-row;  color: aqua;}
.tableCell,.tableHead {  border: 1px solid aqua;  display: table-cell;  padding-left: 5px;}
.tableHeading {  display: table-header-group;  font-weight: bold;}
.tableBody {  display: table-row-group;}
.body {  margin: 0px;}

<div class="tableMain">  <div class="tableBody">    <div class="tableRow">      <div class="tableCell">        <h2>Header-1</h2>      </div>      <div class="tableCell">        <h2>Header-2</h2>      </div>    </div>    <div class="tableRow">      <div class="tableCell">        <h2>Section-1</h2>      </div>      <div class="tableCell">        <h3>Title</h3>        <h4>Description</h4>        <ul>          <li>item-1</li>          <li>item-2</li>          <li>item-3</li>        </ul>      </div>    </div>    <div class="tableRow">      <div class="tableCell">        <h2>Section-2</h2>      </div>      <div class="tableRow">        <div class="tableMain">          <div class="tableBody">            <div class="tableRow">              <div class="tableCell">                <h2>header-1</h2>              </div>              <div class="tableCell">                <h2>header-2</h2>              </div>              <div class="tableCell">                <h2>header-3</h2>              </div>            </div>            <div class="tableRow">              <div class="tableCell">                <p>A</p>              </div>              <div class="TableCell">                <p>B</p>              </div>              <div class="tableCell">                <p>C</p>              </div>            </div>            <div class="tableRow">              <div class="tableCell">                <p>A</p>              </div>              <div class="tableCell">                <p>B</p>              </div>              <div class="tableCell">                <p>C</p>              </div>            </div>            <div class="tableRow">              <div class="tableCell">                <p>A</p>              </div>              <div class="tableCell">                <p>B</p>              </div>              <div class="tableCell">                <p>C</p>              </div>            </div>          </div>        </div>      </div>    </div>  </div>
</div>

How to create a table using div tags?

I think for the example you have an actual table would be more appropriate, however; you could also do something like this:

<body> <div style="display: table;">  <div style="display: table-row;">   <div style="display: table-cell;">Name:</div>   <div style="display: table-cell;">test1</div>  </div>  <div style="display: table-row;">   <div style="display: table-cell;">Address:</div>   <div style="display: table-cell;">test2</div>  </div> </div></body>

Using divs instead of tables tag to be responsive without bootstrap

Try to understand that a div is a container.
Therefore, the structure must be hierarchical in order to solve this problem, but not separated into 3 different individual divs (=containers).

Try something like:

  .wrapTableTech {    display: table;    width: 100%;    height: 14rem;    border: 2px solid;  }  .blocTech {    display: table-header-group;    background-color: gray;
  }  .tech-cell {    display: table-cell;    text-align: justify;    padding: 10px;    border: 2px solid red;    text-align:center;  }  .blocCat {    display: table-row-group;    background-color: gray;text-align: center;
  }  .tech-row {    display: table-row;    border: 2px solid red;  }
  .tech-RowTitle {   display: table-cell;    text-align: justify;    padding: 10px;    border: 2px solid red;    text-align:center;  }
  .tech-value {    display: table-cell;    text-align: justify;    padding: 10px;    border: 1px solid red;    text-align:center;    background-color: white;  }

<div class="wrapTableTech">  <div class="blocTech">    <div class="tech-cell"></div>    <div class="tech-cell">Tech 1</div>    <div class="tech-cell">Tech 2</div>    <div class="tech-cell">Tech 3</div>    <div class="tech-cell">Tech 4</div>  </div>  <div class="blocCat">    <div class="tech-row">       <div class="tech-RowTitle">PTI</div>      <div class="tech-value">1.1</div>      <div class="tech-value">1.2</div>      <div class="tech-value">1.3</div>      <div class="tech-value">1.4</div>    </div>    <div class="tech-row">       <div class="tech-RowTitle">HO</div>       <div class="tech-value">2.1</div>       <div class="tech-value">2.2</div>       <div class="tech-value">2.3</div>       <div class="tech-value">2.4</div>    </div>    <div class="tech-row">       <div class="tech-RowTitle">OP</div>       <div class="tech-value">3.1</div>       <div class="tech-value">3.2</div>       <div class="tech-value">3.3</div>       <div class="tech-value">3.4</div>    </div>    <div class="tech-row">       <div class="tech-RowTitle">AS</div>       <div class="tech-value">4.1</div>       <div class="tech-value">4.2</div>       <div class="tech-value">4.3</div>       <div class="tech-value">4.4</div>    </div>  </div></div>

How do I emulate a table with divs & css?

Try this ;)

CSS

.table {
    display: table;
    width: 500px;
}
.tr { 
    display: table-row; 
}
.td { 
    display: table-cell;
}

HTML

<div class="table">
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
    <div class="tr">
        <div class="td">asdf</div>
        <div class="td">asdf</div>
        <div class="td">asdf</div>
    </div>
</div>

how to create a table using div tag without using dispaly:table

If it's a proper table for tabular data, you should not try and use divs to create it. Use tables.