PDA

View Full Version : design vs borders

alaios
07-13-2004, 07:07 PM
Hi there!!!

I am using very much the tables because they give me very flexibility in aligning objects.... The problem is that the netscape,mozilla and opera don't support the border color for the tables....so some uglu lines appear between my rows and cells... Can u suggest me something else?
bradyj
07-13-2004, 07:59 PM
Are you using CSS for your border colors?

Tables, though they add you flexibility, do not add the same flexibility for handicap users.
alaios
07-13-2004, 10:57 PM
is it possible that and why?? Is this supportedd by mozilla and opera? Canu give me an example?
Thx
bradyj
07-13-2004, 11:45 PM
border CSS is supported by ALL browsers, as spec by the W3. Let's show you both, here's without CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>

</head>
<body>
<table border="1" bordercolor="red" width="400" cellspacing="0" cellpadding="0">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</body>
</html>

That should honestly work fine for you, the CSS version is a bit different (here's a description: http://www.bowdoin.edu/templates/tables.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled</title>
<style type="text/css">
table, td {
border-color: gray;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
border-spacing: none;
}
</style>
</head>
<body>
<table width="400">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</table>
</body>
</html>


You can change padding in the cells (and their margins as well) by doing it like this:

table, td {
border-color: gray;
border-width: 1px;
border-style: solid;
border-collapse: collapse;
border-spacing: none;
padding: 10px 5px 12px 8px;
}

That order is top right bottom left, for the padding. You can also change the width or color to shorthand of the border as well, in the same order, like:

table, td {
border-color: gray red blue black;
border-width: 1px 5px 2px 12px;
border-style: solid;
border-collapse: collapse;
border-spacing: none;
padding: 10px 5px 12px 8px;
}


These are good examples, but I would recommend learning to design without tables. Tables are dying for layout, and many of use have found that by designing without, we've improved our skills and the look/usability of our sites. All it takes is for you to learn more:
http://www.w3schools.org
alaios
07-14-2004, 05:40 PM
Your answer really helped me

but the following seems to workini only in i.e
.basic3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
background-color: #FFFFFF;
list-style-type: circle;
}
a.basic3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #0066FF;
}
a.basic3:visited {
color: #00CCFF;
}
a.basic3:hover {
color: #FF9900;
}
table.basic3, tr,basic3, td.basic3, th.basic3{
border-collapse: collapse;
border-spacing: none;
border: 1px solid #000000;
}

in netscape and opera only the last value is accepter
table.basic1
table.basic2
table.basic3
e.t.c
Roy Sinclair
07-14-2004, 05:51 PM
You've got a comma which probably should be a period between "tr" and "basic3" in the selector for the last rule in the CSS you posted. Fix that and see if it helps. If it doesn't, post the matching HTML code so we can see what you're trying to style.
alaios
07-14-2004, 11:30 PM
thx a lot you saved me... :)
And...plz one more question... do u know if it is possible using css to create tables that are familiar with the frames and rules of a table tag?

Thx have a nice day
bradyj
07-14-2004, 11:44 PM
I'm not sure what you mean by that. Do you mean create a paragraph or something that will act like a table but not be a table? Though that is a spec in the CSS 2, Internet Explorer doesn't impliment it right (however, I'm not sure how the other browsers do it), so if that's what you mean, I wouldn't recommend it. But the code goes like (say you are changing a paragraph of text) this:

p {display: table;}


Or do I have your comment way off here? :D
bradyj
07-14-2004, 11:46 PM
Side note:
If you go through the CSS tutorial:
http://www.w3schools.org

There are elements that you can do to make it formed like a table, but not EXACTLY like a table. Like if I wanted, again, a paragraph to fit a certian way:

p {
width: 500px;
height: 100%;
}


And you can position it well, and move it around. Just about everything.