Homework Help

SakSquash · 02-18-2006, 09:57 PM

How do you make the border of a table dark in XHTML?

Jeysie · 02-18-2006, 10:16 PM

You really should be doing that sort of thing with an external style sheet.

However, you can take one of two routes if you decide to embed the style into the XHTML document itself.

1. Put this inside the HEAD element:

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

Note: This will give all tables in the document the same border style.

2. Put this as your starting TABLE tag:

<table style="border:solid black;">

Either of those should give you a solid black border, I believe... they will in HTML, at any rate.

You might find this link useful:

http://www.htmldog.com/reference/

Peace & Luv, Liz

jjacob · 02-18-2006, 10:17 PM

Under the table attribute set bordercolor to dark, you can even set bordercolordark and bordercolorlight to specify the colour of both 'sides' of the "3D" border (making both black would work). Then again I'm not quite sure, I'm drunk *hickup*

Jeysie · 02-18-2006, 10:25 PM

jjacob:

AFAIK, "bordercolor" isn't a valid XHTML attribute. And IIRC "bordercolordark" and "bordercolorlight" are IE-only.

Peace & Luv, Liz

SakSquash · 02-18-2006, 11:34 PM

Didn't work.

jjacob · 02-18-2006, 11:47 PM

Whoops sorry just remembered that from my notepad-html days, plus I was sort of drunk. But why not just use something like Dreamweaver Sassie?

SakSquash · 02-19-2006, 12:53 AM

Because that's not what they're teaching us.

Can anyone help me with this? It's still not getting dark. Here's the HTML I'm using thus far:

<table border = "4" align = "center"
summary = "average grade by year">
<thead>
<colgroup>
<col align = "center" span = "5" />

</colgroup>
<th colspan = "5">Academic Summary of SUNY at New Paltz</th>
</thead>

<tbody>
<tr>
<td><i>Course</i></td>
<td>2002</td>
<td>2003</td>
<td>2004</td>
<td>2005</td>
</tr>
<tr>
<td><b>English</b></td>
<td>A-</td>
<td>B</td>
<td>B+</td>
<td>B-</td>
</tr>
<tr>
<td><b>Mathematics</b></td>
<td>B+</td>
<td>B</td>
<td>A-</td>
<td>B-</td>
</tr>
<tr>
<td><b>History</b></td>
<td>A-</td>
<td>A-</td>
<td>B+</td>
<td>B+</td>
</tr>
<tr>
<td><b>Physics</b></td>
<td>A-</td>
<td>B+</td>
<td>B</td>
<td>B</td>
</tr>

</tbody>
</table>

second headings blue

table heads yellow course dates
</body>

saucyminx · 02-19-2006, 01:08 AM

Saksquash got homework!

Jeysie · 02-19-2006, 07:29 AM

Sassy:

All right, I know this works, I tested it.

Put this inside your head element:

<style>
table {border: 4px outset black;}
th, td {border: 1px solid black;}
</style>

Is that the effect you were going for? If all you wanted was the outer border dark, remove the "th, td {border: 1px solid black;}" line.

Peace & Luv, Liz

SakSquash · 02-19-2006, 11:56 AM

Where am I supposed to put it?

Jeysie · 02-19-2006, 12:27 PM

Download and take a gander at this test document, Sassy, it'll show you where you'd need to stick it. You can rename the extension to .xhtml to test it out.

Attachment 737

Peace & Luv, Liz

SakSquash · 02-19-2006, 12:37 PM

Yup. That's what I wanted. But my teacher is going to kill me because I don't think he taught us to do it that way. But why the hell is it in the head?

Jeysie · 02-19-2006, 01:50 PM

Sassy: How did your teacher intend you to do it, out of curiousity?

I mean, honestly, if you're going to bother with XHTML instead of HTML you should be going "whole hog" and putting all the layout in an external style sheet (CSS). (In fact, you should be using CSS even if you are using HTML, but that's another discussion.)

