Table layout help

[brynFlew]

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>

[fcvolunteer]

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 sayThe green line in the image is where i want to split the cell

So do you want them merged or split?

[brynFlew]

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

[fcvolunteer]

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.

[brynFlew]

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.

[fcvolunteer]

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

Glad I could help.