Adding rows, columns and other commands
Your basic table is now on your profile. Lets look at the table again and the html code line by line.
|
Picture |
|
| Text........ | More text.......... |
The HTML code for a basic table
| HTML Coding | What it means |
| <table border="2" width="550" align="center" cellpadding="5" cellspacing="5"> | starts table and formats width, alignment, padding and spacing |
| <tr> | start first row |
| <td colspan="2"><div align="center"> <p>Picture<br /> The cells have been merged in the top row </p> </div> | first cell in first row spans two columns |
| </td> | end first cell |
| </tr> | end first row |
| <tr> | start second row |
| <td>Text........ | start first cell second row |
| </td> | end first cell second row |
| <td>More text.......... | start second cell second row |
| </td>align="center" - this aligns the whole table in the centre of the space | end second cell second row |
| </tr> | end second row |
| </table> | end table |
Adding another row with two data cells:
To add another row with two data cells copy the following code. Click in the box for the code you want, the code will turn blue. Right click and copy the code then in your Howrse profile hmtl mode right click and paste after the row above finishes.
<tr> <td>Text........</td> <td>More text.......... </td> </tr>
Adding another data cell
To add another data cell in each row copy and paste the following code, remebering that each row should have the same number of data cells in it. So if you add a cell to one row you must add it to all the rows. Your new cells will go before the </tr> that closes the row you are adjusting.
<td>text</td>
Adding commands to the <table> tag
In the main table tag <table> you can add the following
- border="2" - this defines the width of the border
- width="550" - this is the width of the table you can also use %, 550 is a nice width for your Howrse profile
- cellpadding="5" - the padding inside a cell before your content starts
- cellspacing="5" - the space between each cell
bgcolor="#00FF00 - put the background colour of the cell to the specified colour, see our colour chart page to get a listing of internet safe colours - background="address/bg2.gif" - puts a background picture in the whole table
for example <table border="2" width="650" align="left">
Adding commands to the <td> tag
In the table data tag <td>you can add the following
- colspan="2" - merges the data cell over the number of columns specified, 2 in this example
- rowspan="3" - merges the data cell over the number of rows specified, 3 in this example
- bgcolor="#00FF00 - put the background colour of the cell to the specified colour, see our colour chart page to get a listing of internet safe colours
width="50%" - background="address/bg2.gif" - puts a background picture in the cell
for example <td width="650" background="http://photobucket/youraccount/bg2.gif" colspan="2">
Practice putting some of these codes into your basic table, if you need ideas we have a page of different layouts and their html codes. If all you see in your profile is html text delete that area 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. If you get confused with your tables it is often a good idea to draw your table out on a piece of paper then you can go through the html code line by line to make sure your rows and data cells all have the correct closing tags.
Subscribe to this comment's feed
| < Prev | Next > |
|---|
