PDA

View Full Version : Cell/Table Borders

dragonfly11
Apr 22, 2006, 04:35 PM
Hi Everyone,

I'm currently trying to build a website for my new business. I know a very good base about html and Dreamweaver which is the platform I'm using to build my site.

I'm having a huge dilemma, my business partner wants to see the website a certain way, but I can't seem to get the cell and borders done properly. He was that you can make a border around a cell with a specific color. I tried to do it, but it seems the whole table gets the formatting and all cells within that table. I can't seem to only get that one cell or group of cells to be one format without the whole table have a border around it. He wants something similar to what you can find on gmail.com - the two blue boxes on the right.

I tried with CSS Style sheets - seems to work when in Dreamweaver, but once I try to preview in my browser, it won't pull up anything. I figured my browser doesn't see CSS, but I went on other websites that have CSS and I can view it.

Hope this makes sense - if anyone could help I would be for ever grateful as this is starting to frustrate me!

Cheers,
D
RickJ
Apr 22, 2006, 06:09 PM
Check this thread on another board where I asked basically the same question: in it are 3 things to play with:
http://www.lunarforums.com/forum/index.php?topic=28437.0
LTheobald
Apr 23, 2006, 03:27 PM
The best way to do it as mentioned in that page was to use a style in the cell tag. You could do it using:


<td style="border: 1px solid red">...</td>

But if you have lots of cells which you want to have the same style, a better thing to do would be to set up a class in your HTML/CSS file...



.redcell {
border: 1px solid red;
}

That would either go into a CSS file you have linked via the <link> tab, or between <style> tags in the <head> section of your HTML page. Then whenever you wanted a cell with a red border, you would simply use:


<td class="redcell">...</td>

Let me know if you want me to explain better (it's late though and I'm getting a few quick answers in :) )
dragonfly11
May 22, 2006, 10:02 AM
I tried to do this from what you mentioned in your answer. I tried the link ref and the style tags. For some reason it's still not showing up on any web browsers. I'm starting to get a bit frustrated as I know it's prob just a tag I may missing and I just can't see it. I assigned the class Tableborder to my table. It's a very simple border green that I wanted.

If you may have a bit of time, would you be able to write the Html that would show in order to have my CSS appear on the webpage?

Here is what I have (a portion where I think I may be missing something):

<link href="/public_html/CSS%20Styles/table_border.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="760" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF" class="tableborder">
LTheobald
May 24, 2006, 01:14 AM
First, a correction to my previous answer as I made a classic mistake:

Never name your CSS classes something like "redbar" or "leftmenu". Keep them ambigious. For all you know a month down the line someone will say "that red bar's good but can it be blue?". So then you would have a CSS class called "redbar" but the area it styles is actually styles into a blue colour. Anyway - onto the question in hand...

In your CSS:


/** The table itself **/
.tableborder {
border: 1px solid red;
}

/** A cell in the table **/
.tableborder td {
border: 1px solid blue;
}


In your HTML:

<table width="760" align="center" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF" class="tableborder">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>