Friday, January 20, 2012

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

No comments:

Post a Comment