Reputation: 3863
How can I create this table in HTML?
I have tried this code but it doesn't work as expected...
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr >
<td rowspan="2" colspan="2">E,I, F, J</td>
<td colspan="2">G,H</td>
</tr>
<tr>
<td rowspan="2" colspan="2">K,O, L, P</td>
</tr>
<tr>
<td colspan="2">M, N</td>
</tr>
</table>
Upvotes: 2
Views: 3511
Reputation: 36
table,tr,td
{
border: 1px solid black;
border-collapse: collapse;
border-width: 0.1px;
text-align: center;
}
<table border="1px" cellpadding="40" cellspacing="40" align="center">
<colgroup>
<col style="visibility: collapse;">
</colgroup>
<tr>
<td>1</td>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>2</td>
<td colspan="2" rowspan="2">E,I,F,G</td>
<td colspan="2">G,H</td>
</tr>
<tr>
<td>3</td>
<td colspan="2" rowspan="2">K,O,L,P</td>
</tr>
<tr>
<td>4</td>
<td colspan="2">M,N</td>
</tr>
</table>
Upvotes: 2
Reputation: 2059
.table {
max-width: 700px;
height: auto;
margin: 20px auto;
background-color: #edd;
position: relative;
}
.table-head {
display: flex;
height: 150px;
}
.table-head-box {
width: 25%;
background-color: #000;
border: 1px solid red;
color: #fff;
}
.table-body {
display: flex;
flex-direction: row;
height: 100%;
height: 600px;
}
.table-body-left,
.table-body-right {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.table-body-left {
width: 100%;
height: 100%;
}
.table-body-right {
width: 100%;
height: 100%;
}
.table-head-box,
.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
display: flex;
justify-content: center;
align-items: center;
font-size: 25px;
}
.table-body-left-top,
.table-body-left-bottom,
.table-body-right-top,
.table-body-right-bottom {
border: 1px solid blue;
}
.table-body-left-top,
.table-body-right-bottom {
height: 70%;
width: 100%;
}
.table-body-right-top,
.table-body-left-bottom{
height: 30%;
width: 100%;
}
<div class="table">
<div class="table-head">
<div class="table-head-box">A</div>
<div class="table-head-box">B</div>
<div class="table-head-box">C</div>
<div class="table-head-box">D</div>
</div>
<div class="table-body">
<div class="table-body-left">
<div class="table-body-left-top">E,I,F,G</div>
<div class="table-body-left-bottom">M,N</div>
</div>
<div class="table-body-right">
<div class="table-body-right-top">G,H</div>
<div class="table-body-right-bottom">K,O,L,P</div>
</div>
</div>
</div>
Upvotes: 2