basic HTML table help

[Ryan Kent]

I just learned how to make tables in HTML. I am trying to build an organized index for my Wiki (XenCarta). I have the table set up and have two formatting issues I just can't seem to get past. I am hoping someone can point out the error of my ways.

The issues are:

1. The bullet points from the list should be contained within the frame. Basically, they should be shifted a few pixels to the right. I have tried modifying the cellpadding, adding char/charoff and it doesn't have any effect.

2. The spacing between the rows is far too big. I need to reduce the vertical spacing.

I've come a long way with my HTML understanding but I am still in the noobie category.

 

[Paul B]

Cell padding is what you use to separate the contents from the borders.
Try here to see if you can get it to work: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_cellpadding

What do you mean by spacing?
Cell padding, border?

 

[Ryan Kent]

Yikes! I just realized I didn't paste my code in the original post. Without it this thread doesn't make much sense.

And yes, I use the W3 site a lot. It's one of two sites I depend on for my HTML information.

<p>
<thead>
<table border=1 cellpadding=3 cellspacing=1 frame=box>
<th width="50%"><center>Continents</center></th><th width="50%"><center> Stats</center></th>
</thead>
</table>

<table border=1 cellpadding=3 cellspacing=1 rules=cols frame=box>
<ul>
<tr><td width="50%" style="text-align:left"><li><a href="/wiki/arun">Arun</a></li></td><td width="50%" style="text-align:left"><li><a href="/wiki/attack_speed">Attack Speed</a></li></td></tr>

<tr><td width="50%" style="text-align:left"><li><a href="/wiki/northern_shara">Northern Shara</a></li></td><td width="50%" style="text-align:left"><li><a href="/wiki/critical_hit">Critical Hit</a></li></td></tr>

<tr><td width="50%" style="text-align:left"><li><a href="/wiki/southern_shara">Southern Shara</a></li></td><td width="50%" style="text-align:left"><li><a href="/wiki/damage">Damage</a></li></td></tr>

<tr><td width="50%" style="text-align:left"><li><a href="/wiki/island_of_dawn">Island of Dawn</a></li></td><td width="50%" style="text-align:left"><li><a href="/wiki/defense">Defense</a></li></td></tr>
</align></ul></table>

 

[Paul B]

Well the first thing I can see is you've got your table rows inside the <ul> list tags.
I don't think I've seen that done before, try putting the complete ul/li element inside the cell.

Out of interest, why are you doing list elements in a table?

 

[Ryan Kent]

What I am trying to achieve is a nice looking Wiki index page where users can find the categories they seek in an organized manner. I followed Jaxel's example and I completed the top half of my page. For the bottom half (this table) I am using an example I have seen at the bottom half of this page --> http://tera.zam.com/wiki/TERA

I am guessing that table is dynamically generated based on a database, but I don't have those coding skills as of yet so I need to start somewhere. The bullet points are there purely for cosmetic purposes.

 

[Paul B]

If you check that page you will note the ul/li is inside the td as I posted above.

 

[Ryan Kent]

That was it! Issue #1 resolved. Any ideas of the 2nd issue? The large spacing between rows.

 

[Paul B]

That just comes down to basic css.
You will need to create classes for your tr, td and li elements.

 

[Ryan Kent]

thank you again Brogan. I am learning, and while this is to support my forums I understand this thread is outside the norm for XF support. I very much appreciate the education. I may ask dumb questions, but never the same one twice