Jump to content

Help with tables please


DawnUnicorn

Recommended Posts

Hello,I'm learning the basics of HTML in order to create professional layouts for my art listings on ebay. I've just discovered that using tables is the best way to do that. I have begun by practising on my ebay me page http://members.ebay.co.uk/ws/eBayISAPI.dll...rid=dawnunicornHowever within in the light blue box I would like a heading/title with a different colour background, this listing shows an example of what I mean http://cgi.ebay.co.uk/ACEO-ATC-original-GI...1QQcmdZViewItem on the left hand side where it says 'details' and 'note.'I have tried using the <th> tags but I don't seem to be able to put them within the <td> tags and get the heading background colour to fill the whole width of the cell. I also tried putting a table within a table with just one row and one cell but that just sat in the middle and didn't fill the whole width either. I would love some enlightenment on this as I have surfed for a while and just can't find an answer...Thank you,Dawn

Link to comment
Share on other sites

DawnUnicorn,This is ElectroSciTech. I think that I know what you are attempting to do, and will attempt to help you get it done. I think that you need to know more about tables, such as their structure and the attributes for the tags that comprise the table. A table is of course made up of the 'table' (table), 'tr' (table row), 'th' or 'td' (table cell) tags that make up the table in rows with cells. If I remember correctly, the was a difference found between the 'th' and the 'td' tags, so I always used the 'td' tags because they were better for what I use them for. There are attributes on some of these tags, particularly the 'td', that may be important to you:For The 'td': > width="[pixels or percent]" - Specifies the width of the cell. > height="[pixels or percent]" - Specifies the height of the cell. > colspan="[number of cells]" - Makes the cell take up more that one column. > rowspan="[number of cells]" - Makes the cell take up more that one row. > align="[left|center|right|justify]" - Aligns the content of the cell. > valign="[top|middle|bottom|baseline]" - Aligns the content of the cell. > bgcolor="" - Specifies the background color of the cell. Also, 'td' elements seem to be able to hold almost any other tag, so you can put whatever you want in your cell, including text formatting, graphics and other tables. Now I will give you an example on what I have shown you above:

<table><tr><td rowspan="2">A1</td><td colspan="2">A2</td></td><tr><td>B1</td><td>B2</td></tr></table>

The code above creates a table matrix of 3 columns and 2 rows. The matrix distribution is shown below:A1|A2|A2A1|B1|B2The first 'td' has a rowspan attribute that likes to force it's way down, displacing anything in it's way, as it did with the 'B1' and 'B2' cells. Then the second 'td' has a colspan attribute that likes to force it's way to the right, so no 'A3' cell was needed. The other cells take up there position in the flow, as the 'B1' and 'B2' elements did. An example for something like what your competition has done is below:

<table width='"100%" bgcolor="#FF00FF"><tr><td align="center" bgcolor="#880088" colspan="2">Title HTML</td></tr><tr><td align="center" rowspan="2">Image HTML</td><td align="left" height="50">Subtitle HTML</td></tr><tr><td align="left" valign="justify">Paragraph HTML</td></tr></table>

I hope that this gave you the information you were looking for. Good luck on your project.

Good Luck,ElectroSciTech

Link to comment
Share on other sites

Thanks so much both of you for your help :) Thank you for explaining tables to me in a bit more detail, it's made things more clear for me now! I'm pretty confident that with the help I've recieved plus some other information I have come across, that I can create my ideal listing template!Thanks againDawn

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...