Cell/Table Borders

dragonfly11 · #1 Apr 22, 2006, 03: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, 05: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, 02: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, 09: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, 12: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>



At Ask Me Help Desk you can ask questions in any topic and have them answered for free by our experts. To ask questions or participate in answering them you must register for a free account. By registering you will be able to: Get free answers from experts in any of our 300+ topics. Accept money for answers that you provide. Communicate privately with other members (PM). See fewer ads. Sign Up!