• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 307
  • Last Modified:

how to split the tables?? help

hi guys, i trying to split this page with  the start of   <img src="images/p_Sample1.gif" style="width: 232px" alt=""/>
into a left table and the right table column contains a contentpanel..... but i tried a few times without success.

format of page:
image 1                    
welcome to xxx
sample image    |     content panel.

Please help!!



<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Login.master.cs" Inherits="Login" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Welcome to Portal Online...</title>
    <link href="MasterPage.css" rel="stylesheet" type="text/css" />
</head>

<body>


<table cellpadding="0" cellspacing="0" style="width: 79%">
     <tr>
       <td align="center" style="width: 479px">
       <img src="~/images/_.gif" alt="" width="2" />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/page_header_img.jpg" Width="650px" />&nbsp;
       </td>
     </tr>

     <tr>
       <td align="left" style="width: 479px">
      <img src="~/images/_.gif" alt="" width="2" />
      <asp:Label ID="Label1" runat="server" Text="Welcome to Portal Online.." Width="650px" Height="32px"></asp:Label><img src="~/images/_.gif" alt="" width="2" />
       </td>
     </tr>


     <tr>
      <td align="left" style="width: 479px">
        <img src="images/p_Sample1.gif" style="width: 232px" alt=""/>
       
         <table cellpadding="5" cellspacing="2" border="0" class="sidebar" style="width: 229px">
       
        <tr align="left">
          <td colspan="4" style="width: 340px; height: 195px;" class="headers">
           <br />
           &nbsp;
             <img id="m2" src="images/p_notyet1.gif" alt="" style="padding-left:auto" />
              <br />
             <br />
              &nbsp;
              <img id="m1" src="images/p_account1.gif" alt="" style="padding-right:auto"/>
          </td>
       
          </tr>
       
        </table>
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
         
         
    &nbsp;&nbsp;
    </td>
   
    </tr>
   
   
    </table>
       

   
   
</body>
</html>

0
spiral
Asked:
spiral
1 Solution
 
Jason C. LevineNo oneCommented:
Hi spiral,

Post the CSS file too, please.
0
 
ThinkPaperCommented:
On your image tag, put align='left'
and on your contents table, put align="right"

It seemed to work for me.


<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Login.master.cs" Inherits="Login" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Welcome to Portal Online...</title>
    <link href="MasterPage.css" rel="stylesheet" type="text/css" />
</head>

<body>


<table cellpadding="0" cellspacing="0" style="width: 79%">
     <tr>
       <td align="center" style="width: 479px">
       <img src="~/images/_.gif" alt="" width="2" />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/images/page_header_img.jpg" Width="650px" />&nbsp;
       </td>
     </tr>

     <tr>
       <td align="left" style="width: 479px">
      <img src="~/images/_.gif" alt="" width="2" />
      <asp:Label ID="Label1" runat="server" Text="Welcome to Portal Online.." Width="650px" Height="32px"></asp:Label><img src="~/images/_.gif" alt="" width="2" />
       </td>
     </tr>


     <tr>
      <td align="left" style="width: 479px">
        <img align='left' src="images/p_Sample1.gif" style="width: 232px" alt=""/>
       
         <table align='right' cellpadding="5" cellspacing="2" border="0" class="sidebar" style="width: 229px">
       
        <tr align="left">
          <td colspan="4" style="width: 340px; height: 195px;" class="headers">
           <br />
           &nbsp;
             <img id="m2" src="images/p_notyet1.gif" alt="" style="padding-left:auto" />
              <br />
             <br />
              &nbsp;
              <img id="m1" src="images/p_account1.gif" alt="" style="padding-right:auto"/>
          </td>
       
          </tr>
       
        </table>
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
         
         
    &nbsp;&nbsp;
    </td>
   
    </tr>
   
   
    </table>
       

   
   
</body>
</html>
0
 
ThinkPaperCommented:
Err.. was that what you wanted?
0
 
spiralAuthor Commented:
cellpadding="0" cellspacing="0, colspan="4"

whats the meaining of these 3 attributes? i am puzzled.
0
 
VallenwoodCommented:
For the meaning of HTML attributes, I recommend visiting: http://www.gotapi.com/ and selecting "<table>" in the list on the left. Very good reference.

In brief, "cellpadding" is the amount of padding inside every single cell of the table. It's specified in the <table> tag, so it applies to all cells equally. (You cannot make one cell have different padding from another using "cellpadding"--to do that you would have to use CSS and assign "padding" properties to different <td> elements.) If you have a 20x20 pixel image inside a table cell of a table with "cellpadding" set to be "5," you will now have a table cell which is 30 pixels wide--20 pixels for the image, plus 5 on each side for padding.

"Cellspacing" is the space BETWEEN cells. It's independent of the cellpadding. If you have a table with 2 cells and pick a cellspacing of 20, there will be a 20-pixel gap put between the two cells. In real-world effect, it produces a similar result to cellpadding, but you can specify them separately.

"Colspan" is only relevant when you have a table with UNEVEN numbers of cells. Let's say you have a table with 3 cells in the first row, and 4 in the second row. As such:

<table>
  <tr>
    <td>cell 1 a</td>
    <td>cell 2 a</td>
    <td>cell 3 a</td>
  </tr>
  <tr>
    <td>cell 1 b</td>
    <td>cell 2 b</td>
    <td>cell 3 b</td>
    <td>cell 4 b</td>
  </tr>
<table>

Tables function according to a strict grid, so doing this will BREAK the table and make it display oddly (or horribly) on some browsers. In order to fix this, you have to tell one of the cells to SPAN TWO COLUMNS so it fills up the space of two cells. Thus:

<table>
  <tr>
    <td colspan="2">cell 1 a</td>
    <td>cell 2 a</td>
    <td>cell 3 a</td>
  </tr>
  <tr>
    <td>cell 1 b</td>
    <td>cell 2 b</td>
    <td>cell 3 b</td>
    <td>cell 4 b</td>
  </tr>
<table>

And that's what the colspan property does. It applies only to a <td> element and tells it how many cell-slots to take up. Now "cell 1 a" will be twice as wide and fit nicely over "cell 1 b" and "cell 2 b".
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now