Topic: Table Border Pages that link to <a href="https://ozoneasylum.com/backlink?for=10759" title="Pages that link to Topic: Table Border" rel="nofollow" >Topic: Table Border\
 
Author Thread
Rice
Bipolar (III) Inmate

From:
Insane since: Jun 2002

 IP logged posted posted 06-19-2002 23:51 Edit Quote

Hello! Before I get blasted, I just wanna say that I'm new and still trying to grasp this css stuff. I need help with a table border so the line that goes around the table is really thin just like what ozoneasylum has. I'm creating a layout using Dreamweaver and what I'd like to know is how I can create a 2px border for my table. If I do Insert > Table and put 1 for border, the border is not as thin as how I want it to be. This table will be the placeholder for my text. I heard that css would be the best for this. Please advise. Thanks.

PS: I read about css from couple of sites and I'm still confused. Can someone give me the line of code or codes for me to have a 2px border for my table please? Thank you.
ZOX
Bipolar (III) Inmate

From: Southern Alabama, USA
Insane since: Sep 2000

 IP logged posted posted 06-20-2002 00:06 Edit Quote

One solution for this is to use two tables in each other, like this:

<table cellpadding=0 cellspacing=0 border=0><tr><td bgcolor=#000000>

<table cellpadding=5 cellspacing=2 border=0><tr><td bgcolor=#0099CC>This is the text...</td></tr></table>

</td></tr></table>

the width of the border is determined by the value of the cellspacing for the inner table.
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 IP logged posted posted 06-20-2002 00:12 Edit Quote

You might want that outer table to have a cellpadding of 2 if you want a border around the table also.

Here's the CSS way to do this:

table {
border: 2px solid black;
}

Or, if you also want borders around each individual cell:

table {
border: 1px solid black;
}
td {
border: 1px solid black;
}

Since the table cells are adjacent to each other and the edge of the table, all the 1px borders will be right next to each other (if cellspacing=0, or the CSS equivalent, whatever that may be), looking like 2px borders.
Rice
Bipolar (III) Inmate

From:
Insane since: Jun 2002

 IP logged posted posted 06-20-2002 01:25 Edit Quote

Will it therefore be something like this between the head tags?

<style type="text/css">
<--
table {
border: 2px solid black;
}
-->
</style>
</head>

Thank you! Thank you! Thank you for the help!



Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

 IP logged posted posted 06-20-2002 01:42 Edit Quote

Yes
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 06-20-2002 03:56 Edit Quote

Yep.

For some really good starter info on CSS, check out this tutorial at the Gurus Network -
http://www.gurusnetwork.com/tutorials/css/cssintro/cssintro1.html


Rice
Bipolar (III) Inmate

From:
Insane since: Jun 2002

 IP logged posted posted 06-20-2002 06:08 Edit Quote

Thank you for all the replies. I tried the css thing by adding the aforementioned and placed it in between the head tags but NOTHING happened. It didn't show any change. So, what I did, I pasted

<style type="text/css">
<--
table {
border: 2px solid black;
}
-->
</style>

in Notepad and saved it as table.css then in Dreamweaver, I did an attach stylesheet. I did this css stuff before but only on custom scrollbars and links and it worked ok. I just couldnt get the table border thing to work. So, I decided to paste what I currently have in this one .htm file. If you could please advise where I've gone wrong, I'd appreciate it. All I want is to have a 2px border around my table just like what we see here at ozoneasylum. Sorry for being a pest, guys.... but as soon as I get this to work, I won't ask this same question again. Thank you!

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="file:///C
Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

 IP logged posted posted 06-20-2002 07:16 Edit Quote

First of all, get rid of those absolute paths. You have one for the style sheet, and one for the summer.gif image.

