How to merge cell in the html table?

Admin 1
Viewed 65

I have a problem to merge cells in the first-row table. I hope someone can guide me on how to solve it. Thanks.

Below is my code:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

 <table style="width:100%;border: 1px solid black; " class="tabletr">
                        <thead>
                            <tr style="text-align:left;S" height="35">
                                <th class="control-label" style="width:1%;border: 1px solid black;text-align:center;">Bill</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;">No.Siri Pendaftaran Komponen</th>
                                <th class="control-label" style="width:7%;text-align:center;border: 1px solid black;">Jenis/ Jenama/ Model </th>
                                <th style="width:7%;text-align:center;border: 1px solid black;">Kos(RM)</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;">Tempoh Jaminan</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;">Asal/ Tambah/ Naik Taraf/ Penggantian</th>
        <th style="width:7%;text-align:center;border: 1px solid black;">Dipasang (Tarikh)</th>
        <th style="width:7%;text-align:center;border: 1px solid black;">Dikeluarkan (Tarikh)</th>
        <th style="width:7%;text-align:center;border: 1px solid black;">Dilupus/ Dihapus Kira</th>
        <th style="width:7%;text-align:center;border: 1px solid black;">Catatan</th>
        <th style="width:7%;text-align:center;border: 1px solid black;">Nama Pengawai</th>
          </tr>
                        </thead>
                       
                            
                    </table>
 
</body>
</html>

My problem is how to add "Tarikh" word in the Dipasang (Tarikh) , Dikeluarkan (Tarikh), Dilupus/ Dihapus Kira top .

My expected result like below the picture:

enter image description here

html-table html
3 Answers

You just need to add rowspan = 2 in all th and colspan = 2 in th of "Tarik". Also, take out all three headings you need to add in Tarik and add in separate for clean and understandable code. Below is the code which is working as expected:-

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

 <table style="width:100%;border: 1px solid black; " class="tabletr">
                        <thead>
                            <tr style="text-align:left;" height="35">
                                <th class="control-label" style="width:1%;border: 1px solid black;text-align:center;" rowspan="2">Bill</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">No.Siri Pendaftaran Komponen</th>
                                <th class="control-label" style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">Jenis/ Jenama/ Model </th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">Kos(RM)</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">Tempoh Jaminan</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" colspan="3">Tarik</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">Dilupus/ Dihapus Kira</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">Catatan</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;" rowspan="2">Nama Pengawai</th>
                            </tr>
                            <tr>
                                <th style="width:7%;text-align:center;border: 1px solid black;">Asal/ Tambah/ Naik Taraf/ Penggantian</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;">Dipasang (Tarikh)</th>
                                <th style="width:7%;text-align:center;border: 1px solid black;">Dikeluarkan (Tarikh)</th>
                              </tr>
                        </thead>


                    </table>

</body>
</html>
user_127243980

look at the colspan and rowspan attribute of td/th. Basicaly you make all the header columns with rowspan="2" and the "Tarikh" row with colspan="3".

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

 <table style="width:100%;border: 1px solid black; " class="tabletr">
                        <thead>
                            <tr style="text-align:left;S" height="35">
                                <th rowspan="2" class="control-label" style="width:1%;border: 1px solid black;text-align:center;">Bill</th>
                                <th  rowspan="2" style="width:7%;text-align:center;border: 1px solid black;">No.Siri Pendaftaran Komponen</th>
                                <th  rowspan="2" class="control-label" style="width:7%;text-align:center;border: 1px solid black;">Jenis/ Jenama/ Model </th>
                                <th  rowspan="2" style="width:7%;text-align:center;border: 1px solid black;">Kos(RM)</th>
                                <th  rowspan="2" style="width:7%;text-align:center;border: 1px solid black;">Tempoh Jaminan</th>
                                <th  rowspan="2" style="width:7%;text-align:center;border: 1px solid black;">Asal/ Tambah/ Naik Taraf/ Penggantian</th>                                
                <th colspan="3" style="width:7%;text-align:center;border: 1px solid black;">Tarikh</th>
        <th  rowspan="2" style="width:7%;text-align:center;border: 1px solid black;">Catatan</th>
        <th  rowspan="2" style="width:7%;text-align:center;border: 1px solid black;">Nama Pengawai</th>
          </tr>
                <tr>
        <th style="width:7%;text-align:center;border: 1px solid black;">Dipasang</th>                
        <th style="width:7%;text-align:center;border: 1px solid black;">Dikeluarkan</th>
        <th style="width:7%;text-align:center;border: 1px solid black;">Dilupus</th>
                </tr>
                        </thead>
                       
                            
                    </table>
 
</body>
</html>

user_17514440

You just need to add colspan="3".

<th colspan="3" style="width:7%;text-align:center;border: 1px solid black;">Tarikh</th>
user_137131530
Related