Web Publishing
Change Table Font Size

Thanks to Dynamic Web Coding for their Change Text Size OnClick JavaScript code. I retained their “A license is required …” pop-up message to affirm that you, like I, should pursue licensing their code.

Note how well this facility works with the CSS Automatic Table Layout feature.

Increase, Decrease, or Restore font sizes: 

Zogby

  Polls Bias Errors   Bad
State EV Act Est Raw Fat Raw Fat   Pick
Colorado 9 5.2 2.0 -3.2 -28.8 3.2 28.8
Florida 27 5.0 0.0 -5.0 -135.0 5.0 135.0
Iowa 7 0.9 5.0 -5.9 -41.3 5.9 41.3   X
Maine 4 8.8 11.0 -2.2 -8.8 2.2 8.8
Michigan 17 3.4 6.0 -2.6 -44.2 2.6 44.2
Minnesota 10 3.5 6.0 -2.5 25.0 2.5 25.0
Nevada 5 2.6 5.0 2.4 12.0 2.4 12.0
New Mexico 5 0.8 3.0 -3.8 -19.0 3.8 19.0   X
Ohio 20 2.1 6.0 3.9 78.0 3.9 78.0
Pennsylvania 21 2.3 4.0 -1.7 -35.7 1.7 35.7
Wisconsin 10 0.4 6.0 -5.6 -56.0 5.6 56.0
Georgia 15 16.7 10.0 -6.7 -100.5 6.7 100.5
 
Totals   -32.9 -404.3 45.5 584.3   2
 
Average   -2.7% -2.7% 3.8% 3.9%   17%

Following is the XHTML markup for this document with all JavaScript-related references highlighted, both the JavaScript itself plus the supporting XHTML.

Note that the JavaScript code displayed below immediately before the </body> tag is not included in this document; ie, if you use your browser's View Source command, the JavaScript code will not appear. One standard I use is that all JavaScript code resides in external files, & never in the XHTML document itself. I've inserted the JavaScript code for convenience.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>lfdf: Web Publishing - Change Table Font Size</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<link rel="stylesheet" type="text/css" href="css/Misc.css" />
<link rel="stylesheet" type="text/css" href="css/Tables.css" />
<link rel="stylesheet" type="text/css" href="css/Web.css" />

<script type="text/javascript" src="js/dw_cookies.js"></script>
<script type="text/javascript" src="js/dw_sizerdx.js"></script>

</head>

<body class="Body">

<script type="text/javascript" src="js/backlink.js"></script>

<div class="Text">

<br />

<p class="Title">Web Publishing<br />
Change Table Font Size</p>

<p class="Normal">Thanks to <a href="http://www.dyn-web.com/">Dynamic Web
Coding</a> for their <a href="http://www.dyn-web.com/dhtml/sizefont/index.php">
Change Text Size OnClick</a> JavaScript code. I retained their &ldquo;A
license is required &hellip;&rdquo; pop-up message to affirm that you,
like I, should pursue licensing their code.</p>

<p class="Normal">Note how well this facility works with the CSS
<a href="http://www.w3.org/TR/CSS21/tables.html#width-layout">Automatic
Table Layout</a> feature.</p>

</div>

<div id="sizer" class="Sizer">

Increase, Decrease, or Restore font sizes:&nbsp;

<a href="" onclick="dw_fontSizerDX.adjust(1); return false"
title="Increase font-size">
<img alt="" src="gen/plus.gif" width="20" height="20" /></a>

<a href="" onclick="dw_fontSizerDX.adjust(-1); return false"
title="Decrease font-size">
<img alt="" src="gen/minus.gif" width="20" height="20" /></a>

<a href="" onclick="dw_fontSizerDX.reset(); return false"
title="Restore default font-sizes">
<img alt="" src="gen/reset.gif" width="20" height="20" /></a>

</div><div class="Tables">

<p class="TableTitle">Zogby</p>

  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="az_bnnnn" colspan="2">&nbsp;</td>
      <td class="ac_bssnn_h" colspan="2">Polls</td>
      <td class="ac_bssnn_h" colspan="2">Bias</td>
      <td class="ac_bssns_h" colspan="2">Errors</td>
      <td class="az_bnnnn">&nbsp;</td>
      <td class="ac_bssns_h">Bad</td>
    </tr>
    <tr>
      <td class="al_bsssn_h">State</td>
      <td class="ar_bsnsn_h">EV</td>
      <td class="ar_bnssn_h">Act</td>
      <td class="ar_bnnsn_h">Est</td>
      <td class="ar_bnssn_h">Raw</td>
      <td class="ar_bnnsn_h">Fat</td>
      <td class="ar_bnssn_h">Raw</td>
      <td class="ar_bnnss_h">Fat</td>
      <td class="az_bnnnn">&nbsp;</td>
      <td class="ac_bnsss_h">Pick</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cred">Colorado</td>
      <td class="ar_bnnnn">9</td>
      <td class="ar_bnsnn_cred">5.2</td>
      <td class="ar_bnnnn_cred">2.0</td>
      <td class="ar_bnsnn_cblue">-3.2</td>
      <td class="ar_bnnnn_cblue">-28.8</td>
      <td class="ar_bnsnn">3.2</td>
      <td class="ar_bnnns">28.8</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cred">Florida</td>
      <td class="ar_bnnnn">27</td>
      <td class="ar_bnsnn_cred">5.0</td>
      <td class="ar_bnnnn_cred">0.0</td>
      <td class="ar_bnsnn_cblue">-5.0</td>
      <td class="ar_bnnnn_cblue">-135.0</td>
      <td class="ar_bnsnn">5.0</td>
      <td class="ar_bnnns">135.0</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cred">Iowa</td>
      <td class="ar_bnnnn">7</td>
      <td class="ar_bnsnn_cred">0.9</td>
      <td class="ar_bnnnn_cblue">5.0</td>
      <td class="ar_bnsnn_cblue">-5.9</td>
      <td class="ar_bnnnn_cblue">-41.3</td>
      <td class="ar_bnsnn">5.9</td>
      <td class="ar_bnnns">41.3</td>
      <td class="az_bnnnn">&nbsp;</td>
      <td class="ar_bnnnn_gz">X</td>
    </tr>
    <tr>
      <td class="al_bnsdn_cblue">Maine</td>
      <td class="ar_bnndn">4</td>
      <td class="ar_bnsdn_cblue">8.8</td>
      <td class="ar_bnndn_cblue">11.0</td>
      <td class="ar_bnsdn_cblue">-2.2</td>
      <td class="ar_bnndn_cblue">-8.8</td>
      <td class="ar_bnsdn">2.2</td>
      <td class="ar_bnnds">8.8</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cblue">Michigan</td>
      <td class="ar_bnnnn">17</td>
      <td class="ar_bnsnn_cblue">3.4</td>
      <td class="ar_bnnnn_cblue">6.0</td>
      <td class="ar_bnsnn_cblue">-2.6</td>
      <td class="ar_bnnnn_cblue">-44.2</td>
      <td class="ar_bnsnn">2.6</td>
      <td class="ar_bnnns">44.2</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cblue">Minnesota</td>
      <td class="ar_bnnnn">10</td>
      <td class="ar_bnsnn_cblue">3.5</td>
      <td class="ar_bnnnn_cblue">6.0</td>
      <td class="ar_bnsnn_cblue">-2.5</td>
      <td class="ar_bnnnn_cblue">25.0</td>
      <td class="ar_bnsnn">2.5</td>
      <td class="ar_bnnns">25.0</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cred">Nevada</td>
      <td class="ar_bnnnn">5</td>
      <td class="ar_bnsnn_cred">2.6</td>
      <td class="ar_bnnnn_cred">5.0</td>
      <td class="ar_bnsnn_cred">2.4</td>
      <td class="ar_bnnnn_cred">12.0</td>
      <td class="ar_bnsnn">2.4</td>
      <td class="ar_bnnns">12.0</td>
    </tr>
    <tr>
      <td class="al_bnsdn_cred">New Mexico</td>
      <td class="ar_bnndn">5</td>
      <td class="ar_bnsdn_cred">0.8</td>
      <td class="ar_bnndn_cblue">3.0</td>
      <td class="ar_bnsdn_cblue">-3.8</td>
      <td class="ar_bnndn_cblue">-19.0</td>
      <td class="ar_bnsdn">3.8</td>
      <td class="ar_bnnds">19.0</td>
      <td class="az_bnnnn">&nbsp;</td>
      <td class="ar_bnnnn_gz">X</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cred">Ohio</td>
      <td class="ar_bnnnn">20</td>
      <td class="ar_bnsnn_cred">2.1</td>
      <td class="ar_bnnnn_cred">6.0</td>
      <td class="ar_bnsnn_cred">3.9</td>
      <td class="ar_bnnnn_cred">78.0</td>
      <td class="ar_bnsnn">3.9</td>
      <td class="ar_bnnns">78.0</td>
    </tr>
    <tr>
      <td class="al_bnsnn_cblue">Pennsylvania</td>
      <td class="ar_bnnnn">21</td>
      <td class="ar_bnsnn_cblue">2.3</td>
      <td class="ar_bnnnn_cblue">4.0</td>
      <td class="ar_bnsnn_cblue">-1.7</td>
      <td class="ar_bnnnn_cblue">-35.7</td>
      <td class="ar_bnsnn">1.7</td>
      <td class="ar_bnnns">35.7</td>
    </tr>
    <tr>
      <td class="al_bnsin_cblue">Wisconsin</td>
      <td class="ar_bnnin">10</td>
      <td class="ar_bnsin_cblue">0.4</td>
      <td class="ar_bnnin_cblue">6.0</td>
      <td class="ar_bnsin_cblue">-5.6</td>
      <td class="ar_bnnin_cblue">-56.0</td>
      <td class="ar_bnsin">5.6</td>
      <td class="ar_bnnis">56.0</td>
    </tr>
    <tr>
      <td class="al_bnssn_cred">Georgia</td>
      <td class="ar_bnnsn">15</td>
      <td class="ar_bnssn_cred">16.7</td>
      <td class="ar_bnnsn_cred">10.0</td>
      <td class="ar_bnssn_cblue">-6.7</td>
      <td class="ar_bnnsn_cblue">-100.5</td>
      <td class="ar_bnssn">6.7</td>
      <td class="ar_bnnss">100.5</td>
    </tr>
    <tr>
      <td class="az_bnnnn_ggray240" colspan="8">&nbsp;</td>
    </tr>
    <tr>
      <td class="al_bssss_h" colspan="2">Totals</td>
      <td class="az_bnnnn_ggray240" colspan="2">&nbsp;</td>
      <td class="ar_bsssn_cblue">-32.9</td>
      <td class="ar_bsnsn_cblue">-404.3</td>
      <td class="ar_bsssn">45.5</td>
      <td class="ar_bsnss">584.3</td>
      <td class="az_bnnnn">&nbsp;</td>
      <td class="ar_bssss">2</td>
    </tr>
    <tr>
      <td class="az_bnnnn_ggray240" colspan="8">&nbsp;</td>
    </tr>
    <tr>
      <td class="al_bssss_h" colspan="2">Average</td>
      <td class="az_bnnnn_ggray240" colspan="2">&nbsp;</td>
      <td class="ar_bsssn_cblue">-2.7%</td>
      <td class="ar_bsnsn_cblue">-2.7%</td>
      <td class="ar_bsssn">3.8%</td>
      <td class="ar_bsnss">3.9%</td>
      <td class="az_bnnnn">&nbsp;</td>
      <td class="ar_bssss">17%</td>
    </tr>
  </table>

</div>

...

<div class="Navigation">

Top&nbsp;&nbsp;&nbsp;<a href="#"><img alt="" src="gen/Top.png"
width="12" height="16" /></a>

&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;

<script type="text/javascript" src="js/backlink_do.js"></script>

</div><div class="Footer">

<hr />

<p class="Normal">© Copyright 2006 by
<a href="mailto:gmikos@livefreediefree.com">
George Mikos</a>. Plagiarizing is OK, but attributing is even better.</p>

<p class="Normal">1.0 Publication Date: None<br />
2.0 Publication Date: 01 Dec 05</p>

<p class="Normal">Revised Date: 17 Mar 06</p>

<p class="Normal">
<a href="http://validator.w3.org/check?
uri=http://www.livefreediefree.com/
WebPub_ChangeTableFontSize.htm">
<img src="gen/W3C_XHTML.png" alt="Valid XHTML 1.0!"
height="31" width="88" /></a>
<a href="http://jigsaw.w3.org/css-validator/validator?
uri=http://www.livefreediefree.com/
WebPub_ChangeTableFontSize.htm">
<img width="88" height="31" src="gen/W3C_CSS.png"
alt="Valid CSS!" /></a></p>

</div>

<script type="text/javascript" src="js/menu_do.js"></script>
<script type="text/javascript" src="js/menu_wp_2u_ctfs_var.js"></script>
<script type="text/javascript" src="js/menu_com.js"></script>

<script type="text/javascript">

/*************************************************************************
    This code is from Dynamic Web Coding at dyn-web.com
    Copyright 2004-5 by Sharon Paine
    See Terms of Use at www.dyn-web.com/bus/terms.html
    regarding conditions under which you may use this code.
    This notice must be retained in the code as is!
*************************************************************************/

// setDefaults arguments: size unit, default size, minimum, maximum
// optional array of elements or selectors to apply these defaults to
// dw_fontSizerDX.setDefaults( "px", 14, 9, 32, ["body", "td", "div", "p"] );

// set arguments: default size, minimum, maximum
// array of elements or selectors to apply these settings to
// dw_fontSizerDX.set(12, 10, 18, ["div.demo", "div.demo p", "div.demo div"] );
// dw_fontSizerDX.set(14, 14, 14, ["div#menu"] );
// dw_fontSizerDX.init();

dw_fontSizerDX.setDefaults( "px", 12, 8, 32 );

dw_fontSizerDX.set(12, 8, 32, ["td"] );

dw_fontSizerDX.init();

</script>

</body>

</html>

Top       Back   

© Copyright 2006 by George Mikos. Plagiarizing is OK, but attributing is even better.

1.0 Publication Date: None
2.0 Publication Date: 01 Dec 05

Revised Date: 17 Mar 06

Valid XHTML 1.0! Valid CSS!