Sheena Agrawal Sheena Agrawal - 6 months ago 25
HTML Question

Split one row to multiple rows in html while using C#

I have a code that looks like this :

<%@ Page Language="C#" AutoEventWireup="True" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">

void Button_Click(Object sender, EventArgs e)
{

// Set the properties of the HtmlTable with the
// user selections.
Table1.Border = Convert.ToInt32(BorderSelect.Value);
Table1.Height = HeightSelect.Value;
Table1.Width = WidthSelect.Value;

}

</script>

<html>
<head>
<title>HtmlTable</title>
</head>
<body>

<form id="form1" runat="server">

<h3>Html table for standards</h3>

<table id="Table1"
style="border-width:1; border-color:Black"
runat="server">

<tr>
<th>
Standard
</th>
<th>
File name
</th>
<th>
Pass/Fail
</th>
</tr>
<tr>
<td>
Cell 1
</td>
<td>
Cell 2
<br />
Cell 9
<br />
Cell 18
</td>
<td>
pass<br />
fail<br />
pass</td>
</tr>
<tr>
<td>
Cell 4
</td>
<td>
Cell 5
</td>
<td>
pass</td>
</tr>

</table>

<hr />

Select the display settings: <br /><br />



Border:
<select id="BorderSelect"
runat="server">


<option value="2">2</option>

</select>

&nbsp;&nbsp;

Height:
<select id="HeightSelect"
runat="server">

<option value="0">0</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="250">250</option>

</select>

&nbsp;&nbsp;

Width:
<select id="WidthSelect"
runat="server">

<option value="0">0</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="300">300</option>
<option value="350">350</option>

</select>

<br /><br />

<input id="Button1" type="button"
value="Generate Table"
onserverclick="Button_Click"
runat="server"/>

</form>

</body>
</html>


The output that comes up is this :
enter image description here

My issue is : I want that all the rows corresponding to cell 1 ( i.e. Cell 2, 9,and 18) to be split into different rows (having boundary) similar to what we have in excel sheets.

Please help. I am new to this. Thanks in advance.

Answer

Cell 2,9 and 18 must be in different rows and cell 1 must use rowspan="3"

http://www.w3schools.com/tags/att_td_rowspan.asp

<table>

     <tr>
        <th>
           Standard
        </th>
        <th>
           File name
        </th>
        <th>
           Pass/Fail
        </th>
     </tr>
     <tr>
        <td rowspan="3" >
           Cell 1
        </td>
        <td>
           Cell 2

        <td>
                pass</td>
     </tr>
 <tr>

        <td>
           Cell 9

        <td>
                fail</td>
     </tr>
  <tr>

        <td>
           Cell 18

        <td>
                pass</td>
     </tr>
     <tr>
        <td>
           Cell 4
        </td>
        <td>
           Cell 5
        </td>
        <td>
            pass</td>
     </tr>

  </table>

and the style

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Check fiddle https://jsfiddle.net/hT9vP/255/