Since I can't see your style sheet, I made ONE change (other than the absolute paths). I added the style info to the first table:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="table.css" type="text/css">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="760" border="0" cellspacing="0" cellpadding="0" height="274" style="border: 1px solid #000000">
<tr>
<td width="340" valign="top" height="281"><img src="summer.gif" width="338" height="281"><br>
</td>
<td width="420" valign="top" height="281">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="264">
<tr>
<td valign="top" height="250">
<div align="center"><font color="#FF8000">?</font><font face="Verdana, Arial, Helvetica, sans-serif" color="#CC6600">CURRENTLY</font><font color="#FF8000">?</font><br>
<font face="Verdana, Arial, Helvetica, sans-serif" size="1">like
you really want to know</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<br>
<br>
</font>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"></div>
<font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>DATE</b></font></td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">06.19.02</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>TIME</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">9.05
pm</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>ATTIRE</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">tank
and pajama pants</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>GRUB</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">H2O</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>NOISE</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">JJ
All For You</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>MOOD</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">grrrr...
(Couldnt get CSS to work!!!)</font></td>
</tr>
</table>
<font color="#FF8000"><br>
?</font><font face="Verdana, Arial, Helvetica, sans-serif" color="#CC6600">TO
DO LIST</font><font color="#FF8000">?</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><br>
</font><font face="Verdana, Arial, Helvetica, sans-serif" size="1">I'm
so busy!<br>
<br>
</font>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%">
<div align="left"><font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">Summer
Layout </font></font></div>
</td>
<td width="5%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Mail
package for Big B.</font></td>
</tr>
<tr>
<td width="17%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%">
<div align="left"><font size="1"><font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">Laundry</font></font></font></div>
</td>
<td width="5%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Domestic
Chores </font></td>
</tr>
<tr>
<td width="17%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%">
<div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">P/U
Chinese Food </font></div>
</td>
<td width="5%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Box
more items.</font></td>
</tr>
<tr>
<td width="17%" height="16"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%" height="16">
<div align="left"><font size="1"><font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">Hair
Treatment</font></font></font></div>
</td>
<td width="5%" height="16"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%" height="16"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Sleep
(?)</font></td>
</tr>
</table>
<font face="Verdana, Arial, Helvetica, sans-serif" size="1"> </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><br>
</font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p></body>
</html>


OR, you could just add the style info in the HEAD, and do something like this:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="table.css" type="text/css">
<style type="text/css">
.blah {border: 1px solid #000000}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<table width="760" border="0" cellspacing="0" cellpadding="0" height="274" class="blah">
<tr>
<td width="340" valign="top" height="281"><img src="summer.gif" width="338" height="281"><br>
</td>
<td width="420" valign="top" height="281">
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="264">
<tr>
<td valign="top" height="250">
<div align="center"><font color="#FF8000">?</font><font face="Verdana, Arial, Helvetica, sans-serif" color="#CC6600">CURRENTLY</font><font color="#FF8000">?</font><br>
<font face="Verdana, Arial, Helvetica, sans-serif" size="1">like
you really want to know</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
<br>
<br>
</font>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"></div>
<font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>DATE</b></font></td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">06.19.02</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>TIME</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">9.05
pm</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>ATTIRE</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">tank
and pajama pants</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>GRUB</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">H2O</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>NOISE</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">JJ
All For You</font></td>
</tr>
<tr>
<td width="17%"> </td>
<td width="16%">
<div align="left"><font color="#CC6600" size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>MOOD</b></font></div>
</td>
<td width="14%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">grrrr...
(Couldnt get CSS to work!!!)</font></td>
</tr>
</table>
<font color="#FF8000"><br>
?</font><font face="Verdana, Arial, Helvetica, sans-serif" color="#CC6600">TO
DO LIST</font><font color="#FF8000">?</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><br>
</font><font face="Verdana, Arial, Helvetica, sans-serif" size="1">I'm
so busy!<br>
<br>
</font>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%">
<div align="left"><font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">Summer
Layout </font></font></div>
</td>
<td width="5%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Mail
package for Big B.</font></td>
</tr>
<tr>
<td width="17%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%">
<div align="left"><font size="1"><font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">Laundry</font></font></font></div>
</td>
<td width="5%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Domestic
Chores </font></td>
</tr>
<tr>
<td width="17%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%">
<div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">P/U
Chinese Food </font></div>
</td>
<td width="5%"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Box
more items.</font></td>
</tr>
<tr>
<td width="17%" height="16"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="25%" height="16">
<div align="left"><font size="1"><font size="1"><font face="Verdana, Arial, Helvetica, sans-serif">Hair
Treatment</font></font></font></div>
</td>
<td width="5%" height="16"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"></font></td>
<td width="53%" height="16"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">Sleep
(?)</font></td>
</tr>
</table>
<font face="Verdana, Arial, Helvetica, sans-serif" size="1"> </font><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><br>
</font></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p> </p></body>
</html>



[This message has been edited by Pugzly (edited 06-20-2002).]
bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

 IP logged posted posted 06-20-2002 07:31 Edit Quote

These guys got you in the right direction so I'm just gonna drop a quick tip. NEVER use the built in table borders. (ie <table cellpadding=0 cellspacing=0 border=whatever) This is the one that DW refers to in that field and you get those ugly 3d things. That border is kinda an old old remnant and is so ugly it's now virtually useless.



.:[ Never resist a perfect moment ]:.
kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

 IP logged posted posted 06-20-2002 08:14 Edit Quote

Yes, you could do what Pugzly proposed and have the style sheets in the head tags instead of en external file.

Or, you solve the problem by removing the style tags and comments from the .css file, because in external css files you shouldn't have anything but the style definitions.

That's what the file should look like:

table {
border: 2px solid black;
}

kuckus (cell #282)
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 IP logged posted posted 06-20-2002 15:27 Edit Quote

Let's not forget about using Bugimus' cross browser method. Might confuse you but I thought I'd through it in.

Bugimus Table Border

Later,
C:\


~Binary is best~
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 06-20-2002 15:43 Edit Quote

Ouch.

That is some seriously ugly code

Best thing you could possibly do is drop dreamweaver altogether.

For a two pixel border, Slime's way will work fine. Make sure you don't specify a border in th <table> tag, as Bitdamaged said.

Should you want a one pixel border, you could uses bugimus' method, or you could do this:

table
{
border-top:#000 1px solid;
border-right:#000 1px solid;
}

td
{
border-bottom:#000 1px solid;
border-left:#000 1px solid;
}



[This message has been edited by DL-44 (edited 06-20-2002).]
Rice
Bipolar (III) Inmate

From:
Insane since: Jun 2002

 IP logged posted posted 06-20-2002 18:28 Edit Quote

Thank you for all the input. I'm really glad I went here for help. I knew there was something up with the code view but I do not know an alternative. I'm pretty new at this web stuff and still learning. I started out with FrontPage and I thought that was bad since it adds and embeds its own proprietary codes and you're at the mercy of the frontpage server extensions! I then turned to Dreamweaver. I thought using DW was better than FP and that's also the time I started to go under the hood by going to DW's code view. I'm too afraid to face HTML and hopefully that will change sometime. I picked up a book on HTML but am yet to gain strength to even open it!!!

Well, with all the input posted here, I think I'll have enough to work with. I will look into all suggestions and work from there. If you have any other comments, please advise. Thanks again!
AT
Bipolar (III) Inmate

From: Louisville, KY, USA
Insane since: Aug 2000

 IP logged posted posted 09-15-2002 23:00 Edit Quote

HTML shouldn't be thought of as some dirty whore... (No offence to DL's occupation )
but more of a warm, sweet housewife...

she'll be there a lot longer then you ever thought...

Petskull
Maniac (V) Mad Scientist

From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000

 IP logged posted posted 09-16-2002 13:44 Edit Quote

... and the sex is free if you pretend to be nice to it...

I think there's a way to change the color on the old table border.... but I've no idea what it is...

I actually use the old table border for testing purposes.. it easier to see what you're doing..

btw, PHP is the dirty whore...


Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342

[This message has been edited by Petskull (edited 09-16-2002).]


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu