Table madness

[one_mind]

Hi,

I am trying to learn how to make nice tables but am having a few problems.

For one, when i set table borders to 1, they are still quite thick. How do you get those paper thin borders like on these forum topics?

Also, how is this table made <snip>

Is each project a table within one big table?

Thanks for ay help

[edited by: encyclo at 12:34 pm (utc) on Oct. 16, 2005]
[edit reason] no example URLs please [/edit]

[one_mind]

Also,

How can i change the table borders colour with using css.

Cheers

[kaled]

There is no clean way that I know of to change table edge colors with CSS, however, you can set the {border-color} of <td> elements. However, you need two rules, one for top-left edges and one for bottom-right edges and thus two classes.

There is probably some magnificently clever way to do this with a single rule - try forum83.

Kaled.

[tbear]

Hi one_mind,

I control the table borders and border colour using the following css.
Try adding the following class to the table, or td, if you want them different:
.bordercontrol {border: 1px solid #32af91; border-collapse: collapse;}
I also leave the 'border="0"' in the table's html.

The site you mentioned (shouldn't really post urls to illustrate your question ;)), appears to be using a combination of divs and tables with ids.
Yes, each project is in it's own table, which have more tables within them for the various sections.

Although I am currently not doing it, many, who are deeper into css than I am, will possibly suggest you use css for the layout, thus reducing the code on the page and perhaps the page load speed, plus giving greater site wide control of layout.

Search around here for more css information and play about. It's amazing what you can learn to do simply with css. I am taking things one at a time, at my own pace. By the time I get css positioning sorted, I guess there will be true cross browser support....LOL ;)

[muneepenee]

1. eezee wae=html
<table cols=4 border=1 bgcolor="#ffccbb">
this make a border dezined tu hav a "bevel" look.
2. more komplex=more kontrol=css
<style type="text/css">
h5{text:black;background-color:#adfffd;width:600px;
text-align:center;vertical-align:middle;
font-size:14px;line-height:15px;font-weitht:900;
font-family:sans-serif,helvetica,arial;
border:solid 1px blue;
padding:0;margin-top:-7px;}
</style>

[SuzyUK]

The HTML table border attribute is actually equal to two element borders ~ one around the whole <table> and one around each table cell <td> the default is outset for the <table> border and the width is taken by this border. The default is 1px inset for the <td> border. The spacing between each is controlled by "cellspacing". There is no properly supported CSS substitute for cellspacing yet so it's best still to use it. And AFAIK there's no way to control the borders seperately unless you use CSS to override the border="x" attribute and setting.

HTML control table:

<table border="4" cellspacing="4">
<tr>
<td>test text</td><td>test text</td>
</tr>
</table>

equivalent using CSS for styling:

<table style="border: 4px outset" border="0" cellspacing="4">
<tr>
<td style="border: 1px inset">test text</td>
<td style="border: 1px inset">test text</td>
</tr>
</table>

to make all the borders nice and thin (still with 4px cellpadding):

<table style="border: 1px solid #00f;" cellspacing="4">
<tr>
<td style="border: 1px solid #f00">test text</td>
<td style="border: 1px solid #f00">test text</td>
</tr>
</table>

Then if you want a single border around all cells you would remove the cellpadding and add border-collapse: collapse; to the table style, this will make sure your table cells don't have double borders where they overlap.

<table style="border: 1px solid #00f; border-collapse: collapse;" cellspacing="0">
<tr>
<td style="border: 1px solid #f00">test text</td>
<td style="border: 1px solid #f00">test text</td>
</tr>
</table>

the blue border wouln't actually be needed in the last example, because the table cell border would do the job for you

hth,
Suzy

[rocknbil]

(DOH! Sorry Suzy beat me to it. :-) )

You can remove most of the markup from your tables using CSS. Of all the old attributes, cellpadding and cellspacing are still going to show themselves in some instances if you don't set them to 0. Everything else can be done with CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CSS Tables</title>

<style type="text/css">

body,html { font-family:Arial,Helvetica,sans-serif; }

/* as an ID, a specfic table once on a page
border="side" is a bit clunky but works for specific sides when they differ. */
#main_table {
border-top: 1px solid #000000;
border-right: 4px double #000000;
border-bottom: 4px double #000000;
border-left: 1px solid #000000;
padding: 12px;
margin: 24 12 36px 12; /* Top, right, bottom, left */
}

/* or a class, applies to any table class="whatever" */
table.whatever {
border: 2px solid #ff0000;
margin: 6px;
padding: 12px 6px 18px 12px; /* Top, right, bottom, left */
}
/* With those established, you can style the cells within the tables */

#main_table td { background-color: #fef0c5; }
table.whatever td {
font-size: 80%;
background-color: #cef4ff;
}
</style>
</head>

<body>

<table id="main_table" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<p>Main content. Identified by ID, it can only be used once on a given page.</p>
<br>
<br>
</td></tr>
</table>

<table class="whatever" cellpadding="0" cellspacing="0" border="0">
<tr><td>
<p>You can apply a class to multiple instances on a page.</p>
</td></tr>
</table>

</body>
</html>

[one_mind]

Thanks everyone,

I think I now know everything there is to know about tables :)

My tables are just how i wanted them.

Thanks again.