The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help for HTML Beginner, Style sheet + HTML Table
JingleRock
post Aug 20 2009, 01:12 PM
Post #1





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



I know next to nothing about HTML.
I am attempting to author HTML code for pasting into the body of an email which will be sent via EXCEL VBA. (Actually, I did successfully complete this general task once before. -- This task differs in that I am extracting certain records from a simple database in EXCEL and then I want to email the extracted records to specified addresses.)

Attached is a Notepad file that I have begged, borrowed, stolen, and Googled from various sources. I am sure there are several errors. Could you point out some of them?

I am using a Style Sheet. The basic elements are: a Heading (current date provided by EXCEL VBA); 6 columns, each with a column caption; a Table, containing data extracted from the database; and a Paragraph, containing a closing footnote. The attached file contains data for one extracted record; in practice, the number of records will vary between zero and about twenty.

The difficulties I am having are:

- cannot change the font size for .ColCaptions (when attached file is saved as .HTML and then opened in IE);
- underlining the .ColCaptions is working, but it appears somewhat faintly, especially when the output is printed
is there a way to make the underlining bolder on the printout?
- I would like more control over column widths (right now, I would like: the first two columns to have less width;
the third column to have more width; the fourth and fifth columns to have slightly less width; and the sixth
column is just about right.)

I would appreciate your assistance.





Attached File(s)
Attached File  TEST_HTML.txt ( 1.56k ) Number of downloads: 234
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 21 2009, 03:37 AM
Post #2


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



The file doesn't have a complete HTML markup code, only a STYLE, H3, P and table. And STYLE belongs in the HEAD of an HTML document.

You specified the class Captions (not ColCaptions) to the TR.
To change the font-size of .Captions, you need to point to the TD's within that TR, either by applying the class to all those TD's or by adding the TD selector to the CSS, like this:
.Captions td { ... }

Apparently, the thickness of the underline is determined by the font size.
The W3C says this about it:
QUOTE
In determining the position of and thickness of text decoration lines, user agents may consider the font sizes of and dominant baselines of descendants, but must use the same baseline and thickness on each line.

http://www.w3.org/TR/CSS21/text.html#lining-striking-props

If you don't specify a width for each TD (which already don't add up to the 100% table width), then the cells will accomodate to their respective content. Or fiddle with the percentages.

If you want to send the HTML by email, I suggest you read:
The Principles of Beautiful HTML Email
How to Code HTML Email Newsletters
and even maybe http://www.email-standards.org/.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 21 2009, 06:59 AM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, HEAD is implied, so technically the style block is in HEAD. TITLE isn't optional though and it's missing. A doctype also helps. I don't think you should omit optional tags though, especially not when you do it unintentionally.

See here: http://htmlhelp.com/reference/html40/structure.html#doc .

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 21 2009, 04:04 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



??

What a way to write HTML!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 21 2009, 05:19 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Are you talking to me? ninja.gif laugh.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Aug 22 2009, 02:16 AM
Post #6


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



tongue.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JingleRock
post Aug 22 2009, 11:48 AM
Post #7





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



QUOTE(Frederiek @ Aug 22 2009, 01:16 AM) *

tongue.gif


Thanks very much, to both of you, for your comments and for your links.
I have made some changes (see attached) including a few comment lines; my output is looking better.

A few remaining queries:

- In my CSS, why do I not have any tags around "TR" and "TD"?
- In my CSS, for .Notes, why is it necessary to include "color:blue;"?
- In my BODY, I am still not sure that I handled 'ColCaptions' correctly.

Thanks again.


Attached File(s)
Attached File  TEST_HTML___revised.txt ( 1.84k ) Number of downloads: 194
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 22 2009, 05:06 PM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE
- In my CSS, why do I not have any tags around "TR" and "TD"?

Like <td>? Because that's markup, HTML. The CSS selector just uses the element name.

CODE
  - In my CSS, for .Notes, why is it necessary to include "color:blue;"?

You wouldn't have to if you had declared 'color: blue' for BODY. You have it for TD and the H4 isn't in a TD.

Read through this: http://htmlhelp.com/reference/css/structure.html . It's quite helpful.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JingleRock
post Aug 23 2009, 01:37 PM
Post #9





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



