Creating complex table using CSS - html

Question

I want to create something like this using divs and it also should be without using display:table css rule etc. How do I create table header this??

Answer 1

May be try this as a starting point? You might need to tweak it a lot.
* {box-sizing: border-box;}
.row {overflow: hidden; clear: both;}
.cell {border: 1px solid #999; padding: 0px; float: left;}
.cell.full {float: none;}
.col-1 {width: 20%;}
.col-2 {width: 40%;}
.col-3 {width: 60%;}
.col-33 {width: 33.3%;}
.row-2 {height: 3em;}
<div class="row">
<div class="cell col-1 row-2">Subject</div>
<div class="cell col-3 row-2">
<div class="row">
<div class="cell full">First Term</div>
</div>
<div class="row">
<div class="cell col-33">October Test</div>
<div class="cell col-33">December Exam</div>
<div class="cell col-33">Term Average</div>
</div>
</div>
<div class="col-1 row-2 cell">Teacher's Evaluation</div>
</div>
Preview:

Answer 2

If you can use flexbox can i use flexbox
The benefit of using flexbox is that you can get the the same result as you using the table tag including vertical-align:middle.
In the snippet, keep attention to the text-alignment in the cells.
You can use flexboxgrid like this:
[class*="col"] {
text-align:center;
border:1px solid;
display: flex;
justify-content: center;
flex-direction: column;
}
<link href="http://cdn.jsdelivr.net/flexboxgrid/6.3.0/flexboxgrid.min.css" rel="stylesheet" />
<div class="row ">
<div class="col-xs-3">Subject</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12">First Term</div>
</div>
<div class="row">
<div class="col-xs-4">October Test</div>
<div class="col-xs-4">December Exam</div>
<div class="col-xs-4">Term Average</div>
</div>
</div>
<div class="col-xs-3">Teacher's Evaluation</div>
</div>
The result:
http://jsbin.com/zetaro/edit?html,css,output

Answer 3

Just use colspan and rowspan =)
tutorial how to do it
I made it:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<table>
<tr>
<th rowspan="2"><br>Subject<br></th>
<th colspan="3">First term</th>
<th rowspan="2">Teacher's Evaluation</th>
</tr>
<tr>
<td>October test</td>
<td>December exam</td>
<td>Term Average</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
https://jsfiddle.net/b3aqLny1/

Answer 4

Try this
.table {
width: 100%;
table-layout: fixed;
display: table;
text-align: center;
}
.table .row{
display: table-row;
}
.table .row .col {
display: table-cell;
vertical-align: middle;
height: 100px;
border: 2px solid #333;
width: 33%;
}
.table .col.col-big {
width: 50%;
}
span {
display: inline-block;
padding: 10px;
}
.inner-table.table .row .col {border-width: 1px;}
<div class="table">
<div class="row">
<div class="col">
<span>Subject</span>
</div>
<div class="col col-big">
<div class="table inner-table">
<div class="row">
<div class="col one-col" style="width: 100%">
<span>First Term</span>
</div>
</div>
<div class="row">
<div class="table inner-table">
<div class="row">
<div class="col"><span>Test 1</span></div>
<div class="col"><span>Test 2</span></div>
<div class="col"><span>Test 3</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<span>Teacher's Evaluation</span>
</div>
</div>
</div>