Friday, March 12, 2010

A Way to Display a Table in a Blog


.	Bunches of Numbers	Col A	Col B	Row Total
.	Row A	1	2	3
.	Row B	3	4	7
.	Column Totals	4	6	10

Create the table in Goggle Docs.
Get rid of all the columns and rows not used.
Select File, then Export to HTML.
Ctrl+U to view page source. (Make sure the source doesn't have any physical line breaks in it.)
Copy and paste from there to the blog work area.
Some of what's brought over can't be used (at least in Blogger). In Firefox, I can use Ctrl+P to attempt to publish, and then delete whatever it doesn't like until it finally says I can view my blog.
I haven't yet figured out how to get rid of the first column (shows as a dot), and the first row. For now, I manually type a '?' in the Compose mode so it is easy to find and then switch to 'Edit Html.'
When you find the first question mark, delete everything beginning with '<tr>' and ending with '</tr>'.
To get rid of them on the rows, delete starting with '<td class="hd">' and ending with '</td>

(I currently have a problem where sometimes the current table tries to pick up the colors of the previous table. I have had no luck reaching Google regarding this. I have submitted it to the boards. If anyone has a solution, please let me know. In the meantime, I try to stay with the same general scheme of colors, etc.

New issue: if this is displayed by itself, it looses its coloring. )

Thursday, March 11, 2010

Fixed Fonts for Blogs

Update: It should have been obvious, but it wasn't. You shouldn't use a font that is not commonly installed on everyone's machine (for example, Consolas). I've gone to fixedsys, which I think comes with Windows.

I got a little bored looking at the same fixed-width font, and started testing for a new look. The first example is what you'll see if you use the <pre> tag. In the standard font, the zero and capital 'O' are virtually undistiguishable, as is the one and lower-case 'l'.

1         2         3         4         5         6         7         8         9         0         1
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
Select 0Oo, 1ilI ,
, name
from Emp;

You can modify the pre tag to include a font, and in some cases a size: <pre STYLE="font-size: 11pt; font-family:'Consolas'">

Courier:

Only one size. Characters look different side-by-side, but I like a slashed zero.

1         2         3         4         5         6         7         8         9         0         1    
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
Select 0Oo, 1ilI ,
, name
from Emp;

Courier New 10pt:

You can select a size. Again, I'd like a slashed zero.

1         2         3         4         5         6         7         8         9         0         1    
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
Select 0Oo, 1ilI ,
, name
from Emp;

Fixedsys:

A little dark but the zero and capital "O" look different. Also, one and lower-case "L" look different. (Only one size)

1         2         3         4         5         6         7         8         9         0         1    
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
Select 0Oo, 1ilI ,
, name
from Emp;

Consolas 11pt:

This has a bit of a fuzzy look to me. Also, the one and lower-case 'l' look too similar.

1         2         3         4         5         6         7         8         9         0         1    
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
Select 0Oo, 1ilI ,
, name
from Emp;

Bitstream Vera Sans Mono 10pt:

You can select a size. The zero has a dot inside, but it's hard to see unless you go with a larger size, or you bold it.

1         2         3         4         5         6         7         8         9         0         1    
12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890
Select 0Oo, 1ilI ,
, name
from Emp;

Bitstream Vera Sans Mono 10pt - Bold:

1 2 3 4 5 6 7 8 9 0 1 12345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 Select 0Oo, 1ilI , , name from Emp;

Basic HTML

Notes:

Some items are shown with leading spaces. This is for readability, and has no effect on HTML.

Notes about using HTML in Blogger:

This is not quite as straight forward as I've stated. Sometimes I need to use a ' ' and sometimes I've pressed 'Enter' to get the right amount of space between items.

Before you use the 'Compose' mode, you might want to save a copy of your work. I spent quite a bit of time putting this post back together when I forgot, and clicked on Compose.

Make sure you haven't used the Enter key when creating a table. Everything needs to be on one line, or your table will be pushed down the page.

Sometimes other colors and line styles seem to pop up from other posts. I haven't been able to pin it down as to the pattern. If you know, please let me know. (For example, at least right now, my example of Header 1 looks the way it does because the basic template header 1 was styled like that. That's not the normal header 1 you would see displayed if you just viewed it under Firefox.)

Don't count on 'Preview' to look the same as your published post. Especially with HTML, it just doesn't.

<A HREF="http://my-oracle-10g-tips.blogspot.com/2008/11/basic-html.html">Click Here</A>

Click Here

<a href="#label">Any content</a>
<a name="label">Any content</a>

Any content
Any content

bold Italic Underline

bold Italic Underline

Line Break

Line
Break

<Center>Center</Center>

Center

<H1>Header1</H1>
<H2>Header2</H2>

Header1

Header2

<DL>
<DT> Word
<DD>Meaning
</DL>

Word: Meaning

<MENU>
 <LI type="disc">disc
 <LI type="circle">circle
 <LI type="square">square
</MENU>

disc

circle

square

<OL>
<LI>Apples
<LI>Oranges
</OL>

Apples
Oranges

<OL start="5">
<LI>Number 5
<LI>Number 6
</OL>

Number 5
Number 6

<UL type="disc">
 <LI>Fruit
 <UL type="circle">
 <LI>Strawberries
 <LI>Pineapple
 </UL>
 <LI>Vegetables
 <UL type="circle">
 <LI>Swiss Chard
 <LI>Broccoli </UL>
</UL>

Fruit
- Strawberries
- Pineapple
Vegetables
- Swiss Chard
- Broccoli

Hdr 1	Hdr 2
1a	2b

Black
Yellow 
Red 
Green 
Blue 
Lime 
Orange 
Purple 
Pink 
Brown

Black Yellow Red Green Blue
Lime Orange Purple Pink Brown

I like to display some text in
 Red .
Others look good in
 Blue 
, and still others in
 Green

I like to display some text in Red. Others look good in Blue , and still others in Green.

Using Colors in HTML

This chart shows the names of colors that can be used in HTML. In this example, I'm using the actual name to select a color. Realize that the background color will make a difference in how the font color looks. (Note the difference between the 'DarkRed' on black in the chart, and the 'DarkRed' on white in the example).

Set Markup Html On Entmap Off Spool On Preformat Off  
Set Term Off
Spool ColorTest.Html

Select 
    '<Font Color="LightSeaGreen">'|| EmpNo    ||'</Font>' As Empno
  , '<Font Color="DarkRed">'      || EName    ||'</Font>' As EName
  , '<Font Color="Magenta">'      || Hiredate ||'</Font>' As Hiredate
From Emp
Where Deptno = 20;

Spool Off
Set Markup Html Off Entmap Off Spool Off Preformat Off 
Set Term On

It will generate the HTML report shown below.

HTML for Blogs