very very very simple html question

squakMix · 15th December 2004, 23:55

I've noticed since my transition to firefox, I cant get the "3d" look to my borders (and my bordercolors) on simple html tables to go away and leave a solid line.

<table border=1 bordercolor=#000000 cellpadding=0 cellspacing=0> doesnt seem to do it.

Anyone know how to just get a solid line?

(and I dont want a bunch of people yelling "Dont use tables!". I am not interested in switching right now)

Smeggle · 16th December 2004, 00:32

DON'T USE TABLES!!

lol

em dunno mnths since I used that and as I use css now I use this;

code:


#name of identifier {

       border-top: 1px #087028 solid;

       border-bottom: 1px #087028 solid;

       border-right: 1px #087028 solid;

       border-left: 1px #087028 solid;

}

That gives me control of the borders in one of my nav structures.

simple to use - I have the size of the border = 1px the color and what style I want solid or dotted

btw looking at your code above - you need to add " " to every thing- like so;

code:


your version 

<table border=1 bordercolor=#000000 cellpadding=0 cellspacing=0>



which is technically wrong;



and the corrected version;



<table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0">

allways use lower case and allways use the speech markers - then you can possibly make an easy transition to xhtml - and get rid of those damn tables!

~

ps. I'll see if I can find the code for you and post back - but I haven't used it in mnths so I could have it anywhere - I'll see what I can do - unless someone posts before then of course

squakMix · 16th December 2004, 00:39

Yea, I'll probably just use css (because I can get a thinner border with it also).

Thanks

Edit:

Ah crap, I cant because I have a table I want to have no border on the same page. Is there anyway I can get this to specific tables only?

Smeggle · 16th December 2004, 00:54

id it

code:


<table class="identifier"> then fill in the rest of your table   

stuff

then use this in your meta tags

code:


<link rel="stylesheet" type="text/css" href="name of the css.css" />

you then create a .txt rename it to say test.css and
in there put the border code.

now it identifies one of two ways either via the hash symbol '#' or via a full stop like so

code:




#identifier { 

css code

}

or via



.identifier {

css code

}

If I remember right for class you use the full stop. As I use the simpler hash - I would identify the table this way;

code:




<table id="identifier">

That should work..

If you get used to using it you can move all of the attributes to the css document.

I have some simple templates in xhtml/css that you can look at and play with to get the hang of it if you want? pm me for details as to where to get them

~

edit: btw take a look at these. This shows the power of css and xhtml divs.

All three of these are the same template. I just adjusted to add a page cell to two and the rest is done in css

One
Two
Three

Thats why I made the change - simple templates yes, and I can do what I like to them from there..

squakMix · 16th December 2004, 00:58

Ah, I didnt know the proporty that holds the tables identifier (I tried "name = 'blah'" but it didnt work for obvious reasons).

Thanks, I'll go try it out.

