Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10

Thread: Vertical line

  1. #1
    Regular Coder
    Join Date
    Jan 2010
    Posts
    130
    Thanks
    52
    Thanked 0 Times in 0 Posts

    Vertical line

    How can I do have my cell border only on left or right. I mean I only want my border visible on left or right section to have my vertical line.

    take a look, there are no vertical line in it.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    
    
    
    <style type="text/css">
    <!--
    body {
    	font-size: 14px;
    	margin: 0px 0px 0px 0px;
    	background-color: #FFFFFF;
    }
    .head {
    	background: url(head_bg.png);
    	width: 140px;
    	height: 20px;
    	color: #000000;
    	padding: 0px 10px 0px 10px;
    }
    .image {
    	margin-left: 5px;
    }
    .link a{
    	text-decoration: none;
    	color: #000000;
    }
    .link a:hover{
    	text-decoration: underline;
    
    
    
    }	
    -->
    </style></head>
    
    
    
    
    <body>
    
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="70" bgcolor="#999999">&nbsp;</td>
      </tr>
      <tr>
    <!--top end-->  
        
        
        <td>
    
    <table align="center" width="1000" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top" width="170">
    <table width="100%">
    <tr>
    <td><b class="head">Navigation</b></td></tr>
    
    <tr>    
      <td>  <div class="link"> <a href="#">Home</a></div></td>
      </tr>
      <tr>
      <td>
       <div class="link"><a href="#">About</a></div></td></tr>
         <tr>
         <td>
       <div class="link"><a href="#">Gallery</a></div></td></tr>
          <tr>
          <td>
          <div class="link"><a href="#">Downloads</a></div></td></tr>
           <tr>
           <td>
           <div class="link"><a href="#">Video</a></div></td></tr>
            <tr>
            <td>
             <div class="link"><a href="#">Forum</a></div></td></tr>
    
          
    
    
    </table>
    
    <hr />
    <br />
    
    <table width="100%" border="0">
      <tr>
        <td>
    <input name="Name" type="text" value="" size="10" />
    <br />
    <font size="2">Name</font><br />
    <input name="Password" type="text" size="10" /><br />
    <font size="2">Password</font><br />
    <input name="submit" type="submit" value="Log-in" />
    <br />
    <br />
    <div class="link"><font size="2"><a href="#">Register</a> / <a href="#">Forgot Password?</a></font></div>
        </td>
      </tr>
    </table>
    <hr />
    <table width="100%" border="0">
      <tr>
        <td><b class="head">Statistic</b></td>
      </tr>
      <tr>
        <td>
        
    Users Online: 12<br />
    Guest: 50<br />
    
    <div class="link"><a href="#">View More Stats </a></div>
        <hr />
        </td>
      </tr>
      <tr>
      <td>
      
           <b class="head">Lorem ipsum dolor</b> 
       <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <div class="link" align="right"><a href="#">more..</a></div>
      
      
      </td>
      </tr>
      
      
    </table>
    </td>
        
    <!--left end-->   
        
        
        
        
        
        
        <!--center begins-->
        <td valign="top" width="600">
        
    
        <table align="center" width="580" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top">
      <b class="head">Latest Image</b>
      <br />
     <a href="#"><img src="image1.jpeg" width="280" height="170"/></a> <a href="#"><img src="image2.jpeg" width="280" height="170" /></a> 
           
        <p>
        		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
        <marquee behavior="alternate">
        <img src="image3.jpeg" width="100" height="100" class="image" /><img src="image4.jpeg" width="100" height="100" class="image" /><img src="image5.jpeg" width="100" height="100" class="image" /><img src="image6.jpeg" width="100" height="100" class="image" /> <img src="image1.jpeg" width="100" height="100" class="image" /> <img src="image2.jpeg" width="100" height="100" class="image" />
        </marquee>
        </td>
      </tr>
      <tr>
        <td>
        <hr />
       <b class="head">Announcement</b>
    <p>    
     		Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.    
            <br /><br />
    	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.          
    </p>    
        
        </td>
      </tr>
    </table>
    
        
        
        
        </td>
        <!--center end-->  
        
        <td valign="top" width="200">
        
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td>
        <b class="head">News and Events</b>
        
        <p>
        03-20-11<br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      <div class="link" align="right"><a href="#">more..</a></div>
    <hr />    
        </td>
      </tr>
      <tr>
        <td>
        <b class="head">Lorem ipsum dolor</b> 
       <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <div class="link" align="right"><a href="#">more..</a></div>
       <hr />
        </td>
      </tr>
      <tr>
        <td>
        
           <b class="head">Lorem ipsum dolor</b> 
       <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <br /><br />
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <div class="link" align="right"><a href="#">more..</a></div>
        
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    
        
       
          
        </td>
      </tr>
    <tr>
    <td colspan="3" bgcolor="#000099" height="20"></td>
    </tr>
    
    
    </table>
    
     
            
        </td>
      </tr>
    </table>
    
    
    
    
    
    
    
    </body>
    </html>

    I know how to do it in css div like border-left: solid; but not in table or cell
    Last edited by finoy_ako; 04-29-2011 at 06:50 PM. Reason: add information

  • #2
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    here is code finoy hope this is what u r looking for... just check for this comment to see where i have made changes
    <!-- added style here -->

    ============================

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    <!--
    
    body {
    	font-size: 14px;
    	margin: 0px 0px 0px 0px;
    	background-color: #FFFFFF;
    }
    .head {
    	background: url(head_bg.png);
    	width: 140px;
    	height: 20px;
    	color: #000000;
    	padding: 0px 10px 0px 10px;
    }
    .image {
    	margin-left: 5px;
    }
    .link a{
    	text-decoration: none;
    	color: #000000;
    }
    .link a:hover{
    	text-decoration: underline;
    }	
    
    -->
    </style></head>
    
    <body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td height="70" bgcolor="#999999">&nbsp;</td>
      </tr>
    <!--top end-->  
    
      <tr>
        <td>
          <table align="center" width="1000" border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0">
            <tr>
              <td valign="top" width="170" style="padding: 0 15px 0 0;"><!-- added style here -->
                <table width="100%">
                  <tr>
                    <td><b class="head">Navigation</b></td>
                  </tr>
                  <tr>
                    <td>  <div class="link"> <a href="#">Home</a></div></td>
                  </tr>
                  <tr>
                    <td><div class="link"><a href="#">About</a></div></td>
                  </tr>
                  <tr>
                    <td><div class="link"><a href="#">Gallery</a></div></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="link"><a href="#">Downloads</a></div></td>
                  </tr>
                  <tr>
                    <td>
                      <div class="link"><a href="#">Video</a></div></td>
                  </tr>
                  <tr>
                    <td><div class="link"><a href="#">Forum</a></div></td>
                  </tr>
                </table>
                <hr />
                <br />
                
                <table width="100%" border="0">
                  <tr>
                    <td>
                      <input name="Name" type="text" value="" size="10" /><br />
                      <font size="2">Name</font><br />
                      <input name="Password" type="text" size="10" /><br />
                      <font size="2">Password</font><br />
                      <input name="submit" type="submit" value="Log-in" /><br /><br />
                      <div class="link"><font size="2"><a href="#">Register</a> / <a href="#">Forgot Password?</a></font></div>
                    </td>
                  </tr>
                </table>
                <hr />
    
                <table width="100%" border="0">
                  <tr>
                    <td><b class="head">Statistic</b></td>
                  </tr>
                  <tr>
                    <td>
                      Users Online: 12<br />
                      Guest: 50<br />
                      <div class="link"><a href="#">View More Stats </a></div>
                      <hr />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <b class="head">Lorem ipsum dolor</b>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      <br /><br />
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                      <div class="link" align="right"><a href="#">more..</a></div>
                    </td>
                  </tr>
                </table>
              </td>
        
    <!--left end-->   
        
    <!--center begins-->
    		  <td valign="top" width="600" style="border-left: 1px solid #000; border-right: 1px solid #000;"><!-- added style here -->
                <table align="center" width="580" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td valign="top">
                      <b class="head">Latest Image</b>
                      <br />
                      <a href="#"><img src="image1.jpeg" width="280" height="170"/></a> <a href="#"><img src="image2.jpeg" width="280" height="170" /></a>
                      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                      <marquee behavior="alternate">
                        <img src="image3.jpeg" width="100" height="100" class="image" />
                        <img src="image4.jpeg" width="100" height="100" class="image" />
                        <img src="image5.jpeg" width="100" height="100" class="image" />
                        <img src="image6.jpeg" width="100" height="100" class="image" />
                        <img src="image1.jpeg" width="100" height="100" class="image" />
                        <img src="image2.jpeg" width="100" height="100" class="image" />
                      </marquee>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <hr />
                      <b class="head">Announcement</b>
                      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                    </td>
                  </tr>
                </table>
              </td>
    <!--center end-->
    
    		  <td valign="top" width="200" style="padding: 0 0 0 15px;"><!-- added style here -->
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td>
                      <b class="head">News and Events</b>
                      <p>03-20-11<br />
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      <br /><br />
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      </p>
                      <div class="link" align="right"><a href="#">more..</a></div>
                      <hr />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <b class="head">Lorem ipsum dolor</b> 
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      <br /><br />
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      </p>
                      <div class="link" align="right"><a href="#">more..</a></div>
                      <hr />
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <b class="head">Lorem ipsum dolor</b>
                      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      <br /><br />
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                      </p>
                      <div class="link" align="right"><a href="#">more..</a></div>
                    </td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td colspan="3" bgcolor="#000099" height="20"></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    
    </body>
    </html>
    Last edited by amitsh; 04-29-2011 at 09:47 PM.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    How about:

    border-left: 3px solid #f00;
    or
    border-right:3px dotted #ff0;

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    finoy_ako (04-30-2011)

  • #4
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    any border style is possible

    just give left and right border to ur center cell with any property u like.. just make sure it's center cell and not table...

    u need to give padding to ur left and right cell if u r not using padding in ur table properties to keep it separated from center cell border a bit

    like

    <table>
    <tr>
    <td>--- rest goes here ---</td> give right padding to dis <td>
    <td>--- rest goes here ---</td> give border to dis <td>
    <td>--- rest goes here ---</td> give left pading to dis <td>
    <tr>
    </table>

    hope this help u out...

  • Users who have thanked amitsh for this post:

    finoy_ako (04-30-2011)

  • #5
    Regular Coder
    Join Date
    Jan 2010
    Posts
    130
    Thanks
    52
    Thanked 0 Times in 0 Posts
    fixed. thanks a lot sir. its true that using table is more easier than css div.

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Quote Originally Posted by finoy_ako View Post
    fixed. thanks a lot sir. its true that using table is more easier than css div.
    I respectfully disagree. If you search 'why tables are bad for layout' you will find many links such as this one. Nested tables in particular are ... not good.

    It is recommended that tables should be used only for tabulated data.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Last edited by effpeetee; 04-30-2011 at 07:29 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    using table is not at all that much bad as far as i m concerned... ppl just don't like it 'cause it increases extra bytes in ur file which causes extra time to load the page and also bandwidth n also some search engine issues... but it's always easy to layout using tables that's the only point POSITIVE POINTS i c using TABLE LAYOUTS which easy to design but u gotta be gud in nested things 'cause colspan creates HELL like situation when u feel like shifting content of un-colspaned cell...

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The issue has less to do with bytes and bandwith/page load these days, and i would personally run a mile from nested tables (like your sample)

    You might have a read through the linked articles, but each to their own I suppose
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    New Coder
    Join Date
    Apr 2011
    Location
    New Delhi, India
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    i believe it's all like matter of choice...

    like taste... one likes COKE, one likes PEPSI, one some other brand

    so it depends what one feels comfortable in doing and not caring about RULES or STANDARD...

    if i like tables n not rules det shud be followed while designing den i shud go for det widout any doubt...

    just my personal thought not an argument at all

    enjoy!!!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •