here are some tables to frame your content in a fun and colorful way :D

fixed width image tables

your text goes here

width 220px

<td>
  <table border="0"
       cellpadding="0"
       cellspacing="0"
       style="margin:auto;">

    <tr>
      <td>
        <img src="btop.png"
             width="220"
             height="84">
      </td>
    </tr>

    <tr>
      <td background="bside.png">

        <div style="width:220px; margin:auto; word-wrap:break-word; overflow-wrap:break-word; text-align:center; color:#999999;">
          your text goes here
        </div>

      </td>
    </tr>

    <tr>
      <td>
        <img src="bbottom.png"
             width="220"
             height="24">
      </td>
    </tr>

  </table>

</td>

download image pack

adjustable tables

rainbow gradient table

The features of this table are completely customizable.

<table border="0"
       cellpadding="8"
       cellspacing="0"
       style="
         margin:auto;
         width:250px;
         text-align:center;
	 border-radius:12px;
         overflow:hidden;
         box-shadow: 4px 4px 8px rgba(0,0,0,0.25);
background: linear-gradient(
  to bottom,
  #ff7ad3,
  #fa9747,
  #bff35d,
  #74faff
);
         border:3px solid #ffffff;
       ">

  <tr>
    <td>
     <span style="
  color:#feffea !important;
  text-shadow: 1px 1px 0 #534747;
">
      The features of this table are completely customizable. 
</span>

    </td>
  </tr>

</table>

The features of this table are completely customizable.

<table border="0"
       cellpadding="8"
       cellspacing="0"
       style="
         margin:auto;
         width:250px;
         text-align:center;
	 border-radius:12px;
         overflow:hidden;
         box-shadow: 4px 4px 8px rgba(0,0,0,0.25);
background: linear-gradient(
  to bottom,
  #ff7a7a,
  #fa9d47,
  #f3dc5d,
  #9edfff
);
         border:3px solid #ffffff;
       ">

  <tr>
    <td>
     <span style="
  color:#666666 !important;
  text-shadow: 1px 1px 0 #ffffff;
">
      The features of this table are completely customizable. 
</span>

    </td>
  </tr>

</table>

gradient title bar

title goes here

your text goes here

<table border="0"
       cellpadding="0"
       cellspacing="0"
        style="
         margin:auto;
         width:250px;
         box-shadow: 3px 3px 7px rgba(0,0,0,0.25);
       ">

<tr>
<td style="
  padding:6px;
  text-align:center;
  color:#ffffff !important;
  font-weight:bold;
background: linear-gradient(
  to right,
  #b8764a,
  #cea093
);
">
title goes here
</td>
</tr>

<tr>
<td style="
  padding:10px;
  text-align:center;
  color:#666;
  background:#ffffff;
">
<span style="
  color:#666666 !important;
">your text goes here</span>
</td>
</tr>
</table>

title goes here

your text goes here

<table border="0"
       cellpadding="0"
       cellspacing="0"
        style="
         margin:auto;
         width:250px;
         box-shadow: 2px 2px 5px rgba(251, 147, 255, 0.664);
       ">

<tr>
<td style="
  padding:6px;
  text-align:center;
  color:#ffffff  !important;;
  font-weight:bold;
background: linear-gradient(
  to right,
  #62b9ff,
  #62ffe5,
  #87d6f5,
  #ffbce1
);
">
title goes here
</td>
</tr>

<tr>
<td style="
  padding:10px;
  text-align:center;
  color:#666;
  background:#ffffff;
">
<span style="
  color:#666666 !important;
">your text goes here</span>
</td>
</tr>
</table>

go back