How to span two columns in HTML table

Hi I have the below table structure in html which span two columns (Men and Women). Here I dont want to have next row(second row) but Men and Women columns should be displayed. In the first row only, two columns (Men and Women) in cell People ready for Baptism should be displayed.

How should I resolve this?

Following is the image

Below is the code

<!DOCTYPE html>
<html>
<head>
</head>

 <table class="table table-bordered">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th style='border: 1px solid black;'>House Visit Name</th>
        <th style='border: 1px solid black;'>Location</th>
        <th style='border: 1px solid black;'>Date & Time</th>
		<th style='border: 1px solid black;'> New Believers</th>
		<th colspan="2" style='border: 1px solid black;'>People Ready for Baptism</th>             
				
      </tr>
    </thead>
    <tbody>
    <tr>
    <td bgcolor='#B8B8B8' style='border: 1px solid black;'></td>
    <td bgcolor='#B8B8B8' style='border: 1px solid black;'></td>
    <td bgcolor='#B8B8B8' style='border: 1px solid black;'></td>
    <td bgcolor='#B8B8B8' style='border: 1px solid black;'></td>
    <td bgcolor='#B8B8B8' style='border: 1px solid black;'>Men</td>
    <td bgcolor='#B8B8B8' style='border: 1px solid black;'>Women</td>
        </tr>
    <tr>
    <td style='border: 1px solid black;'>
    Patole family	
    </td>
	<td style='border: 1px solid black;'>
    Aurangabad
    </td>
    <td style='border: 1px solid black;'>
    2019-07-30 07:10:25	
    </td>
    <td style='border: 1px solid black;'>
    0
    </td>
    <td style='border: 1px solid black;'>
    0</td>
    <td style='border: 1px solid black;'>
    0</td>
    
    </tr>
</tbody>
</table>
</html>

I don’t really understand your question, is ther another way you could explain the problem and what you want to achieve?
The image, is that what you currently have, or what you want it to look like?

The second row where four cells are empty should get merged with the first row.

1 Like

You can use the rowspan attribute on the headers in the first row.

I modified the code as below but still it is appearing the same

<table class="table table-bordered">
    <thead>
      <tr bgcolor='#B8B8B8'>
        <th  rowspan="3" style='border: 1px solid black;'>House Visit Name</th>
        <th rowspan ="3"style='border: 1px solid black;'>Location</th>
        <th rowspan="3" style='border: 1px solid black;'>Date & Time</th>
		<th rowspan="3" style='border: 1px solid black;'> New Believers</th>
		<th colspan="2" style='border: 1px solid black;'>People Ready for Baptism</th>             
				<th colspan="2" style='border: 1px solid black;'>People Baptized</th>
      </tr>
    </thead>
    <tbody>

The rowspan should have a value of 2 and the second row should be in the thead element with the first row.

Now it is appearing as below

You need to remove the empty cells.

2 Likes

Thanks. It is working

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.