Edit: is there a way to do this all within my html? I dont want to link to another css file (as I've never ever used them and am somewhat pressed for time).

Smeggle · 16th December 2004, 01:07

Yeah you can use it in-line but I'm not sure how to seperate them so it won't affect the other table - I'd allready changed over and never really used css in-line so sorry can't really help you there ..

wonders where Griffin is he'd know

~

btw have a look at the three samples above

dlichterman · 16th December 2004, 01:13

101 · 16th December 2004, 01:14

code:
<head>

<style type="text/css">



.myTable { border: 1px #087028 solid; }



</style>

</head>



<table class="myTable">

<tr>

<td>blah</td>

</tr>

</table>

/too late though

squakMix · 16th December 2004, 01:28

Quote:

Originally posted by dlichterman
<style>
#identifier {
css code
}
or via

.identifier {
css code
}
</style>

and put that between the head tags

ah, thank you. I "IDed" the table and was wondering why it wouldnt link back to my css (and it was because I didnt have the #).

Thanks guys

dlichterman · 16th December 2004, 01:31

haha, yeah that would do it

ryan · 16th December 2004, 01:35

Using a # before the identifer lets you use it via the id attribute. IDs are unique, you can only use them once per document

Using a . before the identifier lets you use it via the class attribute. Classes can be used as many times as you want per document.

And I still say going with a more semantic div based layout is a lot easier (and easier to manage) than using tables to layout your page.

squakMix · 16th December 2004, 01:35

Ok, new question:

I have three tds in my table, but when I use

border-top: 2px #9F9F9F solid;
border-bottom: 2px #9F9F9F solid;
border-right: 2px #9F9F9F solid;
border-left: 2px #9F9F9F solid;

This only outlines the outside borders.
How would I show the td border?

Smeggle · 16th December 2004, 01:43

got a link to the document/page?

squakMix · 16th December 2004, 01:47

I just started it today, so there's not much code. here's what it looks like (remember It's all empty with placeholders and such):

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

<html>
<head>
<meta link rel="stylesheet" type="text/css" href="name of the css.css" />
<style type=text/css>






------!>#FF0000
</style>

</head>
<body bgcolor=#D3D3D3 Topmargin=0 bottom Margin=0 bottomMargin=0 leftmargin=0 rightMargin=0>

<table cellpadding=0 cellspacing=0 bgcolor=#D3D3D3 width=100% height=100%>
<tr>
<td>
<center>

<table id="table-inside" border=0 cellspacing=0 cellpadding=0 width=500 height=160>
<tr>
<td>
asd
</td>
<td>
asd
</td>
<td>
asd
</td>
</tr>
</table>

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

</body>
</html>

Smeggle · 16th December 2004, 01:49

Quote:

Originally posted by ryan
Using a # before the identifer lets you use it via the id attribute. IDs are unique, you can only use them once per document

Using a . before the identifier lets you use it via the class attribute. Classes can be used as many times as you want per document.

And I still say going with a more semantic div based layout is a lot easier (and easier to manage) than using tables to layout your page.

yeah and also using it as ryan says you uniquely identify your divs and use class attributes within your divs . Remember you can encapsulate tables inside your divs, giving a great deal more control over your page and layout.

(thanks for reminding me on that one ryan

)

101 · 16th December 2004, 01:51

Quote:

How would I show the td border?

Creating a .td class and playing with its border attributes.

squakMix · 16th December 2004, 01:51

I actually am considering learning how to use divs. Looks and sounds like it'l save me some time and stress.

Got any good resource for learning how to use divs?

squakMix · 16th December 2004, 01:53

Quote:

Originally posted by 101
Creating a .td class and playing with its border attributes.

I tried doing the same thing I did in the main table tag in a td tag (and messing with border properties in the css) but it did nothing.

Smeggle · 16th December 2004, 01:59

ok looking at that you can't use two types of css to attribute the same table. you either use inline style tags or you link via the css/text link I gave you. (btw - drop the 'forward slash' at the end if your using html 4.01.

heres how I would write what you have above then

code:


<html>

<head>

<meta link rel="stylesheet" type="text/css" href="name of the css.css" >

</head>

<body bgcolor=#D3D3D3 Topmargin=0 bottom Margin=0 bottomMargin=0 leftmargin=0 rightMargin=0>



<div>

<table cellpadding=0 cellspacing=0 bgcolor=#D3D3D3 width=100% height=100%>

<tr>

<td>

<center>

</div>







<div>

<table class="table-inside" border=0 cellspacing=0 cellpadding=0 width=500 height=160>

<tr>

<td>

asd

</td>

<td>

asd

</td>

<td>

asd

</td>

</tr>

</table>





</center>

</td>

</tr>

</table>

</div>





</body>

</html>

I would also then uniquely identify the divs so I can position them where I want on the page/document either Absolute or relevant.

notice I have changed the table idetifier to 'class' from the 'id' identifier.

~

edit: ah if I remember right you don't need to use hash or fullstop with tr or td only

code:


td {

css code

}

you have to be careful with that though as it will attribute it to all td's and tr's. I'm sure you can use

code:


td identifier{

css code

}

but don't quote me on it as I never used it and jumped straight to divs without tables.

As you can see by those three examples I popped in above I have a pagecell in two of those designs. before those would have been done with a table. Now I just use div=pagecell and the rest is done in the css.

I have this in those templates I mentioned I think - but the best resrc I know of is zen garden or W3C

squakMix · 16th December 2004, 02:02

what exactly are divs (how do they work)?

101 · 16th December 2004, 02:06

code:
<head>

<style type="text/css">



#table-inside {

border-top: 2px #9F9F9F solid;

border-bottom: 2px #9F9F9F solid;

border-right: 2px #9F9F9F solid;

border-left: 2px #9F9F9F solid;

}

#td-inside {

border-top: 1px #000000 solid;

border-right: 1px #000000 solid;

}





</style>

</head>



<table id="table-inside" cellpadding="0" cellspacing="0">

<tr>

<td id="td-inside">blah</td>

</tr>

</table>

It does something

squakMix · 16th December 2004, 02:15

...strange; I just gave it another try and this time it worked

Thanks for the help

Mattress · 16th December 2004, 03:42

you can also do:

code:


#identifier tr td {

   styles:stuff;

}

