General discussion

Add a 1 pixel solid border to certain table

Hello.
I am using FrontPage for web design. I used to add 1 pixel, solid borders to certain table [not all tables on the page] or to parts of tables using FrontPage, but noticed that these borders are only visible in Internet Exlporer, while in other browser like Opera or Mozilla you wouldn?t see those borders. My question is how can I add cross-browser table borders so that it could be seen in all browsers or at least in many of them I guess it is done through css script, but I guess there could be easier way.
Any suggestion will be appreciated.
Thank you.

Discussion is locked
Follow
Reply to: Add a 1 pixel solid border to certain table
PLEASE NOTE: Do not post advertisements, offensive materials, profanity, or personal attacks. Please remember to be considerate of other members. If you are new to the CNET Forums, please read our CNET Forums FAQ. All submitted content is subject to our Terms of Use.
Reporting: Add a 1 pixel solid border to certain table
This post has been flagged and will be reviewed by our staff. Thank you for helping us maintain CNET's great community.
Sorry, there was a problem flagging this post. Please try again now or at a later time.
If you believe this post is offensive or violates the CNET Forums' Usage policies, you can report it below (this will not automatically remove the post). Once reported, our moderators will be notified and the post will be reviewed.
Comments
- Collapse -
Borders via CSS

The below example will display a black border, one pixel in thickness, in only one of the table's cell

<table border="0" cellspacing="1" cellpadding="4">
<tr>
<td style="border: 1px solid #000;"> </td>
<td> &</td>
</tr>
</table>

- Collapse -
If you want a border around the entire table but...

If you want a border around the entire table but within the cells:

<table border="0" cellspacing="1" cellpadding="4" style="border: 1px solid #000;">
<tr>
<td> </td>
<td> &</td>
</tr>
</table>

I find that CSS defined borders are much better looking than the standard HTML options.

- Collapse -
How to implement...

Hi johnhighway.
Your advice on using css seems to be very appropriate, I just don't really know how to implement those 2 css into a certain table or cell...
Could you help me...? Thanks a lot!

- Collapse -
HTML/CSS example of border

Here's a HTML/CSS example of a border around a table and around a particular cell within the table.

<table border="0" cellspacing="2" cellpadding="3" style="border: 1px solid #000000">
<tr><td>Cell 0,0</td><td>Cell 1,0</td><td>Cell 2,0</td></tr>
<tr><td>Cell 0,1</td><td style="border: 1px solid #ff0000;">Cell 1,1</td><td>Cell 2,1</td></tr>
<tr><td>Cell 0,2</td><td>Cell 1,2</td><td>Cell 2,2</td></tr>
</table>

The first CSS definition will show a solid black border around the table itself. The second CSS definition will display a red border around the center cell (Cell 1,1).

The CSS defintion "border" is a short that will help define the thickness of the border, the style of the border and the color of the border. Long-hand, you would have to use "border-width", "border-style", "border-color" in the following manner:

<... style="border-width: 1px; border-style: solid; border-color: #000000;" ...>


The above can be boiled down to the shorthand form of:

<... style="border: 1px solid #000000;" ...>

I would recommend http://www.w3schools.com/css/css_border.asp for additional information about using CSS styles to define your borders.

- Collapse -
I will try

Thanks a lot.
I will try it.

- Collapse -
Nice link, but just a small tip needed...

Thanks a lot johnhighway.
Link you gave is very useful, I found almost all possibilities creating bordered table using css.
Just one question:
Browsing all pages I found various ways to add bordered tables of different width and size but I couldn't find a way to also define cellspacing and cellpadding option. If I create table using css as shown on that website I find the content to close to table's borders. Is there a way to also specify cellspacing and cellpadding for those nice css scripts? I tried to add these cellspacing and cellpadding values my self but it didn?t really work... Can you help me?
Thank you.

- Collapse -
Cellspacing and Padding...

Using the same example as previously, I haven't found a means to actually change the cellspacing other than the initial setting in the table HTML definition. But you can override the padding of particular cell if needed with using the CSS definition "padding".

<table border="0" cellspacing="2" cellpadding="3" style="border: 1px solid #000000">
<tr><td>Cell 0,0</td><td>Cell 1,0</td><td>Cell 2,0</td></tr>
<tr><td>Cell 0,1</td><td style="border: 1px solid #ff0000;">Cell 1,1</td><td>Cell 2,1</td></tr>
<tr><td style="padding: 5px 10px 5px 15px;">Cell 0,2</td><td style="padding: 5px;">Cell 1,2</td><td>Cell 2,2</td></tr>
</table>

In the first example of the CSS style definition "padding" uses four arguments, each argument for the corresponding sides of "top", "right", "bottom", "left" in that order.

So, "padding: 5px 10px 5px 15px;" would mean that you would pad the top with 5 pixels, right 10 pixels, bottom 5 pixels and left 15 pixels. If you know that all sides will have the same padding, you can simply use one argument to define all sides.

- Collapse -
Border for Form Fields

I was wondering if it is possible to also add 1px border to Form Fields? I think should be.

- Collapse -
yes, you can...

yes, you can, however this will override the "trench" look of the form (e.g. input fields).

<input type="text" name="field1" size="40" style="border: 1px solid #000; background-color: #fff; color: #000;" />

The above example will give you a solid border, 1pixel in border width, with a background color of white and a text color of black.

Note, if you're familiar with Hexcolor codes, you know that the standard format is RRGGBB (6 hexadecimal values) but you can use the short hand of 3 values when each of the corresponding color space is identical. This means that if you have "#FFCC00" you can denote this as "#FC0" or if you have "#336633", you can denote this as "#363".

- Collapse -
Thanks a lot!

Thanks a lot johnhighway. Happy
It works perfectly nice. Happy
Cheers! Happy

- Collapse -
How about 1 px border to a table? :)

I would like to find out also how to add same 1 px border to a cell, so when I insert a new row to the table it would automatically have the needed 1 px border, the way tables are in Exel for example.

- Collapse -
Oops... i wante to say How about 1 px border to a cell? :)

Oops... i wante to say How about 1 px border to a cell?
Sorry...

CNET Forums