Aug 05 2009

Just Getting Started

Published by

Learning HTML coding really isn’t so hard. I learned how to do it myself pretty quickly, but with a site at my aid. Now, I have it memorized and only need to look up color codes. After reading this a few times, you should be able to make pretty good, basic layouts.

Tables, Rows, and Cells:

On Howrse, you need to make a table for your layout to be viewed. A table is made up of rows and cells. To begin making a table, or start any form of HTML, you need to have a beginning and ending code. For a table, it starts and ends with this code:

<table> </table>

The backwards slash is always in an ending code. (Remember to add the carrot symbols; if you forget, Howrse can’t read it and your layout can’t be shown.) Once you enter your beginning table code, you can start to add details. These include: alignment, how big you make your cells, width, spacing between the cells, spacing between the cell and where text start, background colors, text colors, fonts…it could keep going! Here is a basic table with just two cells:

cell number one cell number two
This is a row. (Best to use as a footer)

The code that I used for the table is very simple. Here it is:

<table border="1">

<td>cell number one</td>

<td>cell number two</td>

<tr>

<td>This is a row. (Best to use as a footer)</td>

</table>

The <tr> code is the code to enter a row. The ending code for this is </tr>. The whole row code would be this:

<tr>

<td>This is a row</td>

</tr>

All I had to use was basic beginning codes and ending codes. Now let’s say you would like to add a picture or a footer. You can add both of these things in the table above but it would look a little funny like pictured above. There are two cells but only one row, making it off balance. *Remember: cells and rows always end at the same spot unless combined.* By combining two cells or two rows, there will be a bigger space a picture or a longer space for a footer.

Here is the table used for a picture:

Picture goes here
cell number one cell number two

(The text will be centered on Howrse.) To combine cells, enter this code before the beginning text code (<td>): colspan=”2″ Here’s what the HTML would look like:

<table border=”1″>

<td colspan=”2″>Picture goes here.</td>

<td>cell number one</td>

<td>cell number two</td>

</table>

The number two in the colspan code can be changed to any number. Two is there because it means your are spreading the cell over two cells. If you wanted it over three cells, it would be this code: colspan=”3″

To make a footer at the bottom of the page (usually used as a place to put a copyright on your layout). You would do the same code but in the spot for the row. Here’s the whole table code:

<table border=”1″>

<td colspan=”2″>Picture goes here.</td>

<tr>

<td>cell number one</td>

<td>cell number two</td>

</tr>

<tr>

<td colspan=”2″> Footer </td>

</tr>

</table>

It will look like this:

Picture goes here.
cell number one cell number two
Footer

I had to add the <tr> code below the picture text so the site could tell that cell number one and cell number two are placed under the picture text. Howrse shouldn’t have this problem, though.

This is the basic lesson about tables, rows, and cells. Soon I will post how to add colors and fonts. Post a comment if you do not understand this correctly. If you are having any layout troubles, feel free to PM me on Howrse. My user name is Jessica27.

151 responses so far

151 Responses to “Just Getting Started”

  1. Maliahon 25 Feb 2013 at 9:49 pm

    Uh, the coding stuff I did didn’t show..

  2. Golden Phoenixon 08 Mar 2013 at 1:40 pm

    Is it possible to make the text boxes clear-ish? what about putting them on the picture? If so, how to? Please pm me! (my user is the name I put here)

  3. Mauginon 24 Mar 2013 at 3:36 pm

    errmm I’m a tad stuck, i get do most of it ok it’s just that the cells go to the side of the image not underneath how do I stop this? if you could pm me the answer as i might not see it on here, I’d appreciate the trouble :3 my howrse username is Maugin (all capitalization is correct)

  4. Maddie Waiteon 14 May 2013 at 4:30 pm

    OK… where do you put in the code?????

  5. Maddieon 14 May 2013 at 4:31 pm

    OK… where do you put in the code?????
    I DON’T GET IT!!!!

  6. annasam1813on 28 May 2013 at 3:46 pm

    Okay the cells are working fine and so is everything except the picture on the top, I put in the URL but whenever I go into normal mode all it says IS the URL. It’s not working for me???

  7. Owwieon 25 Jun 2013 at 11:02 am

    I totally nailed it!

  8. IcingStar1on 05 Aug 2013 at 6:21 pm

    Thank you! this helped so much!

  9. warhorseon 06 Aug 2013 at 3:16 pm

    I found a cool picture that I like, but it won’y let me copy the URL code. What did I do wrong?

  10. Dragonwingon 24 Sep 2013 at 11:31 am

    It isn’t working! I even tried just typing in the code you gave as an example, but it only shows the words I typed. What am I doing wrong?

Trackback URI | Comments RSS

Leave a Reply