Help for HTML Beginner, Style sheet + HTML Table |
Help for HTML Beginner, Style sheet + HTML Table |
JingleRock |
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) TEST_HTML.txt ( 1.56k ) Number of downloads: 234 |
Frederiek |
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/. |
pandy |
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 . |
Frederiek |
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!! |
pandy |
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?
|
Frederiek |
Aug 22 2009, 02:16 AM
Post
#6
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
|
JingleRock |
Aug 22 2009, 11:48 AM
Post
#7
|
Group: Members Posts: 7 Joined: 19-August 09 Member No.: 9,483 |
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) TEST_HTML___revised.txt ( 1.84k ) Number of downloads: 194 |
pandy |
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. |
JingleRock |
Aug 23 2009, 01:37 PM
Post
#9
|
Group: Members Posts: 7 Joined: 19-August 09 Member No.: 9,483 |
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. |
JingleRock |
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'> 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'> </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> </td> <td> </td> <td> </td> <td>P-1/--/--/--/neg</td> <td> </td> <td>Moody's</td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td>F1/--/A+/--/neg</td> <td> </td> <td>Fitch</td> </tr> <tr> <td> </td> <td> </td> <td> </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> Rating Info Format: S-T / S-T Watch / L-T / L-T Watch / Outlook </p> </BODY> </HTML> |
pandy |
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. |
arleigh |
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?
|
pandy |
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.
|
JingleRock |
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> |
Darin McGrew |
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.
|
JingleRock |
Sep 3 2009, 03:15 PM
Post
#16
|
Group: Members Posts: 7 Joined: 19-August 09 Member No.: 9,483 |
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. |
pandy |
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.
|
pandy |
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.
|
JingleRock |
Sep 3 2009, 04:03 PM
Post
#19
|
Group: Members Posts: 7 Joined: 19-August 09 Member No.: 9,483 |
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. |
Lo-Fi Version | Time is now: 29th March 2024 - 04:51 AM |