CODEWITHSUNDEEP
htmlhtml-table
user13474936
user13474936

Reputation:

How to merge cell in the html table?

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

Upvotes: 2

Views: 309

Answers (3)

Rachita Singhal
Rachita Singhal

Reputation: 79

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>

Upvotes: 1

Yavuz Asmalı
Yavuz Asmalı

Reputation: 318

You just need to add colspan="3".

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

Upvotes: 0

px1mp
px1mp

Reputation: 5372

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>

Upvotes: 0

Related Questions