1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

basic HTML table help

Discussion in 'XenForo Questions and Support' started by Ryan Kent, Mar 14, 2011.

  1. Ryan Kent

    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.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. Ryan Kent

    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>
     
  4. Brogan

    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?
     
  5. Ryan Kent

    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.
     
  6. Brogan

    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
     
  7. Ryan Kent

    Ryan Kent Well-Known Member

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

    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.
     
  9. Ryan Kent

    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 ;)
     

Share This Page