QUOTE(pandy @ Aug 22 2009, 04:06 PM) *

QUOTE
- In my CSS, why do I not have any tags around "TR" and "TD"?

Like <td>? Because that's markup, HTML. The CSS selector just uses the element name.

CODE
  - In my CSS, for .Notes, why is it necessary to include "color:blue;"?

You wouldn't have to if you had declared 'color: blue' for BODY. You have it for TD and the H4 isn't in a TD.

Read through this: http://htmlhelp.com/reference/css/structure.html . It's quite helpful.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JingleRock
post Aug 23 2009, 01:42 PM
Post #10





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



pandy,

Sorry about the screw-up. This is what I meant to send:

Thanks very much for your comments and link (the first part of it was very helpful).
I added declarations for the BODY to my css, but the font size is not responding.
Help (again).

CODE

<HTML>
     <HEAD>
           <TITLE>Resulting Code to be used as email BODY (in EXCEL VBA)></TITLE>

<!-- Font sizes are temporary -->
<style type='text/css'>  table.Rtg_Info {table-layout:fixed}
BODY {vertical-align:top}
BODY {font-family:Verdana; font-size:7pt; font-weight:normal; color:blue; text-align:left;
        padding-right:18px}
.ColCaptions td {font-size:10pt; text-decoration:underline}
.OldRatings {color:red;}
.Notes {font-size:15pt; font-weight:bold;}
tr.space {line-height:0.5px} td.sixcols {colspan:6}
</style>

     </HEAD>
     <BODY>

<!-- Today's date is provided by EXCEL VBA code -->
<h4 class='Notes'>&nbsp;8/22/2009</h4>

<!-- Cell borders may be temporary -->
<table class='Rtg_Info' border='1' width='100%'>

<tr class='ColCaptions'>
<td width='15%'><b>BB Ticker</b></td>
<td width='22%'><b>BB Name</b></td>
<td width='25%'><b>Approved List Name</b></td>
<td width='15%'><b>New Rating Info</b></td>
<td width='15%'><b>Old Rating Info</b></td>
<td width='8%'><b>Agency</b></td>
</tr>

<tr class='space'>
<td class='sixcols'>&nbsp;</td>
</tr>

<tr>
<td>BBT US Equity</td>
<td>BB&T Corp</td>
<td>Branch Banking & Trust Co. (BB&T)</td>
<td>A-1/--/A/--/sta</td>
<td>&nbsp;</td>
<td>S&P</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>P-1/--/--/--/neg</td>
<td>&nbsp;</td>
<td>Moody's</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>F1/--/A+/--/neg</td>
<td>&nbsp;</td>
<td>Fitch</td>
</tr>

<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>R-1M/--/AAL/--/neg</td>
<td><font class='OldRatings'>R-1M/--/AAL/--/sta</td>
<td>DBRS</td>
</tr>

<tr>
<td><br></td>
</tr>

</table>

<p class='Notes'>
<br><br>&nbsp;
Rating Info Format: &nbsp;S-T&nbsp;/&nbsp;S-T Watch&nbsp;/&nbsp;
L-T&nbsp;/&nbsp;L-T Watch&nbsp;/&nbsp;Outlook
</p>

     </BODY>
</HTML>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 23 2009, 03:41 PM
Post #11


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The font sizes you have declared with more specific selectors override the one for body.

Like this.
CODE
body          { color: black; background: white }
.stand-out    { color: red; background: white }


HTML
<p>
Blah blah...</p>
<p>
Blah blah...</p>
<p class="stand-out">
Blah blah...</p>
<p>
Blah blah...</p>


All paragraphs but the third will have black text. They inherit the color from BODY. The third paragraph will have red text because there is a special rule for the stand-out class and that's more specific than an inherited property.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
arleigh
post Aug 24 2009, 06:02 AM
Post #12





Group: Members
Posts: 1
Joined: 24-August 09
Member No.: 9,543



ahm...how do i make my profile in friendster beautiful?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 24 2009, 08:55 AM
Post #13


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Beauty lies in the eye of the beholder.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JingleRock
post Sep 3 2009, 11:04 AM
Post #14





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



I have made some changes to my code pasted below. Everything is working as I wish, when I review the result on my monitor. However, when I print the result to my HP color printer, I am getting bold, 10-pt, Tahoma, for my 'ColCaptions' class, but I am getting black-on-white font, instead of white-on-blue font. I would appreciate your help.

CODE


<HTML>
     <HEAD>
           <TITLE>Resulting Code to be used as email BODY (in EXCEL VBA)></TITLE>

<!-- Font sizes are temporary -->
<style type='text/css'>  table.Daily {table-layout:fixed}
TR {
vertical-align:top}

TD {
font-family:Tahoma;
font-size:9pt;
font-weight:normal;
color:blue;
text-align:left;
padding-right:18px}

.ColCaptions {
font-size:10pt;
font-weight:bold;
color:white;
background-color:blue}

.OldRatings {
color:red}

.Notes {
font-size:13pt;
font-weight:bold;
color:blue}

tr.space1 {
line-height:0px}

</style>

     </HEAD>
     <BODY>

<!-- Today's date is provided by EXCEL VBA code -->
<h4 class='Notes'> 9/03/2009</h4>

<!-- Cell borders may be temporary -->
<table class='Daily' border='1' width='100%'>

<tr>
<td class='ColCaptions'; width='16%'>Bloomberg Ticker</td>
<td class='ColCaptions'; width='22%'>Bloomberg Full Name</td>
<td class='ColCaptions'; width='26%'>Approved List Name</td>
<td class='ColCaptions'; width='15%'>New Rating Info</td>
<td class='ColCaptions'; width='15%'>Old Rating Info</td>
<td class='ColCaptions'; width='6%'>Agency</td>
</tr>

<tr class='space1'>
<td colspan='6'> 
</td>
</tr>

<tr>
<td>BBT US Equity</td>
<td>BB&T Corp</td>
<td>Branch Banking & Trust Co. (BB&T)</td>
<td>A-1/--/A/--/sta</td>
<td> </td>
<td>S&P</td>
</tr>

<tr>
<td colspan='3'> </td>
<td>P-1/--/--/--/neg</td>
<td> </td>
<td>Moody's</td>
</tr>

<tr>
<td colspan='3'> </td>
<td>F1/--/A+/--/neg</td>
<td> </td>
<td>Fitch</td>
</tr>

<tr>
<td colspan='3'> </td>
<td>R-1M/--/AAL/--/neg</td>
<td><font class='OldRatings'>R-1M/--/AAL/--/sta</td>
<td>DBRS</td>
</tr>

</table>

<p class='Notes'>
<br><br> 
Rating Info Format:  S-T / S-T Watch / 
L-T / L-T Watch / Outlook
</p>

     </BODY>
</HTML>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Sep 3 2009, 01:27 PM
Post #15


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



In your browser's print configuration, have you told it to print background images/colors? The default is usually not to print background images/colors.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JingleRock
post Sep 3 2009, 03:15 PM
Post #16





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



QUOTE(Darin McGrew @ Sep 3 2009, 11:27 AM) *

In your browser's print configuration, have you told it to print background images/colors? The default is usually not to print background images/colors.


Darin,
Thanks very much for your comment.
We have an 'HP Color LaserJet 4700n'. Any hints as to which settings need to be modified?
Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 3 2009, 03:46 PM
Post #17


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



The BROWSER'S print setup.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 3 2009, 03:48 PM
Post #18


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



In case you use IE, the background option isn't in Page Setup where it would be logical to put it. It's somewhere in Internet Options. At least that's how it used to be. It may have changed after v. 6.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JingleRock
post Sep 3 2009, 04:03 PM
Post #19





Group: Members
Posts: 7
Joined: 19-August 09
Member No.: 9,483



QUOTE(pandy @ Sep 3 2009, 01:48 PM) *

In case you use IE, the background option isn't in Page Setup where it would be logical to put it. It's somewhere in Internet Options. At least that's how it used to be. It may have changed after v. 6.


Thanks very much, pandy.
We use v. 6; it is under: Internet Options... -- Advanced -- Printing.
Works as advertised.
Thanks again.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 04:51 AM