Monday, January 23, 2012

Three Column Code Explained 2

Next bit of code is this valign="top" is to vertically align the contents of the table data cell to the top, which by default is in the middle therefore the = could be either "top"
"middle" or "bottom" depending on where you want the content to sit. 
<p> is the tag for paragraph and usually contains text however; a link or a picture could be included and again the paragraph tag needs to be closed with the </p> tag.
</d> now closes the table data or cell.<td id="second_column"> you may have guessed starts a new lot of table data, remember though at this stage we have not closed the table row therefore this will be to the right of the previous cell.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloDjYXC1PCE593W_wWwGftgOXilEyC-USGzKZZDCafIrpoL0UhwNK2YX75tRiBYw58KWNjnXN4EUZ2Ep-lKh9xQ8eGmNMsSVPiamALjzfS5lu62thyrGfu2Pq6pJroMgiOLwm2FU1UB4/s1600/blue-butterfly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhloDjYXC1PCE593W_wWwGftgOXilEyC-USGzKZZDCafIrpoL0UhwNK2YX75tRiBYw58KWNjnXN4EUZ2Ep-lKh9xQ8eGmNMsSVPiamALjzfS5lu62thyrGfu2Pq6pJroMgiOLwm2FU1UB4/s200/blue-butterfly.jpg" width="200" /></a> Our friends at Blogger give you this bit of code no need to type it in although; you may need to go into the HTML editor and cut and paste it into a different location. At a later stage I may break that piece of code down so you know what it all means, just a quick explanation it is a hyperlink using the photo of whatever you have there and photo instead of blue underlined text usually associated with a hyperlink.
</td> 
<td id="third_column">
<p>
This little butterfly was so small I needed to use a macro lens.</p>
</td> at this stage there should be no reason to explain the green code.
</tr> This now closes the table row, if you require a new row you just start the process from <tr> all over again. Remember we can add as many cell as we wish limited by the page width.
</table> I could leave you guessing, yes it closes the table!
I will leave the style part of the code for now, I will get around to it sometime over the next couple of days so once again, To be continued............

1 comment: