finoy_ako
04-29-2011, 06: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"> </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> </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
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"> </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> </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