Controlling HTML Tables Using CSS--yes CSS can control cellpadding and cellspacing

I encountered some difficulty, trying to figure out how to instill certain characteristics into tables that I copied and pasted into my eml, HTML format email pages in Outlook Express, which in turn I sometimes convert into HTML pages. I got sick of having to go into the source code in the email I was working on, in order to add borders to tables that I copied and pasted into the eml, when the borders would not show up in the copied and pasted emails, due to reasons such as the borders being connected with CSS in the page that was copied and pasted from. I wanted to be able to control the way the copied and pasted tables would look in the eml and in any html page made from the eml, without burrowing into the source code and painstakingly changing each table. I had become aware of distortions and legibility problems that can be caused due to the way copy from an html page and paste into Outlook Express works menchanically speaking. I wanted to be able to control and transform the appearance of tables copied and pasted into the emails I was working on in Outlook Express. I was aware of how tables without lines separating the table cells, are harder to annotate with comments inside the table cells. I was aware of how cellpadding (space between text in table cell and borders of table cell) and cellspacing (space between table cells) can be important. I was aware of how weird colors for links and background of links in the process of copy and paste can render the colors illegible.

I came up with the following code (not copied from anywhere but influenced by others) that I can put into eml format templates; the presence of this code in the head section of the html transforms the tables I copy and paste into the eml, into tables formatted the way I want; the code forces horizontal and vertical table cell division lines into the tables (such lines often do not show up when I copy and paste the table even if they are present in the source I am copying from). The code uses CSS to control cellpadding and cellspacing even when IE6 and IE7 browsers, (the world's most commongly used browsers) are being used.

CODE:



<STYLE>

/* dec 5 2008 css set up for copy and paste tables problem elimination */



TABLE { BORDER-RIGHT:rgb(128,128,256) 9px solid; BORDER-TOP:rgb(000,000,000) 9px solid; BORDER-LEFT:rgb(128,128,256) 9px solid; BORDER-BOTTOM:rgb(000,000,000) 9px solid; BACKGROUND-COLOR: rgb(192,192,192); border-collapse:collapse;border-spacing:55px; color: rgb(128,000,000); font: normal normal 900 16px 1.2em Arial;
}



TD { border: solid black thin; padding:7px 7px 7px 7px; BORDER-RIGHT:rgb(000,000,128) 1px solid;; BORDER-LEFT: rgb(256,000,256) 0px solid; BORDER-top: rgb(128,000,000) 3px solid;;BORDER-bottom: rgb(128,000,000) 3px solid;}



a:link {color: rgb(000,000,255); font: normal normal 900 14px arial; background-color: rgb(192,192,192)}
a:visited {color: rgb(127,000,127); font: normal normal 900 14px arial; background-color: rgb(192,192,192);}
a:active {color: #00FF00; background-color: rgb(192,192,192)}
a:hover {background-color:rgb(255,000,000);font: italic normal 900 15px arial;color: rgb(255,255,255)}
a {text-decoration: underline;}



</STYLE>


In HTML, Cellpadding effects the amount of space between text in a table cell and the borders of the table cell. Cellspacing effects the amount of space between table cells.

I found that there is alot of confusion out there re whether cellpadding and cellspacing, which are easily manipulated in html, can also be manipulated using CSS. Many of the coders discussing the problem out there in internet land, have wrongly concluded that such is impossible using CSS, at least when the IE6 and IE7 browsers are in use.

I found that controlling the cell-padding using CSS is simple, the trick is that the padding command is put into the CSS declaration for the TD or table cell, not the CSS declaration for TABLE.

I found that cellspacing can be controlled by manipulating the border sizes of the table cells in the CSS declarations for the TDs. By now I have developed an instinct that if Microsoft does not support some new thing in the latest version of CSS, this is probably because Microsoft common-sensically realizes that the task that the new thing accomplishes can be accomplished some other way.

Thus I am able to manipulate cellpadding and cellspacing in tables copied and pasted into the email, simply through the CSS declarations at the top of the email source code, without burrowing into the source code of the email every time a table is copied and pasted into the email.

The code allows me to specify both the background color of a link and also the text color of a link; this provides insurance against problems such as the color of a link being legible against the background in the page copied from but not in the page pasted to.

A problem remains that email services such as Yahoo still do not properly interpret the CSS inside of HTML emails. People with Yahoo type email accounts, need to be sent an emaill that has CSS in it, in the form of an html page sent as an attachment to the email. But hey it's easy to convert an eml into an html just save the eml as html.

The appearance of tables may not be of earth-shaking importance, however one important thing this issue of table manipulation with CSS brings to light, is this: the reference materials re subjects such as CSS tell what attributes in an HTML page or HTML format email can be manipulated and how such manipulations are accomplished; but they do not clearly show which elements in a page can have a given attribute manipulated, and this leads to confusion. For example, they will say that cell-padding can be manipulated using CSS and they tell you how to do this, but they leave you in the dark re whether cellpadding of TABLES can be manipulated (they cannot), and re whether cellpadding of cells in tables (TDs) can be manipulated (they can). The reference works should list which elements of a page can be manipulated and controlled in a given way but do not. This leads to the point that such annoying ambiguity is probably also a problem in areas of science more important that mere art of HTML table presentation.

Relevant links:

http://www.google.com/search?q=table+properties+css&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_enUS300US301&aq=t
http://www.pageresource.com/dhtml/cssprops.htm#table_properties

http://www.google.com/search?sourceid=navclient&ie=UTF-8&rlz=1T4GGLJ_enUS300US300&q=cellspacing+html+css+tables
(verbose breathless geegosh panicky assertions that there is nothing in IE6 or IE7 CSS to replace cell padding and cellspacing.)