Introducing tables
Tables are normally used to set out data in a tabular form but for your Howrse profile they are an easy option to set everything out. A table is split into separate cells with rows and columns.
Here is a basic table with two rows and two columns. I have put a border around each cell so you can clearly see how the table is made up.
| cell - first row first column | cell- first row second column |
| cell - second row first column | cell - second row second column |
Here is the same table without a border
| first row first column | first row second column |
| second row first column | second row second column |
The html tags and definitions for a table
Table - all tables start with <table> and end with </table>
Table row - a row that contains at least one data cell, tags are <tr> and </tr>
Table data - an individual cell in a table row, tags are <td> and </td>
The table tags are always nested like this <table><tr><td> </td></tr></table>
Writing the html code for a table:
| 1 | Start with the opening table tag | <table> |
| 2 | start the row | <tr> |
| 3 | open your data cell in the row | <td> |
| 4 | put in your text or pictures | Hello this is my table |
| 5 | close the data cell | </td> |
| 6 | do you want another data cell in the row? | |
| 7 | yes - repeat stage 3 to 5 | <td>more text</td> |
| 8 | no - close the row | </tr> |
| 9 | do you want any more rows? | |
| 10 |
yes - repeat stage 2 to 8 |
<tr><td>text</td><td>text</td></tr> |
| 11 | no - close the table | </table> |
You should have the same number of data cells in each row although it is possible to merge cells as explained later.
Writing a table for your Howrse profile
An ideal table layout for your howrse profile is the following table where the two cells in the top row have been merged and this is the table layout that we will be working with. More layout options are available here, once you are happy with the principles you can change your layouts.
|
Picture |
|
| Text........ | More text.......... |
Lets copy the basic html table code into your profile then we will work on putting images, colors and titles into the layout. Under your "profile" option click on the "MY PAGE" button.
Then modify your profile. If you reinitialize your profile you will delete everything.
Change the edit mode to HTML otherwise all you will see if the actual HTML code in your layout 
Highlight the HTML code below then right click then copy (or Control C) go to your profile box and right click and paste (or Control V) at the top of the box, click "save my presentation" to save your layout.
<table border="2" width="550" align="center" cellpadding="5" cellspacing="5">
<tr>
<td colspan="2"><div align="center"> <p>Picture<br /> The cells have been merged in the top row </p> </div></td>
</tr>
<tr>
<td>Text........</td>
<td>More text.......... </td>
</tr> </table>
Your basic table is now on your profile, the next part of the tutorial will explain how the html works and how to get background colors in the table. If all you see in your profile is html text delete everything and make sure you click the html edit mode button BEFORE you paste the html code. Pasting html code while in the normal edit mode will just put html coding into your layout.
Subscribe to this comment's feed
written by mr brian1, November 03, 2011
-
- +0
-
-
written by emilybbh (this is my REAL Howrse username), September 15, 2011
) for my EC, but all the text boxes go right below the first. And of course I had the opposite problem on my personal layout when I wanted to make another row beneath... 
-
- +0
-
-
| < Prev | Next > |
|---|
