PDA

View Full Version : How do I adjust the width and color of the border of cells?


Dream_Wamba
09-11-2012, 06:45 AM
Hello Forum,
Any chance anyone out there can help me with this? All I need to do is adjust the border of the cells in my page. I don't want a border for the table - only the cells. I need to adjust the number of pixels of the border and I need to adjust the border color by hex value - 330000.
So far, my code looks like this:
<table width="776" align="center" cellpadding="6" cellspacing="0">
<tbody><tr><td valign="top" width="760" bordercolor="#330000" borderwidth="1px"><div align="left">

..... but the border does not display in the browser. :-?

Thanks in advance.

gentleone
09-11-2012, 07:29 AM
The bordercolor attribute has never been an official HTML attribute. It was a Microsoft proprietary attribute introduced back in the days of IE4. If you want a border on a table cell, you should use CSS anyway.

<td class"meaningful-class-name">table cell content</td>
CSS:
You should replace 'meaningful-class-name' with a class name that says something about the content you have and you should also declare the width through CSS

.meaningful-class-name {
width: 760px;
border: 1px solid #300: */is the same as #330000*/
}

You use a lot of HTML attributes that are deprecated.
align="center"
valign="top"
align="left"
Positioning of content you should all do through CSS too.

Dream_Wamba
09-11-2012, 08:13 AM
Thank you! That works like a charm so far. The only snag is that the following text appears above the cell:

.meaningful-class-name { width: 760px; border: 1px solid #300: */is the same as #330000*/ }

I think a little bit of code juggling should resolve it.

...... never mind - duh! I had it pasted there.

Thanks again Gentleone! This one's solved.

Dream_Wamba
09-11-2012, 05:41 PM
A small snag - the cell border will display in my local machine but it does not display once on the web. What would I need to add to make it display. I'm assuming to first upload the css file but how is it referenced in the code?

gentleone
09-11-2012, 06:06 PM
A small snag - the cell border will display in my local machine but it does not display once on the web. What would I need to add to make it display. I'm assuming to first upload the css file but how is it referenced in the code?
Yes, you should upload it otherwise it can't find the styles. I don't know how you have referenced it... you know best ;) Do you have something like this in your HTML?
This is an example that links to a stylesheet 'styles.css' in a folder 'css' in the root directory.
<link rel="stylesheet" href="css/styles.css" type="text/css" />

Dream_Wamba
09-11-2012, 06:45 PM
Yes. The first line begins with <link rel="stylesheet" href=".border" type="text/css">
I uploaded the .border file to public_html and to the root folder but is does not display. Should I make a new folder named css.styles?

gentleone
09-11-2012, 06:56 PM
It's always recommended to keep things tidy and clean on your web server. stylesheets goes into a folder 'css', images in a folder 'images', javascript files in a folder 'js', etc.

You see the link, but you need to rename the stylesheet. .border is not a stylesheet. It's the class name only. Did you save the styles I gave you in external stylesheet anyway? You would save it as for instance styles.css and then link to that stylesheet.

Dream_Wamba
09-12-2012, 07:53 PM
My page previews in the browser correctly, but it's still no go in the browser when live on the server.

I made a new style, 'border', and uploaded it to its own folder 'css'.

My code begins:
<link rel="stylesheet" href="WEBS/css/border.css" type="text/css">
<table width="768" align="center" bordercolor="#333333" cellpadding="6" cellspacing="2">
<tbody>

When I select the cell, the code for it reads:
<td valign="top" width="748" align="right" class="border">

What can I be doing wrong?

gentleone
09-12-2012, 08:44 PM
do you have for me a link to the page online?

Dream_Wamba
09-13-2012, 02:04 AM
Thanks again Gentleone. I've got it to work in the browser, this time experimenting with text color, with the following:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import "file://Webs/css/textcolor.css";
.textcolor1 { font-family: "Times New Roman", Times, serif; font-size: 36px; font-style: normal; font-weight: normal; color: #0066CC}
-->
</style>
</head>

In the Edit Style Sheet window I now have the following two lines:

textcolor.css (import)
.textcolor1

I think I see that the style, in this case .textcolor1, resides in the style sheet, textcolor1.css. I'm not sure if I've gone about this the right way or if there's yet a preferred other method.


..... One line of text is working but another line does not. The first line of text has textcolor1 attributed to it. The second line has textcolor2 attributed to it. In the CSS Styles window, textcolor1 has the 'S' symbol before it while textcolor2 has the 'S' symbol with a chain link symbol. After I edit textcolor2, a window appears which reads "The specified path does not exist." I am making sure to re-upload the css file to the server before checking the page in the browser.

Corrosive
09-14-2012, 08:32 AM
Put all your styles in one stylesheet (don't have a style per stylesheet) and link to that in the head of your page. Styles in the head tags will only work on one page. Try this as a reference; http://www.htmldog.com/guides/cssbeginner/applyingcss/

Dream_Wamba
09-20-2012, 07:53 PM
Thanks! That helps a lot! (CSS can be very tricky for the beginner.)

Corrosive
09-21-2012, 05:44 PM
Thanks! That helps a lot! (CSS can be very tricky for the beginner.)

Yeah, takes a little while to get your head round but well worth it when you are carving solid, reliable and lightweight web pages out of nothing. Very satisfying :)