I have a table and need 2 rows merged horizontally, come somebody help me do this i seem to be having some difficulties. Here is my source and a screen attached. The green line in the image is where i want to split the cell. Thanks

<table id="dataTable" cellspacing="0" cellpadding="0" border="1" width="100%" style="text-align:center;">
<caption><span class="tableTitle"></span></caption>
<thead>
<%-- ~~titles~~ --%>
<tr>
	<th rowspan="3" colspan="1">---</th> 
	<th rowspan="3">Line</th> 
	<th rowspan="3">Work Area</th>  
    <th rowspan="3">Code</th>
    <th colspan="5" style="background-color:#E00000;width:30%;">Production</th>
    <th rowspan="3">Downtime Summary</th>
</tr>
<%-- ~~subtitles~~ --%>
<tr>
    <th colspan="1">PLN</th>
    <th colspan="1">ACT</th>
    <th colspan="1">VAR</th>
    <th colspan="1">D/T Mins</th>
    <th colspan="1">O/T Hrs</th>
</tr>
</thead>
<tbody>
<%-- ~~tableData~~ --%>
<tr>
    <th rowspan="1.5"><p class="sub0" style=""><input type="checkbox" id="line" name="chk" property="line" style="width:100%;border-style:none;"/></p></th>
    <td><p class="dataCell"><input type="text" id="line" name="line" property="line" value="<% form.getLine(); %>" autofocus="true" style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="workArea" name="workArea" property="workArea" value="<% form.getWorkArea(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell" colspan="2" rowspan="1"><input type="text" id="code" name="code" property="code" value="<% form.getCode(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="pln" name="pln" property="pln" value="<% form.getPln(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="act" name="act" property="act" value="<% form.getAct(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="var" name="var" property="var" value="<% form.getVar(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="downtime" name="downtime" property="downtime" value="<% form.getDowntime(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="overtime" name="overtime" property="overtime" value="<% form.getOvertime(); %>"style="width:100%;border-style:none;"/></p></td>
    <td><p class="dataCell"><input type="text" id="summary" name="summary" property="summary" value="<% form.getSummary(); %>"style="width:100%;border-style:none;"/></p></td>
</tr>
</tbody>
</table>

Hey brynFlew,

I'd be glad to help but I'm confused as to what you're trying to do. You say:

I have a table and need 2 rows merged horizontally

but then you say

The green line in the image is where i want to split the cell

So do you want them merged or split?

Hey brynFlew,

I'd be glad to help but I'm confused as to what you're trying to do. You say: but then you say

So do you want them merged or split?

must be split, thanks for your help

must be split, thanks for your help

If the look you're going for is what I've circled in the attached picture then here's the code you need to change <th rowspan="1.5"> on line 25 to <th rowspan="2"> and then change <td> on lines 26-34 to <td rowspan="2" > last thing is you need to add is:

<tr>
   <td height="whatever height you want here"></td>
</tr>

after the </tr> on line 35

hope this helps.

If the look you're going for is what I've circled in the attached picture then here's the code you need to change <th rowspan="1.5"> on line 25 to <th rowspan="2"> and then change <td> on lines 26-34 to <td rowspan="2" > last thing is you need to add is:

<tr>
   <td height="whatever height you want here"></td>
</tr>

after the </tr> on line 35

hope this helps.

Exactly what i needed, Thank you i appreciate it alot.

Exactly what i needed, Thank you i appreciate it alot.

Glad I could help.