<![CDATA[<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<div class="table-container">
<table border="1" cellpadding="10" cellspacing="5" width="100%" align="center">
<thead>
<tr>
<td colspan="6">Table Layout (colspan = 6)</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3" class="adjusted">7</td>
<td colspan="3" class="adjusted">8</td>
</tr>
<tr>
<td rowspan="2" class="adjusted">9</td>
<td>10</td>
<td rowspan="2" class="adjusted">11</td>
<td>12</td>
<td rowspan="2" class="adjusted">13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>24</td>
<td colspan="4" rowspan="3" class="adjusted">25 (colspan="4" rowspan="3")</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">Table Layout (colspan = 6)</td>
</tr>
</tfoot>
</table>
</div>]]>
body{
font-family: 'Poppins', sans-serif;
}
.table-container {background: #fff;padding: 10px;box-shadow: 0px 0px 10px #00000017;width: 400px;margin: 0 auto;}
table {text-align: center;}
thead, tfoot {background: #7ac3d9;color: #fff;font-weight: bold;}
.adjusted{
background: #e75f78;
color: #fff;
font-weight: bold;
}
tbody td {background: #f9f9f9;}
