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............

Three Column Code Explained

OK! so the fool ads the code and doesn't explain it!!
Lets start....
<table>    table: a table is very similar to the Microsoft Excel's spreadsheet, a little longer to setup in a web page using HTML. As with all HTML code it starts with the opening tag, table which needs to be enclosed within the < and > symbols. After the table code is complete it needs to be closed by the closing tag </table> So far so good........
<tr> 
Next we have the table row, which is shortened to tr and once again enclosed inside the < and > symbols. Yes! and you need to close it at the end of the row, not suprisingly the code is  </tr>. Remember the rows are going across the page not down.
<td id="first_column" valign="top">
Following on we have the table data, shortened to td, the table data tag is <td> and yes you guessed it, you have to close it with </td>. Table data is the same as a spreadsheets cell. You could just ad your data using the opening <td> and closing </td> tags for each cell and all would be fine. Table data can be text a picture or many other things such as a video although you need to be careful your tags start and stop in the correct places. So why did I give the td in this case an id? Well I need this later when I style it to tell the style to do certain things to table data with this id. We can change the background colours or borders and give it padding(clearance) etc. In my example I have used id which is represented in the style code as # however, I am only using one row and really if I was to have continued it would have been better to give it a class not an id. CSS which is used to code the style only allows one item with an id on a page in this case where I might need twenty or so table data(cells) in my table to have a common style I would need to use class.
In the style id is written as # and class is a . period therefore #first_column as an id and .first_column as a class.
The name of the id or class can be almost anything however; some words can not be used for example id="red_column" is ok yet id="red" is not allowed as red is a word used for styling.
To be continued.....................

Three Column Code

<table>
<tr> <td id="first_column" valign="top">
<p>
This is a three column post with columns of equal height. this however was done with a table.</p>
</td> <td id="second_column">
<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>
</td> <td id="third_column">
<p>
This little butterfly was so small I needed to use a macro lens.</p>
</td>
</tr> </table>

<style>
td{padding:1em;
font-size:12px;
text-align: centre;}
td p {width:100px;}
#first_column{color:white;
background-color:black;}
#second_column{
background-color:#CDC0B0;}
#third_column{
background-color:#8B7D6B;}
</style>

Let us try three column's

This is a three column post with columns of equal height. this however was done with a table.

This little butterfly was so small I needed to use a macro lens.

Two Columns different colour Backgrounds

Photo of a fly taken with a macro lens.

Photo of ant taken with a macro lens.

Photo of butterfly taken with a macro lens.

This could be done easier with a table maybe.

Rotate Text

There are some great advances taking place now with CSS and HTML5 unfortunately not all of them are supported by all browsers. Internet Explorer always seems to be the one that is left behind and it would be by far the worse browser for web designers to cope with. This is Microsoft's attempt to control the internet and what people are able to see and do, maybe Microsoft should allow the web designers to choose what they want to display.

Pulsating Text

Below is some pulsating text, no it is not an animated gif or picture and as you can see it moves its surroundings to fit. Yes it can be annoying however as you can see it does get peoples attention.

Leave a comment!