The <style> element is a compromise... a way of embedding CSS in the file itself. The <style> element goes inside the <head> element because that's how (X)HTML structure works. (Don't ask me, ask the W3C folks who wrote the XHTML specs.)

The other alternative would be to use the "style" attribute in the tags themselves, but that's very unwieldy, since you'd have to put it in every single tag you need it for. The rules in the <style> element affect the entire document at once.

Last, and very much least, there is the old presentational attributes for the tags like "border". However, those are "depreciated"... which is W3C-speak for "technically you can use these, but you're really not supposed to". Furthermore they're not as flexible as CSS anyway, IMHO.

If your teacher actually intends you to you those presentational attributes, then IMHO he sucks. In any case, I'm so used to using CSS I don't remember most of those attributes anymore, so I personally wouldn't be able to help.

Peace & Luv, Liz

SakSquash · 02-19-2006, 01:58 PM

I have no clue what you're talking about, since he's just teaching us how to do it in notepad. It's only the third week of his class, so i'm still kind of new to all of this. What's CSS?

Jeysie · 02-19-2006, 02:19 PM

Mmm. Well, the fact that he's having you do layout (making a "dark" border) without having told you about CSS first makes me a little dubious of the fellow.

But anyway, CSS stands for Cascading Style Sheets. Essentially the idea is to separate structure and layout. In the XHTML file itself you have things like paragraphs, headings, tables, lists, etc. saying what the content *is*. Meanwhile, in the CSS file you have things like margins, colors, borders, fonts, etc. saying what the content should *look like*.

For instance...

Instead of having, say:

<body bgcolor="light blue">
<p align="center" color="black">Hello, world!</p>
</body>

You'd have a CSS file that said:

body {background:light blue;}
p {text-align:center;color:black;}

Note: This essentially says "Every <body> has a light blue background, and every <p> has centered text and black text."

and an XHTML file linked to the CSS file that said:

<body>
<p>Hello, world!</p>
</body>

Note: By "link" I mean linked to in the database sense of two files "merging", not in the hyperlink sense of one document pointing to another.

What's the real difference, you ask? Well, if you're just doing one file, not much. However, when you have lots of different XHTML files, all referencing the same CSS file, it gets a lot cooler. You could have a second XHTML file that went:

<body>
<p>Hello world, yet again!</p>
<p>Whee, isn't this fun?</p>
</body>

and this second XHTML file would "automagically" have the same layout as the first, just by linking to the same CSS file as the first.

Even more better is if you ever decide to change the layout. Let's say you decided you really wanted the background pink, after all.

You could go into every single XHTML file and change

<body bgcolor="light blue">

to

<body bgcolor="pink">

or you could simply change one CSS file rule from

body {background:light blue;}

to

body {background:pink;}

and have *every* XHTML file linked to that CSS file change background color automatically.

There are other perks as well... you have can have several alternate CSS files for the same XHTML file that you can switch between - like, one "screen" layout and one "print" layout, for instance.

By this point you're probably feeling a migraine coming on, so I recommend reading through:

http://www.htmldog.com/guides/cssbeginner/

It offers a lot of good beginner tips. In fact, I recommend reading through that whole site: it'll give you a good grounding.

Peace & Luv, Liz

P. S. CSS files are also text-based files, so you can edit all this stuff in Notepad. A CSS file has .css as an extension: like layout.css or something.

SakSquash · 02-19-2006, 06:17 PM

Ok, new problem. This is where i'm at.

See the second table? See the blank rectangle in the upper left hand colum? How do I get a rectangle in there? It has to look like this.

***tabacco*** · 02-19-2006, 06:30 PM

You can't have empty table cells. They just won't render. Stick an ' ' (without the quotes) in there. That's a non-breaking space, by the way. Also, I haven't really looked this up, but I don't think html allows spaces around the '=' on tag attributes, does it?

SakSquash · 02-19-2006, 06:33 PM

So how did he do it in that picture?

He shows us with the spaces around the =, so I assume it does?

Oh wait, I did what you said and it worked. Thanks dude!

***tabacco*** · 02-19-2006, 06:36 PM

