basic HTML table help

Ryan Kent

Well-known member
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.
 

Ryan Kent

Well-known member
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.

Code:
<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>
 

Brogan

XenForo moderator
Staff member
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

Well-known member
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.
 

Brogan

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

table.PNG
 

Brogan

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

Ryan Kent

Well-known member
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 ;)
 
Top