Cell/Table Borders

dragonfly11 · #1 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 greatful 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/ind...?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:

Code:

<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...

Code:

.redcell {
  border: 1px solid red;
}

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

Code:

<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:

Code:

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

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

In your HTML:

Code:

<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>