I dunno. I get too annoyed by the host you're using and the delay to download

Why not just put it in your post? There's even a tag for that: [ html ]

HTML Code:

<table cellpadding="0" cellspacing="0" border="0" width="460">...</table>

SakSquash · 02-19-2006, 06:42 PM

It's pretty long. But here goes:

HTML Code:

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- Fig. 4.6: contact.html  -->
<!-- Adding email hyperlinks -->

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
	<style>
table {border:outset 4px black;}
th, td {border:solid 1px black;}
</style>
	<title>Table</title>
</head>

<body>
	<center><h2><font color = "red">State University of New York at New Paltz
	</font></h2></center>
<hr width = "75%"/>

	<center><font color = "blue" size = "3">Table 1. Average Grade by Year</font>
	</center>

	

	<table border = "6"  align = "center"
	summary = "average grade by year">
	<thead>
	<colgroup>
	<col align = "center" span = "5" />
	
		
        </colgroup>
	<th colspan = "5">Academic Summary of SUNY at New Paltz</th>
	</thead>
	
	<tbody>
	<tr>
	<td><i>Course</i></td>
	<td>2002</td>
	<td>2003</td>
	<td>2004</td>
	<td>2005</td>
	</tr>
	<tr>
	<td><b>English</b></td>
	<td>A-</td>
	<td>B</td>
	<td>B+</td>
	<td>B-</td>
	</tr>
	<tr>
	<td><b>Mathematics</b></td>
	<td>B+</td>
	<td>B</td>
	<td>A-</td>
	<td>B-</td>
	</tr>
	<tr>
	<td><b>History</b></td>
	<td>A-</td>
	<td>A-</td>
	<td>B+</td>
	<td>B+</td>
	</tr>
	<tr>
	<td><b>Physics</b></td>
	<td>A-</td>
	<td>B+</td>
	<td>B</td>
	<td>B</td>
	</tr>
	</tbody>
	</table>
	<br>

	<hr width = "75%">
 	<br>
	<center><font color = "blue" size = "3">Table 2. Average Grade by Semester</font>
	</center>
	
	
	<table border = "6"  align = "center"
	summary = "average grade by semester">
	
	<colgroup>
	<col align = "center" />
	</colgroup>
	<thead>
	<th colspan = "9">Academic Summary of SUNY at New Paltz</th>
	</thead>
	<tbody>
	<tr>
	<th rowspan = "2">&nbsp;</th>
	<td colspan ="2">2002</td>
	<td colspan = "2">2003</td>
	<td colspan = "2">2004</td>
	<td colspan = "2">2005</td>
	</tr>
	<tr>
	<td>Sprg</td>
	<td>Fall</td>
	<td>Sprg</td>
	<td>Fall</td>
	<td>Sprg</td>
	<td>Fall</td>
	<td>Sprg</td>
	<td>Fall</td>
	</tr>
	<td><b>English</b></td>
	<td>A-</td>
	<td>B</td>
	<td>B+</td>
	<td>B</td>
	<td>A-</td>
	<td>B</td>
	<td>B+</td>
	<td>B</td>
	</tr>
	<tr>
	<td><b>Mathematics</b></td>
	<td>A-</td>
	<td>B-</td>
	<td>B-</td>
	<td>B+</td>
	<td>B-</td>
	<td>A-</td>
	<td>B</td>
	<td>B+</td>
	</tr>
	<tr>
	<td><b>History</b></td>
	<td>B-</td>
	<td>B+</td>
	<td>A-</td>
	<td>C+</td>
	<td>B</td>
	<td>B+</td>
	<td>B-</td>
	<td>A-</td>
	</tr>
	<tr>
	<td><b>Physics</b></td>
	<td>C+</td>
	<td>B-</td>
	<td>B</td>
	<td>B+</td>
	<td>B+</td>
	<td>B-</td>
	<td>B-</td>
	<td>B+</td>
	</tr>
	</tbody>
	</table>
	<br>
	<hr width = "75%">
	

	

	
	
</body>
</html>

02-18-2006, 09:57 PM	#1
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	Homework Help How do you make the border of a table dark in XHTML? Share Share this post on Twitter

02-18-2006, 10:16 PM	#2
Jeysie Diva of Death Join Date: Aug 2005 Location: Western Massachusetts Posts: 1,402	You really should be doing that sort of thing with an external style sheet. However, you can take one of two routes if you decide to embed the style into the XHTML document itself. 1. Put this inside the HEAD element: <style type="text/css">table {border:solid black;}</style> Note: This will give all tables in the document the same border style. 2. Put this as your starting TABLE tag: <table style="border:solid black;"> Either of those should give you a solid black border, I believe... they will in HTML, at any rate. You might find this link useful: http://www.htmldog.com/reference/ Peace & Luv, Liz Share Share this post on Twitter __________________ Adventures in Roleplaying (Nov. 19): "Maybe it's still in the Elemental Plane of Candy." "Is the Elemental Plane of Candy anything like Willy Wonka's factory?" "If it is, would that mean Oompa Loompas are Candy Elementals?" "Actually, I'm thinking more like the Candyland board game. But, I like this idea better." "I like the idea of Oompa Loompa Elementals."

02-18-2006, 10:17 PM	#3
jjacob Senior Member Join Date: Mar 2004 Posts: 2,771	Under the table attribute set bordercolor to dark, you can even set bordercolordark and bordercolorlight to specify the colour of both 'sides' of the "3D" border (making both black would work). Then again I'm not quite sure, I'm drunk hickup Share Share this post on Twitter

02-18-2006, 10:25 PM	#4
Jeysie Diva of Death Join Date: Aug 2005 Location: Western Massachusetts Posts: 1,402	jjacob: AFAIK, "bordercolor" isn't a valid XHTML attribute. And IIRC "bordercolordark" and "bordercolorlight" are IE-only. Peace & Luv, Liz Share Share this post on Twitter __________________ Adventures in Roleplaying (Nov. 19): "Maybe it's still in the Elemental Plane of Candy." "Is the Elemental Plane of Candy anything like Willy Wonka's factory?" "If it is, would that mean Oompa Loompas are Candy Elementals?" "Actually, I'm thinking more like the Candyland board game. But, I like this idea better." "I like the idea of Oompa Loompa Elementals."

02-18-2006, 11:34 PM	#5
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	Didn't work. Share Share this post on Twitter

02-18-2006, 11:47 PM	#6
jjacob Senior Member Join Date: Mar 2004 Posts: 2,771	Whoops sorry just remembered that from my notepad-html days, plus I was sort of drunk. But why not just use something like Dreamweaver Sassie? Share Share this post on Twitter

02-19-2006, 12:53 AM	#7
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	Because that's not what they're teaching us. Can anyone help me with this? It's still not getting dark. Here's the HTML I'm using thus far: <table border = "4" align = "center" summary = "average grade by year"> <thead> <colgroup> <col align = "center" span = "5" /> </colgroup> <th colspan = "5">Academic Summary of SUNY at New Paltz</th> </thead> <tbody> <tr> <td><i>Course</i></td> <td>2002</td> <td>2003</td> <td>2004</td> <td>2005</td> </tr> <tr> <td><b>English</b></td> <td>A-</td> <td>B</td> <td>B+</td> <td>B-</td> </tr> <tr> <td><b>Mathematics</b></td> <td>B+</td> <td>B</td> <td>A-</td> <td>B-</td> </tr> <tr> <td><b>History</b></td> <td>A-</td> <td>A-</td> <td>B+</td> <td>B+</td> </tr> <tr> <td><b>Physics</b></td> <td>A-</td> <td>B+</td> <td>B</td> <td>B</td> </tr> </tbody> </table> second headings blue table heads yellow course dates </body> Share Share this post on Twitter

02-19-2006, 01:08 AM	#8
saucyminx Schoolgirl From Hell Join Date: Sep 2003 Location: Scotland Posts: 1,930	Saksquash got homework! Share Share this post on Twitter __________________ "My life is my longest journey I wish to fulfill with my dreams..." "Or is it I who has penetrated you?"

