I want to create a table in the following format image below. If there is another way than using table . please guide . thank you
For creating above HTML structure it would be easier to create nested HTML table layout.
You can also do it using div's you will need div inside div with borders.
You can take a look at example here : https://jsfiddle.net/w6m47agx/
Which is not exactly what you have pointed but you will need similar HTML/CSS
<div class="table">
<div class="row">
<div class="cell">A</div>
<div class="cell">B</div>
<div class="cell">
<div class="table">
<div class="row">
<div class="cell">Nested A</div>
<div class="cell">Nested B</div>
<div class="cell">Nested C</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cell">E</div>
<div class="cell">F</div>
<div class="cell">G</div>
</div>
</div>
CSS
.table { display: table; border: 1px solid }
.row { display: table-row; border: 1px solid}
.cell { display: table-cell; border: 1px solid}
.table .row .cell .table{
border-collapse: collapse
}
This is common pattern to make table -responsive also, but as we have CSS library like Bootstrap, it is easier to make HTML table responsive also.
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly