WebSplitter supports two type of cell splitting, vertical and horizontal. It also supports rowspan and colspan.

This topic will show you how to split cells.

To split two cells

1. Create a table with two cells.
2. Add another cell between the cells you want to split.
3. Drag and drop the WebSplitter control into the cell that just created.
   

   <table style="table-layout: fixed; height: 300px; border-collapse: collapse;">
   <tr>
      <td style="background-color: Yellow; width: 100px;">
          Panel 1
      </td>
      <td style="width: 100px">
      <ISWebDesktop:WebSplitter ID="WebSplitter1" runat="server" GripImageCollapse="../Images/dot_v.gif"
         GripImageRestore="../Images/dot_v.gif">
            <SplitterStyle>
               <Active BaseStyle="Normal" BackColor="Black">
               </Active>
               <Normal Overflow="Hidden" OverflowY="Hidden" OverflowX="Hidden" BackColor="Gray">
               </Normal>
               <Over BaseStyle="Normal">
               </Over>
            </SplitterStyle>
         </ISWebDesktop:WebSplitter>
      </td>
      <td style="background-color: Red; width: 100px;">
            Panel 2
      </td>
   </tr>

4. Set Orientation to Vertical and AllowCollapse to True.
5. Set CollapseDirection to either Panel1 or Panel2. It depends on which panel you want to collapse.
6. Set the GripImageCollapse and GripImageRestore for the grip images.
7. You could set the minimum size of Panel 1 or Panel 2 when being collapsed in Panel1Min or Panel2Min property. (the default value is 1 pixel)
   
   

To split two rows

1. Create a table with two cells.
2. Add another cell between the cells you want to split.
3. Drag and drop the WebSplitter control into the cell that just created.
   

   <table style="table-layout: fixed; height: 200px; border-collapse: collapse;">
      <tr>
         <td style="background-color: Teal; width: 300px;">
            Panel 1
         </td>
      </tr>
      <tr>
         <td>
         <ISWebDesktop:WebSplitter ID="WebSplitter2" runat="server" Orientation="Horizontal"
            GripImageCollapse="../images/dot.gif" GripImageRestore="../images/dot.gif">
               <SplitterStyle>
                  <Active BaseStyle="Normal" BackColor="Black">
                  </Active>
                  <Normal Overflow="Hidden" OverflowY="Hidden" OverflowX="Hidden" BackColor="Gray">
                  </Normal>
                  <Over BaseStyle="Normal">
                  </Over>
               </SplitterStyle>
            </ISWebDesktop:WebSplitter>
         </td>
      </tr>
      <tr>
         <td style="background-color: Yellow; width: 300px;">
            Panel 2
         </td>
      </tr>
   </table>

4. Set Orientation to Horizontal and AllowCollapse to True.
5. Set CollapseDirection to either Panel1 or Panel2. It depends on which panel you want to collapse.
6. Set the GripImageCollapse and GripImageRestore for the grip images.
7. You could set the minimum size of Panel 1 or Panel 2 when being collapsed in Panel1Min or Panel2Min property. (the default value is 1 pixel)
   
   

To split cells with rowspan

1. Create a table with two cells using rowspan.
2. Add another cell between the cells you want to split.
3. Drag and drop the WebSplitter control into the cell that just created.
   

   <table style="table-layout: fixed; height: 300px; border-collapse: collapse;">
      <tr>
         <td rowspan="3" style="background-color: Yellow; width: 100px;">
            Panel 1
         </td>
         <td rowspan="3" style="width: 100px">
         <ISWebDesktop:WebSplitter ID="WebSplitter1" runat="server" GripImageCollapse="../Images/dot_v.gif"
            GripImageRestore="../Images/dot_v.gif" CollapseDirection="Panel2">
               <SplitterStyle>
                  <Active BaseStyle="Normal" BackColor="Black">
                  </Active>
                  <Normal Overflow="Hidden" OverflowY="Hidden" OverflowX="Hidden" BackColor="Gray">
                  </Normal>
                  <Over BaseStyle="Normal">
                  </Over>
               </SplitterStyle>
            </ISWebDesktop:WebSplitter>
         </td>
         <td style="background-color: Red; width: 100px;">
            Panel 2
         </td>
      </tr>
      <tr>
         <td style="background-color: Lime; width: 100px;">
            Panel 3
         </td>
      </tr>
   </table>

4. Set Orientation to Vertical and AllowCollapse to True.
5. Set CollapseDirection to either Panel1 or Panel2. It depends on which panel you want to collapse.
6. Set the GripImageCollapse and GripImageRestore for the grip images.
7. You could set the minimum size of Panel 1 or Panel 2 when being collapsed in Panel1Min or Panel2Min property. (the default value is 1 pixel)