02-19-2006, 07:29 AM	#9
Jeysie Diva of Death Join Date: Aug 2005 Location: Western Massachusetts Posts: 1,402	Sassy: All right, I know this works, I tested it. Put this inside your head element: <style> table {border: 4px outset black;} th, td {border: 1px solid black;} </style> Is that the effect you were going for? If all you wanted was the outer border dark, remove the "th, td {border: 1px solid black;}" line. Peace & Luv, Liz Share Share this post on Twitter __________________ Adventures in Roleplaying (Nov. 19): "Maybe it's still in the Elemental Plane of Candy." "Is the Elemental Plane of Candy anything like Willy Wonka's factory?" "If it is, would that mean Oompa Loompas are Candy Elementals?" "Actually, I'm thinking more like the Candyland board game. But, I like this idea better." "I like the idea of Oompa Loompa Elementals."

02-19-2006, 11:56 AM	#10
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	Where am I supposed to put it? Share Share this post on Twitter

02-19-2006, 12:27 PM	#11
Jeysie Diva of Death Join Date: Aug 2005 Location: Western Massachusetts Posts: 1,402	Download and take a gander at this test document, Sassy, it'll show you where you'd need to stick it. You can rename the extension to .xhtml to test it out. Attachment 737 Peace & Luv, Liz Share Share this post on Twitter __________________ Adventures in Roleplaying (Nov. 19): "Maybe it's still in the Elemental Plane of Candy." "Is the Elemental Plane of Candy anything like Willy Wonka's factory?" "If it is, would that mean Oompa Loompas are Candy Elementals?" "Actually, I'm thinking more like the Candyland board game. But, I like this idea better." "I like the idea of Oompa Loompa Elementals." Last edited by Jeysie; 05-26-2007 at 06:05 PM.

02-19-2006, 12:37 PM	#12
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	Yup. That's what I wanted. But my teacher is going to kill me because I don't think he taught us to do it that way. But why the hell is it in the head? Share Share this post on Twitter

02-19-2006, 01:50 PM	#13
Jeysie Diva of Death Join Date: Aug 2005 Location: Western Massachusetts Posts: 1,402	Sassy: How did your teacher intend you to do it, out of curiousity? I mean, honestly, if you're going to bother with XHTML instead of HTML you should be going "whole hog" and putting all the layout in an external style sheet (CSS). (In fact, you should be using CSS even if you are using HTML, but that's another discussion.) The <style> element is a compromise... a way of embedding CSS in the file itself. The <style> element goes inside the <head> element because that's how (X)HTML structure works. (Don't ask me, ask the W3C folks who wrote the XHTML specs.) The other alternative would be to use the "style" attribute in the tags themselves, but that's very unwieldy, since you'd have to put it in every single tag you need it for. The rules in the <style> element affect the entire document at once. Last, and very much least, there is the old presentational attributes for the tags like "border". However, those are "depreciated"... which is W3C-speak for "technically you can use these, but you're really not supposed to". Furthermore they're not as flexible as CSS anyway, IMHO. If your teacher actually intends you to you those presentational attributes, then IMHO he sucks. In any case, I'm so used to using CSS I don't remember most of those attributes anymore, so I personally wouldn't be able to help. Peace & Luv, Liz Share Share this post on Twitter __________________ Adventures in Roleplaying (Nov. 19): "Maybe it's still in the Elemental Plane of Candy." "Is the Elemental Plane of Candy anything like Willy Wonka's factory?" "If it is, would that mean Oompa Loompas are Candy Elementals?" "Actually, I'm thinking more like the Candyland board game. But, I like this idea better." "I like the idea of Oompa Loompa Elementals."

02-19-2006, 01:58 PM	#14
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	I have no clue what you're talking about, since he's just teaching us how to do it in notepad. It's only the third week of his class, so i'm still kind of new to all of this. What's CSS? Share Share this post on Twitter

