PDA

View Full Version : table borders are not being displayed



san_crazy
Dec 21st, 2008, 08:36 AM
hi friends,
I have a problem with table borders. I am using following code, but borders are not displayed,



<table border="1">
<tr>
<th>Book</th>
<th>Author</th>
<th>Available Qty</th>
<th>Catagory</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>


is there something I am doing wrong?

Majoracle
Dec 21st, 2008, 10:57 AM
The code you're showing would have a border, yes. Do you have any CSS that might be effecting the table?

coothead
Dec 21st, 2008, 11:34 AM
Hi there san_crazy,

many browsers will not display borders for empty cells.
Try using...

<td>&nbsp;</td>...to bring them into view. ;)

coothead

san_crazy
Dec 21st, 2008, 02:28 PM
The code you're showing would have a border, yes. Do you have any CSS that might be effecting the table?

ya, there was but i am still not able to show the border after removing that code

san_crazy
Dec 21st, 2008, 02:29 PM
Hi there san_crazy,

many browsers will not display borders for empty cells.
Try using...

<td>&nbsp;</td>...to bring them into view. ;)

coothead

it doesn't make any effect after doing like :


<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>


ok, the whole page is like this:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 12/20/2008 12:53:54 PM -->
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<style type="text/css">
*{
padding:0;
border:0;
margin:0;
}

#search_issue_window
{
background-color:#E8F8FF;
width:548px;height:600px;
position:absolute;
left:150px;top:40px;
border:solid;
border-width:2px;
border-color:#BFEBFF;
}
fieldset
{
position:absolute;
left:9px;top:88px;
width:96%;height:35%;
border:solid;border-width:2px;
border-color:#B6E6F9;
font-family:"CENTURY GOTHIC";font-size:12px;
}


#submit_1
{
position:absolute;
left: 392px; top:83%;
width:100px; height:22px;
border:solid;border-width:1px;
text-align:center;
background-color:#BFEBFF;
border-color:#ACD4E5;
font-family:CENTURY GOTHIC;font-size:12px;
}

input{
background-color:#D2ECF7;
border-style:solid;border-width:1px;
border-color:#95D9F4;
width:250px; height:17px;
position:absolute;
left:240px; top:45px;
font-family:verdana;font-size:12px;
}
a{
position:absolute;
left:35px; top:45px;
font-family:CENTURY GOTHIC;
}
select
{
background-color:#D2ECF7;
border-style:solid;border-width:1px;
border-color:#95D9F4;
width:255px; height:17px;
position:absolute;
left:240px; top:45px;
font-family:verdana;font-size:10px;
}
table
{
position:absolute;
left:10px;top:15px;
width:96%;height:35%;
border-color:#B6E6F9;
font-family:"CENTURY GOTHIC";font-size:12px;
}
</style>
</head>
<body>
<form>
<div id="search_issue_window">
<a style="position:absolute;left:160px;top:25px; font-size:24px;">Search/Issue Books</a>
<fieldset id="search_books">
<legend>Search Books</legend>
<br/><br/>
<a>User Id :</a>
<input id="book_name" name="book_name" type="text">
<a style="position:absolute;top:100px;">Passowrd :</a>
<select name="book_catag" style="position:absolute;top:100px;">
<option>Select a Catagory</option>
<option>Computer Programming</option>
<option>Computer Hardware</option>
<option>Networking</option>
</select>
<input type="submit" id="submit_1" value="Search"></input>
</fieldset>
<fieldset id="search_results" style="position:absolute;top:330px;height:42%;">
<legend>Search Results</legend>
<table border="1" cellspacing="0" cellpadding="0" >
<tr>
<th>Book</th>
<th>Author</th>
<th>Available Qty</th>
<th>Catagory</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<a id="submit_1">Issue</a>
</fieldset>
</div>
</form>
</body>
</html>

abduraooft
Dec 21st, 2008, 02:32 PM
ya, there was but i am still not able to show the border after removing that code Could you post your complete html+css? or a a link would be better!

san_crazy
Dec 21st, 2008, 02:34 PM
sorry!
you could post your reply before i can
well, I have given the whole HTML/CSS in above reply

coothead
Dec 21st, 2008, 02:48 PM
Hi there san_crazy,

the reason that your table border and td borders do not show is this...


* {
padding:0;
border:0;
margin:0;
}

coothead

abduraooft
Dec 21st, 2008, 03:00 PM
border is a depreciated attribute. So avoid usage of it, and use the border property in style/CSS. Say

table{
border:1px solid #000;
}

VIPStephan
Dec 21st, 2008, 04:00 PM
border is a depreciated attribute. So avoid usage of it, and use the border property in
style/CSS. Say
table{
border:1px solid #000;
}

This will only apply a border around the table, though, not each cell in a table. For that you can either use the rules attribute (which isn’t deprecated) or CSS. W3C stating for the rules attribute:

rules = none|groups|rows|cols|all
This attribute specifies which rules will appear between cells within a table. The rendering of rules is user agent dependent. Possible values:

none: No rules. This is the default value.
groups: Rules will appear between row groups (see THEAD, TFOOT, and TBODY) and column groups (see COLGROUP and COL) only.
rows: Rules will appear between rows only.
cols: Rules will appear between columns only.
all: Rules will appear between all rows and columns.



With CSS you’d need to write something like this:


table {border-collapse: collapse;}
th, td {border: 1px solid black;}

san_crazy
Dec 21st, 2008, 04:07 PM
thanks a lot!!!!
now its working