if you wanted to apply a style to every td in the identifier table without assigning a class to them all.

Wolfgang · 16th December 2004, 18:42

Quote:

Originally posted by squakMix
what exactly are divs (how do they work)?

They're layers. They're like a box whose position you can define in relation to the top left corner of the page (position:absolute;) or in relation to the position in the text flow (position:relative;). They're really flexible and easy to use with css. You can customise them a lot, make them overlap and using a script you can drag them across the page and show or hide them via a single click. You can also make them semi-transparent (only in IE though). They're the shit in my opinion, compared to tables and frames. They've the only things I actually know anything about in HTML and css because I've spent an inordinately large amount of time pissing around with my active desktop.

15th December 2004, 23:55	#1
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	very very very simple html question I've noticed since my transition to firefox, I cant get the "3d" look to my borders (and my bordercolors) on simple html tables to go away and leave a solid line. <table border=1 bordercolor=#000000 cellpadding=0 cellspacing=0> doesnt seem to do it. Anyone know how to just get a solid line? (and I dont want a bunch of people yelling "Dont use tables!". I am not interested in switching right now) Check out my music

16th December 2004, 00:32	#2
Smeggle Just Strolling By (Major Dude) Join Date: Aug 2002 Location: A Long Winding Road..... Posts: 3,259	DON'T USE TABLES!! lol em dunno mnths since I used that and as I use css now I use this; code: #name of identifier { border-top: 1px #087028 solid; border-bottom: 1px #087028 solid; border-right: 1px #087028 solid; border-left: 1px #087028 solid; } That gives me control of the borders in one of my nav structures. simple to use - I have the size of the border = 1px the color and what style I want solid or dotted btw looking at your code above - you need to add " " to every thing- like so; code: your version <table border=1 bordercolor=#000000 cellpadding=0 cellspacing=0> which is technically wrong; and the corrected version; <table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0"> allways use lower case and allways use the speech markers - then you can possibly make an easy transition to xhtml - and get rid of those damn tables! ~ ps. I'll see if I can find the code for you and post back - but I haven't used it in mnths so I could have it anywhere - I'll see what I can do - unless someone posts before then of course Music is Life, Love and Happiness :\|: Life is Music. Serren - 1985 - 2005 Religion? Religion is a Blasphemy against humanity - From the film What the Bleep do we know siggy link So stumbling? whats it all about

16th December 2004, 00:39	#3
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	Yea, I'll probably just use css (because I can get a thinner border with it also). Thanks Edit: Ah crap, I cant because I have a table I want to have no border on the same page. Is there anyway I can get this to specific tables only? Check out my music

