Tables
Editing table properties in the HTML editor.
 
 
 
 

Using a background image

  • Only a table cell will support the use of a background image.
  • By default an image will repeat itself horizontally and vertically - i.e. tile.
    • The gradient background image below is 1 pixel wide.
    • BACKGROUND-REPEAT code in the table style is not needed.

Hello

<TABLE style="BACKGROUND-COLOR: green" border=0 cellSpacing=0 cellPadding=5
background=https://sites.google.com/site/tinkertab/images/header-center-highlight.png>
<TBODY>
<TR>
<TD style="WIDTH: 180px; HEIGHT: 100px">
<H3><FONT color=#ffffff>Hello</FONT></H3>
</TD>
</TR>
</TBODY>
</TABLE>
 
 

Background-repeat comes in 4 flavors

  • no-repeat
  • repeat-x
  • repeat-y
  • repeat  (tiles vertically and horizontally.  The default setting) 
  • BACKGROUND-POSITION code does not seem to be supported.
    • That would have been: center, left, right, top, bottom, etc.

Hello

<TABLE style="BACKGROUND-COLOR: green; BACKGROUND-REPEAT: repeat-x" border=0 cellSpacing=0 cellPadding=15
background=https://sites.google.com/site/tinkertab/images/header-center-highlight.png>
<TBODY>
<TR>
<TD style="WIDTH: 180px; HEIGHT: 100px">
<H3><FONT color=#ffffff>Hello</FONT></H3>
</TD>
</TR>
</TBODY>
</TABLE>
 
 

Adding a border

  • A single border code can be used.
    • BORDER: green 4px solid
  • Or specify different options for each side
    • BORDER-right: green 10px solid

Hello

<TABLE style="BORDER-BOTTOM: green 7px solid; BORDER-LEFT: #a9d0f5 3px solid; BACKGROUND-COLOR: green; BORDER-TOP: #a9d0f5 3px solid; BORDER-RIGHT: green 10px solid" border=0 cellSpacing=0 cellPadding=10 background=https://sites.google.com/site/tinkertab/images/header-center-highlight.png>
<TBODY>
<TR>
<TD style="WIDTH: 180px; HEIGHT: 1px">
<H3><A name=TOC-Hello></A><FONT color=#ffffff>Hello</FONT></H3>
</TD>
</TR>
</TBODY>
</TABLE>
 
 

Play with padding

  • Customize padding within the table cell style instead of using cellPadding.

Hello

<TABLE style="BORDER-BOTTOM: green 7px solid; BORDER-LEFT: #5fb404 3px solid; BACKGROUND-COLOR: green; BACKGROUND-REPEAT: repeat-x; BORDER-TOP: #5fb404 3px solid; BORDER-RIGHT: green 10px solid" border=0 cellSpacing=0 background=https://sites.google.com/site/tinkertab/images/header-center-highlight.png>
<TBODY>
<TR>
<TD style="PADDING-BOTTOM: 30px; PADDING-LEFT: 10px; WIDTH: 180px; PADDING-RIGHT: 50px; HEIGHT: 1px; PADDING-TOP: 15px">
<H3><A name=TOC-Hello></A><FONT color=#ffffff>Hello</FONT></H3>
</TD>
</TR>
</TBODY>
</TABLE>