Versions Compared

Old Version 1

changes.mady.by.user Mickey [RG]

Saved on

compared with

New Version 2

changes.mady.by.user Mickey [RG]

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This article explains how to create a table and add images to the table. We will also cover how to add text and links in the table like in the example below.

Image Removed

Code Block
languagexml
<table align="center" border="0" cellpadding="0" cellspacing="0" id="topbuttons" style="width: 100%;">
<tbody>
<tr>
<td align="center" style="text-align: center; vertical-align: top; width: 25%;" valign="bottom" width="25%"><a href="/animals/browse?special=kitten"><img alt="" height="138" src="https://s3.amazonaws.com/imagesroot.rescuegroups.org/webpages/s970noa4oavda2q.png" style="border-width: 0px; border-style: solid;" width="175"></a></td>
<td align="center" style="text-align: center; vertical-align: top; width: 25%;" valign="bottom" width="25%"><a href="/animals/browse?species=Cat&amp;special=adult"><img alt="" height="138" src="https://s3.amazonaws.com/imagesroot.rescuegroups.org/webpages/s970nt6topmybvn.png" style="border-width: 0px; border-style: solid;" width="175"></a></td>
<td align="center" style="text-align: center; vertical-align: top; width: 25%;" valign="bottom" width="25%"><a href="/animals/browse?special=needs"><img alt="" height="138" src="https://s3.amazonaws.com/imagesroot.rescuegroups.org/webpages/s970n4ubo57qwo5.png" style="border-width: 0px; border-style: solid;" width="175"></a></td>
<td align="center" style="text-align: center; vertical-align: top; width: 25%;" valign="bottom" width="25%"><a href="/animals/browse?Courtesy=Yes"><img alt="" height="138" src="https://s3.amazonaws.com/imagesroot.rescuegroups.org/webpages/s970nty9yxmk919.png" style="border-width: 0px; border-style: solid;" width="175"></a></td>
</tr>
<tr>
<td align="center" style="text-align: center; vertical-align: top; width: 25%; padding:0px;" valign="top">
<h2><a href="/animals/browse?special=kitten">Kittens</a></h2>
</td>
<td align="center" height="10%" style="text-align: center; vertical-align: top; width: 25%;" valign="top">
<h2><a href="/animals/browse?species=Cat&amp;special=adult">Cats</a></h2>
</td>
<td style="text-align: center; vertical-align: top; width: 25%;">
<h2><a href="/animals/browse?special=needs">Special Needs</a></h2>
</td>
<td style="text-align: center; vertical-align: top; width: 25%;">
<h2><a href="/animals/browse?Courtesy=Yes">Courtesy Listings</a></h2>
</td>
</tr>
</tbody>
</table>

To get an idea of how tables work, you may want to first read about HTML Tables: 

...


Step-by-step guide
If this is a table that will hold images, it is a good idea to upload the images first, then add them to the table.
...