16th December 2004, 00:54	#4
Smeggle Just Strolling By (Major Dude) Join Date: Aug 2002 Location: A Long Winding Road..... Posts: 3,259	id it code: <table class="identifier"> then fill in the rest of your table stuff then use this in your meta tags code: <link rel="stylesheet" type="text/css" href="name of the css.css" /> you then create a .txt rename it to say test.css and in there put the border code. now it identifies one of two ways either via the hash symbol '#' or via a full stop like so code: #identifier { css code } or via .identifier { css code } If I remember right for class you use the full stop. As I use the simpler hash - I would identify the table this way; code: <table id="identifier"> That should work.. If you get used to using it you can move all of the attributes to the css document. I have some simple templates in xhtml/css that you can look at and play with to get the hang of it if you want? pm me for details as to where to get them ~ edit: btw take a look at these. This shows the power of css and xhtml divs. All three of these are the same template. I just adjusted to add a page cell to two and the rest is done in css One Two Three Thats why I made the change - simple templates yes, and I can do what I like to them from there.. Music is Life, Love and Happiness :\|: Life is Music. Serren - 1985 - 2005 Religion? Religion is a Blasphemy against humanity - From the film What the Bleep do we know siggy link So stumbling? whats it all about

16th December 2004, 00:58	#5
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	Ah, I didnt know the proporty that holds the tables identifier (I tried "name = 'blah'" but it didnt work for obvious reasons). Thanks, I'll go try it out. Edit: is there a way to do this all within my html? I dont want to link to another css file (as I've never ever used them and am somewhat pressed for time). Check out my music

16th December 2004, 01:07	#6
Smeggle Just Strolling By (Major Dude) Join Date: Aug 2002 Location: A Long Winding Road..... Posts: 3,259	Yeah you can use it in-line but I'm not sure how to seperate them so it won't affect the other table - I'd allready changed over and never really used css in-line so sorry can't really help you there .. wonders where Griffin is he'd know ~ btw have a look at the three samples above Music is Life, Love and Happiness :\|: Life is Music. Serren - 1985 - 2005 Religion? Religion is a Blasphemy against humanity - From the film What the Bleep do we know siggy link So stumbling? whats it all about

16th December 2004, 01:13	#7
dlichterman Forum King Join Date: Mar 2001 Location: Where Hell Froze Over Posts: 2,466	<style> #identifier { css code } or via .identifier { css code } </style> and put that between the head tags Software is like sex: It's better when it's free.--If at first you don't succeed; call it version 1.0--Guess the band from pics game

