Follow these instructions to build tables in html.
Tags and syntax defined:
- Give a solid boarder: <table boarder=”1″>
- Table row: <tr>
- Heading, each “h” provides a different sized heading with 1 being the largest, and 6 being the smallest: <h1> – <h6>
- Break: <br>
- Bold: <b>
- Table data: <td>
- Link: <a href=”link”> (if want to open in same window), and <a href=”link” target=”_blank”> (if want to open in new window)
- Image: <img src=”image path” width=”size” height=”size” alt=”image#” />
Now let’s have a look at some source code that I’ve written on the back end and see what it results to on the front end. Study the source code carefully to see how I’ve organized it. For this example, I want a table that consists of a boarder, two rows of four cells, and a clickable image in each cell. The code for each row specifies an image path, a direct link where the image will redirect when clicked, and the width and height dimensions that I’ve selected for each cell. I can make these cells any size I want but for this example, I’m keeping all cells the same size. Here’s the code, and result:
Source Code:
<table border=”1″>
<tr>
<h3><br><a href=”https://www.patrickgreenough.com/category/technology” ><b>Table</b></a></h3>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image1″ /> </td>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image2″ /> </td>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image3″ /> </td>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image4″ /> </td>
</tr>
<tr>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image5″ /> </td>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image6″ /> </td>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image7″ /> </td>
<td><a href=”https://www.patrickgreenough.com/category/technology” target=”_blank”><img src=”image path” width=”200″ height=”75″ alt=”Image8″ /> </td>
</tr>
</table>
Result:
Notice that the title, “Table” is clickable. Also notice that each table cell has a clickable image. I used “image path” as generic code filler so that you can see what the table looks like with the image syntax displayed. Had I used actual image paths, this table would display those images in the cells. When you include actual image paths, and direct links in your code, your images will be dynamically displayed in their designated cells.