02-19-2006, 02:19 PM	#15
Jeysie Diva of Death Join Date: Aug 2005 Location: Western Massachusetts Posts: 1,402	Mmm. Well, the fact that he's having you do layout (making a "dark" border) without having told you about CSS first makes me a little dubious of the fellow. But anyway, CSS stands for Cascading Style Sheets. Essentially the idea is to separate structure and layout. In the XHTML file itself you have things like paragraphs, headings, tables, lists, etc. saying what the content is. Meanwhile, in the CSS file you have things like margins, colors, borders, fonts, etc. saying what the content should look like. For instance... Instead of having, say: <body bgcolor="light blue"> <p align="center" color="black">Hello, world!</p> </body> You'd have a CSS file that said: body {background:light blue;} p {text-align:center;color:black;} Note: This essentially says "Every <body> has a light blue background, and every <p> has centered text and black text." and an XHTML file linked to the CSS file that said: <body> <p>Hello, world!</p> </body> Note: By "link" I mean linked to in the database sense of two files "merging", not in the hyperlink sense of one document pointing to another. What's the real difference, you ask? Well, if you're just doing one file, not much. However, when you have lots of different XHTML files, all referencing the same CSS file, it gets a lot cooler. You could have a second XHTML file that went: <body> <p>Hello world, yet again!</p> <p>Whee, isn't this fun?</p> </body> and this second XHTML file would "automagically" have the same layout as the first, just by linking to the same CSS file as the first. Even more better is if you ever decide to change the layout. Let's say you decided you really wanted the background pink, after all. You could go into every single XHTML file and change <body bgcolor="light blue"> to <body bgcolor="pink"> or you could simply change one CSS file rule from body {background:light blue;} to body {background:pink;} and have every XHTML file linked to that CSS file change background color automatically. There are other perks as well... you have can have several alternate CSS files for the same XHTML file that you can switch between - like, one "screen" layout and one "print" layout, for instance. By this point you're probably feeling a migraine coming on, so I recommend reading through: http://www.htmldog.com/guides/cssbeginner/ It offers a lot of good beginner tips. In fact, I recommend reading through that whole site: it'll give you a good grounding. Peace & Luv, Liz P. S. CSS files are also text-based files, so you can edit all this stuff in Notepad. A CSS file has .css as an extension: like layout.css or something. Share Share this post on Twitter __________________ Adventures in Roleplaying (Nov. 19): "Maybe it's still in the Elemental Plane of Candy." "Is the Elemental Plane of Candy anything like Willy Wonka's factory?" "If it is, would that mean Oompa Loompas are Candy Elementals?" "Actually, I'm thinking more like the Candyland board game. But, I like this idea better." "I like the idea of Oompa Loompa Elementals."

User Name		Remember Me?
Password

02-19-2006, 06:17 PM	#16
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	Ok, new problem. This is where i'm at. See the second table? See the blank rectangle in the upper left hand colum? How do I get a rectangle in there? It has to look like this. Share Share this post on Twitter

02-19-2006, 06:30 PM	#17
*tabacco* Friendly Server Admin Join Date: Sep 2003 Location: Marin County, CA Posts: 4,087	You can't have empty table cells. They just won't render. Stick an ' ' (without the quotes) in there. That's a non-breaking space, by the way. Also, I haven't really looked this up, but I don't think html allows spaces around the '=' on tag attributes, does it? Share Share this post on Twitter

02-19-2006, 06:33 PM	#18
SakSquash Banned User Join Date: Nov 2004 Location: New Paltz...for now... Posts: 6,177	So how did he do it in that picture? He shows us with the spaces around the =, so I assume it does? Oh wait, I did what you said and it worked. Thanks dude! Share Share this post on Twitter

02-19-2006, 06:36 PM	#19
*tabacco* Friendly Server Admin Join Date: Sep 2003 Location: Marin County, CA Posts: 4,087	I dunno. I get too annoyed by the host you're using and the delay to download Why not just put it in your post? There's even a tag for that: [ html ] HTML Code: <table cellpadding="0" cellspacing="0" border="0" width="460">...</table> Share Share this post on Twitter