16th December 2004, 01:14	#8
101 Major Dude Join Date: Jul 2004 Location: Argentina Posts: 828	code: <head> <style type="text/css"> .myTable { border: 1px #087028 solid; } </style> </head> <table class="myTable"> <tr> <td>blah</td> </tr> </table> /too late though Words are very unnecessary, they can only do harm, so enjoy the silence - Depeche Mode Firemonger Project: Help spread Firefox

16th December 2004, 01:31	#10
dlichterman Forum King Join Date: Mar 2001 Location: Where Hell Froze Over Posts: 2,466	haha, yeah that would do it Software is like sex: It's better when it's free.--If at first you don't succeed; call it version 1.0--Guess the band from pics game

16th December 2004, 01:35	#11
ryan not fucked, not quite. (Forum King) Join Date: Feb 2002 Location: Missouri via Tennessee Posts: 8,813	Using a # before the identifer lets you use it via the id attribute. IDs are unique, you can only use them once per document Using a . before the identifier lets you use it via the class attribute. Classes can be used as many times as you want per document. And I still say going with a more semantic div based layout is a lot easier (and easier to manage) than using tables to layout your page.

16th December 2004, 01:43	#13
Smeggle Just Strolling By (Major Dude) Join Date: Aug 2002 Location: A Long Winding Road..... Posts: 3,259	got a link to the document/page? Music is Life, Love and Happiness :\|: Life is Music. Serren - 1985 - 2005 Religion? Religion is a Blasphemy against humanity - From the film What the Bleep do we know siggy link So stumbling? whats it all about

16th December 2004, 01:47	#14
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	I just started it today, so there's not much code. here's what it looks like (remember It's all empty with placeholders and such): ================================================ <html> <head> <meta link rel="stylesheet" type="text/css" href="name of the css.css" /> <style type=text/css> <!-- <!--table { font-family: Tahoma; font-size: 12px; font-style: Normal; color: #ffffff; } #table-inside { border-top: 2px #9F9F9F solid; border-bottom: 2px #9F9F9F solid; border-right: 2px #9F9F9F solid; border-left: 2px #9F9F9F solid; } <!-- <!--A { text-decoration:none }--> <!--A:link {text-decoration: none; color: #FFFFFF}-----> <!--A:link {font-family: tahoma; font-size: 11pt;} <!--A:visited {text-decoration: none; color: #8A8A8A; }-----> <!--A:visited {font-family: tahoma; font-size: 11pt;}-----> <!--A:hover {text-decoration: None; color: #8A8A8A}--> ------!>#FF0000 </style> </head> <body bgcolor=#D3D3D3 Topmargin=0 bottom Margin=0 bottomMargin=0 leftmargin=0 rightMargin=0> <table cellpadding=0 cellspacing=0 bgcolor=#D3D3D3 width=100% height=100%> <tr> <td> <center> <table id="table-inside" border=0 cellspacing=0 cellpadding=0 width=500 height=160> <tr> <td> asd </td> <td> asd </td> <td> asd </td> </tr> </table> </center> </td> </tr> </table> </body> </html> Check out my music

16th December 2004, 01:51	#17
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	I actually am considering learning how to use divs. Looks and sounds like it'l save me some time and stress. Got any good resource for learning how to use divs? Check out my music

16th December 2004, 01:59	#19
Smeggle Just Strolling By (Major Dude) Join Date: Aug 2002 Location: A Long Winding Road..... Posts: 3,259	ok looking at that you can't use two types of css to attribute the same table. you either use inline style tags or you link via the css/text link I gave you. (btw - drop the 'forward slash' at the end if your using html 4.01. heres how I would write what you have above then code: <html> <head> <meta link rel="stylesheet" type="text/css" href="name of the css.css" > </head> <body bgcolor=#D3D3D3 Topmargin=0 bottom Margin=0 bottomMargin=0 leftmargin=0 rightMargin=0> <div> <table cellpadding=0 cellspacing=0 bgcolor=#D3D3D3 width=100% height=100%> <tr> <td> <center> </div> <div> <table class="table-inside" border=0 cellspacing=0 cellpadding=0 width=500 height=160> <tr> <td> asd </td> <td> asd </td> <td> asd </td> </tr> </table> </center> </td> </tr> </table> </div> </body> </html> I would also then uniquely identify the divs so I can position them where I want on the page/document either Absolute or relevant. notice I have changed the table idetifier to 'class' from the 'id' identifier. ~ edit: ah if I remember right you don't need to use hash or fullstop with tr or td only code: td { css code } you have to be careful with that though as it will attribute it to all td's and tr's. I'm sure you can use code: td identifier{ css code } but don't quote me on it as I never used it and jumped straight to divs without tables. As you can see by those three examples I popped in above I have a pagecell in two of those designs. before those would have been done with a table. Now I just use div=pagecell and the rest is done in the css. I have this in those templates I mentioned I think - but the best resrc I know of is zen garden or W3C Music is Life, Love and Happiness :\|: Life is Music. Serren - 1985 - 2005 Religion? Religion is a Blasphemy against humanity - From the film What the Bleep do we know siggy link So stumbling? whats it all about

16th December 2004, 02:02	#20
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	what exactly are divs (how do they work)? Check out my music

16th December 2004, 02:15	#22
squakMix wwwyzzerdd (Forum King) Join Date: May 2003 Posts: 3,458	...strange; I just gave it another try and this time it worked Thanks for the help Check out my music

16th December 2004, 03:42	#23
Mattress Forum King Join Date: Jun 2003 Location: Milwaukee Posts: 4,577	you can also do: code: #identifier tr td { styles:stuff; } if you wanted to apply a style to every td in the identifier table without assigning a class to them all. Besides shooting out a big blank from your buttock, you can feel as if your root chakra leaked sweet hot mucus.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode