Creating Rules with Tables

Author:Jay Grantham
Author's Site:WebsiteIC

The Examples

In the examples found here, you will see a horizontal rule, crosshairs and a horizontal with vertical rule. These examples show the code used to create the effect. Compare the code created from the tutorial above to the code showed in the following examples to figure out how to live within the rules.

Example A: Basic expanding vertical line

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam no nummy nibh.

<table cellspacing="3" cellpadding="0" width="400" 
			bgcolor="#ffffff">
   <tr valign="top">
      <td bgcolor="#000066">
         <img height="5" src="" width="1"></td>
      <td width="100%">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
			sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
			erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
			ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
          </p>
        <p>Duis autem vel eum iriure dolor in hendrerit 
			in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
			nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
			blandit praesent luptatum zzril delenit augue duis dolore te feugait 
			nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing 
			elit, sed diam no nummy nibh.</p>
       </td>
   </tr>
</table>

Example B: Double expanding horizontal lines

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

<table cellspacing="3" cellpadding="0" width="50%">
   <tr valign="top">
      <td bgcolor="#000066">
         <img height="1" src="" width="5"></td>
   </tr>
   <tr valign="top">
      <td width="100%">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
			sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 
			erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
			ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
          </p>
         <p>Duis autem vel eum iriure dolor in hendrerit 
			in vulputate velit esse molestie consequat, vel illum dolore eu feugiat 
			nulla facilisis at vero eros et accumsan et iusto odio dignissim qui 
			blandit praesent luptatum zzril delenit augue duis dolore te feugait 
			nulla facilisi.</p>
      </td>
   </tr>
   <tr valign="top">
      <td bgcolor="#000066">
         <img height="1" src="" width="5"></td>
   </tr>
</table>

Example C: "El Rule"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<table cellspacing="0" cellpadding="5" width="100%" bgcolor="#ffffff" border="0">
   <tr>
      <td>
         <table cellspacing="0" cellpadding="0" 
            width="100%" bgcolor="#ffffff" border="0">
            <tr>
               <td bgcolor="#ff33cc">
                  <img height="5" src="" width="1"></td>
               <td valign="top">
                  <table cellspacing="0" cellpadding="5" border="0">
                     <tr>
                        <td>Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit, sed diam nonummy nibh euismod
                        tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
                     </tr>
                  </table>
                </td>
              </tr>
              <tr>
                 <td bgcolor="#ff33cc" colspan="2">
                    <img height="1" src="" width="5"></td>
              </tr>
           </table>
       </td>
    </tr>
</table>

Example D: The Cross

Lorem ipsum dolor sit amet		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.	Lorem ipsum dolor sit amet

<table cellpadding="0" width="50%" border="0" cellspaceing="0">
   <tr>
      <td valign="center" align="middle">Lorem ipsum dolor sit amet</td>
      <td bgcolor="#000066" rowspan="3"><img height="1" src="" width="1"></td>
      <td valign="center" align="middle">Lorem 
			ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
			nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
   </tr>
   <tr>
      <td bgcolor="#000066" colspan="3" height="1"><img height="1" src="" width="1"></td>
   </tr>
   <tr>
      <td valign="center" align="middle">Lorem 
			ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy 
			nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</td>
      <td valign="center" align="middle">Lorem 
			ipsum dolor sit amet</td>
   </tr>
</table>