We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

how to split the tables?? help

spiral
spiral asked
on
Medium Priority
326 Views
Last Modified: 2010-08-05
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>

Comment
Watch Question

Jason C. LevineDon't talk to me.
CERTIFIED EXPERT

Commented:
Hi spiral,

Post the CSS file too, please.
ThinkPaperIT Consultant

Commented:
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>
ThinkPaperIT Consultant

Commented:
Err.. was that what you wanted?

Author

Commented:
cellpadding="0" cellspacing="0, colspan="4"

whats the meaining of these 3 attributes? i am puzzled.
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".

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.