...

View Full Version : Vertical line



finoy_ako
04-29-2011, 07:46 PM
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.




<!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

amitsh
04-29-2011, 09:55 PM
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 -->

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



<!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>

effpeetee
04-30-2011, 12:03 PM
How about:

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

Frank

amitsh
04-30-2011, 12:40 PM
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...

finoy_ako
04-30-2011, 05:25 PM
fixed. thanks a lot sir. its true that using table is more easier than css div.

AndrewGSW
04-30-2011, 06:10 PM
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 (http://phrogz.net/css/WhyTablesAreBadForLayout.html). Nested tables in particular are ... not good.

It is recommended that tables should be used only for tabulated data.

effpeetee
04-30-2011, 08:26 PM
The is a relevant article. (http://www.hotdesign.com/seybold/)

You may find this helpful too. (http://www.mardiros.net/liquid-css-layouts.html)

Frank

amitsh
04-30-2011, 10:39 PM
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...

AndrewGSW
04-30-2011, 11:35 PM
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) :eek:

You might have a read through the linked articles, but each to their own I suppose ;)

amitsh
05-01-2011, 12:27 AM
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!!!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum