Here's a way to gain a bit more control over your tables. Use a <style> block embedded in the <head> of your document. (Of course, this could be embedded in a linked STYLE SHEET as well.)
I created a default look for all the <td>'s in any of my tableS on this page. However, I also created a "class file" that augments this look whenever I call up the feature. You'll see this feature shown in the table CODE below as: class="light", class="dark" or class="image".
This is the table style BLOCK that's embedded in the HEAD of this document:
<style type="text/css">
<!--
td {background-color: lightblue;
font-family:"comic sans MS", cursive;
font-size:1em;
color: blueviolet;}
.light {background-color: wheat;
font:bold;
font-family:"comic sans MS", cursive;
color: navy;
padding: 5px;}
.dark {background-color: darkkhaki;
font:bolder;
font-family:"comic sans MS", cursive;
color: black;
padding: 5px;}
.image {background-image: URL(images/graypaper.jpg);
font:bolder;
font-family:"comic sans MS", cursive;
color: black;
padding: 5px;}
-->
</style>
| R1C1 10% | R1C2 15% | R1C3 25% | R1C4 20% | R1C5 30% |
This is the new CSS-2 “table-layout” property. Normally, a browser has to look at all the contents of an HTML table before it can begin to render it. That's why pages with table layouts sometimes seem slooooow.
With “table-layout”, you can define a fixed width and height, and the browser will display the table contents more quickly.
This is the code that produced the table shown above.
<table style="table-layout: fixed; width:80%; cellspacing:7px;">
<tr height="100%">
<td width="10%"class="light"> R1C1 10% </td>
<td width="15%"class="light"> R1C2 15% </td>
<td width="25%"> R1C3 25% </td>
<td width="20%"class="dark"> R1C4 20% </td>
<td width="30%"class="image"> R1C5 30% </td>
</tr>
</table>
It's easy to use this property through inline CSS, as shown above. The browser knows the total table width right off the bat and won't take the time to double-check it as the table is displayed. Make sure to put widths into the <td>'s of the first row. You can also add heights if you desire. The result is faster rendering.
What happens if content in the table or in a particular cell ends up bigger than the fixed size given to its area? It'll be clipped to fit the table. Notice in the example below, the height was changed from 100 to <tr height="45"> and now the contents have been clipped.
| R1C1 10% | R1C2 15% | R1C3 25% | R1C4 20% | R1C5 30% |
Also, if you use a value of auto for the <tr height="auto"> means that a normal-browser table rendering will be used.
| R1C1 10% | R1C2 15% | R1C3 25% | R1C4 20% | R1C5 30% |
Return to Profal2 Miscellaneous