Forum Moderators: open
Of course, you can adjust the px size to suit...
You might find this just about right:
table.graph {
background: transparent;
color: #000;
font: 13px verdana, arial, sans-serif;
text-align:left;
border: 2px solid #000;
border-collapse: separate;
border-spacing: 0;
}
The last two border styles will "tighten-up" the table... Opera, Mozilla/Netscape and other compliant browsers will recognize this, IE has a little catching-up to do. ;)
Taking Papabaer's suggestions (border: 2px was too much)...
table.graph td {
background: transparent;
color: #000;
font: 13px verdana, arial, sans-serif;
text-align: left;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 0;
}
tr.cgraph th {
background: #669999;
color: #000;
font: 13px verdana, arial, sans-serif;
text-align: left;
font-weight: bold;
border: 1px solid #000;
border-collapse: separate;
border-spacing: 0;
}
Maybe it's just a right side border, or a background color - using inline styles saves the over head of adding a limited use style declaration to an external sheet (referenced by numerous other pages) and placing the style or style groupings directly at "point of application" within the element code.
The cascade ensures that the new style(s) will take precedence over any previously declared styles for the element. A general rule of thumb is that you should always try to place your styles where they can provide the widest level of application (external style sheets). But it is also VERY important to recall the phrase CASCADING STYLES.
For single pages with individual styles (page specific layouts and background images for example), you can leave your styles embedded in the head content or move them to an external file. But when an external sheet serves numerous pages, consider inline styles to provide an efficient and "elegant" solution.