Help with HTML Tables

Comments

  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Hello I've been trying to recreate the "following table":http://i594.photobucket.com/albums/tt24/oldskoolrebel/45adventure.jpg

    At first I tried to use BBcode but it didn't work. I'm now looking t see if some kind person will either help me create it in html or create it for me ;-). Hah! I only ask because my HTML is that bad. NB I don't particularly care which font the table is in.

    Cheers
    Andy
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Creating a table this complex (and having it come out actually looking like your example) will certainly require some HTML. Rather than do it for you however, let me point you to a few examples and tutorials that should get you well on your way to doing it yourself. This stuff is well worth knowing if you're going to do even a little bit of stuff like this online.

    *First*, have a look at this "basic tables tutorial":http://www.w3schools.com/html/html_tables.asp which should give you an understanding of how to use HTML tables in general, and get you off to a good start.

    *Then* move on to learning how to make table cells span more than one row or column, and seen in "this example":http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span which should help you produce the top and left headings in your example image.

    *Finally*, once you've got the table framed out, you will need to use "inline styles":http://www.w3schools.com/CSS/css_howto.asp to lock in things like the "height":http://www.w3schools.com/Css/pr_dim_height.asp and "width":http://www.w3schools.com/CSS/pr_dim_width.asp of each cell, "background color":http://www.w3schools.com/Css/pr_background-color.asp, and "borders":http://www.w3schools.com/css/css_border.asp of the cell and table.

    I know that's a lot to take in, but I think you'll find it worthwhile to know. I'll be happy to answer any questions you have, or help you out if you get stuck on something along the way.
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Awesome thanks Chainsaw! As you said its an important skill set for me to have. I'll probably try to contact you in half an hour once I'm stuck! Ha!

    Cheers
    Andy
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    OK so far I have the basic shape of the table



    Location (Die Roll)
    Base
    DR
    Wound Level


    Head (1)
    Brain =X
    X
    Brain =X
    Brain =X
    Unconscious


    Torso (2-4)
    Brawn=X
    4
    BW=X
    BW=X
    BW=X
    BW=X
    Unconscious

    Guts =X
    4
    GT =X
    GT =X
    GT =X
    GT =X


    Arms (5-7)
    Heater=X
    4
    HT=X
    HT=X
    HT=X
    HT=X
    HT=X
    No Attacks

    Shiv=X
    4
    SH =X
    SH =X
    SH =X
    SH =X
    SH =X
    Cannot Carry


    Legs (8-10)
    Dodge=X
    4
    DG=X
    DG=X
    DG=X
    DG=X
    DG=X
    DG=X
    No Attacks

    Speed =X
    4
    SP =X
    SP =X
    SP =X
    SP =X
    SP =X
    SP =X



    Now i've got a couple of questions; hot do I make a thin border, how do I 'merge' the last boxes in the row.

    EDIT actually tried that code in OP it doesn't give me what I was seeing in the 'TRYME editor" you can view it "here":http://www.obsidianportal.com/character/39050

    Cheers
    Andy
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    You look to be off to a good start! Don't worry that OP makes it look funny for now - OP applies a pile of default CSS styling to everything, including tables and their cells. When you start setting up your own stiles a bit further down the line they'll override the defaults and you'll be good to go. You'll also be able to set up border properties at that stage, so sit tight on that until you get there. The second link in my post above will explain how you can make one cell span multiple columns and rows, which should cover your 'merging' question.
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Great thanks Chainsaw.
    Totally Showing my ignorance but...
    But now I'm having trouble figuring out where to put the css code, where ever I put it, it's not recognized as code and just displayed like text.

    Cheers
    Andy
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Sorry I read some more... and I understand what you mean by inline styles now! OOPS i feel pretty stoopid ;-).

    Once again cheers
    Andy

    EDIT: I'll be asking your help again soon... I'm not getting the inline styles to work, but hey its probably me not understanding what i'm doing.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    No worries. Give me an example of what you've got and I should be able to point you in the right direction.
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    I'm not much further ahead I'm afraid... although I did make a black border appear around it!

    What I'm looking for is making the "Wound Level" box to span the remaining 6 columns, something tells me it's not going to be incredibly simple.

    "Here is what i've got so far":http://www.obsidianportal.com/character/39050


    Location (Die Roll)
    Base
    DR
    Wound Level


    Head (1)
    Brain =X
    X
    Brain =X
    Brain =X
    Unconscious


    Torso (2-4)
    Brawn=X 4 BW=X BW=X BW=X BW=X Unconscious

    Guts =X 4 GT =X GT =X GT =X GT =X

    Arms (5-7) Heater=X 4 HT=X HT=X HT=X HT=X HT=X No Attacks Cannot Carry

    Shiv=X 4 SH =X SH =X SH =X SH =X SH =X

    Legs (8-10) Dodge=X 4 DG=X DG=X DG=X DG=X DG=X DG=X
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    You actually already solved it in your code here, but upon further investigation the problem is that Obsidian Portal's system is culling out the _colspan_ attribute for some reason. I can't fathom why that would not be allowed, so my guess is that it's just an oversight. I'll post a bug report about it, but if they choose to fix it it will inevitably take a while to get resolved.

    In the mean time, it's going to make things a little more complicated. Without using _colspan_ and _rowspan_, you could approach this one of two basic ways:

    Probably the simplest from a learning curve standpoint would be to nest another table inside the cells - you'd basically have one big wide column with Wound Level at the top, and each row below that would have a little one line table for the various wound levels inside. That should be pretty approachable for you, since you're already getting comfortable with tables in general.

    A slightly cleaner (and generally more professional) approach would be to make your table without using actual HTML tables at all. To do it this way, you'll need to learn a lot more stuff - how to use _div_ and _span_ tags together to build the table, and some additional CSS techniques for making them behave the way they should - but that's all good stuff to know as well.

    Let me know which way you'd like to try, and I'll help you through it.
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Chainsaw, Which ever way is easier... The HTML way sounds quite complicated, although it might be easier than learning "a lot more stuff" :-p.

    I think I'll go for the HTML way, unless you think the other way is the better choice!

    Cheers
    Andy
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    Forum formatting is all wonky, so "check out my test page":http://www.obsidianportal.com/campaign/sanction/wikis/test-page for examples of the two approaches. Have a look at the code examples on there, and try out whichever approach strikes your fancy. We'll go from there.
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Hey Chainsaw, where do I go from here?



    Location (Die Roll)
    Base
    DR
    Wound Level



    Head (1)
    Brain =X
    4



    BR=X
    BR=X
    Unconscious




    Torso (2-4)
    Brawn =X
    4




    BW=X
    BW=X
    BW=X
    Unconscious










    Thanks for all the help so far!

    Andy
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    It looks like the problem you have here is some missing tags. Specifically:

    * Missing an opening _tr_ tag in your first nested table
    * Missing the closing _table_ tag for the first nested table
    * Missing both closing _td_ and closing _tr_ tags for the second row
    * You have an extra opening _table_ tag on the third row
    * Missing an opening _tr_ tag on the third row nested table

    With those errors fixed, you should end up with things looking just right. Here's what the fixed code should "look like":http://www.obsidianportal.com/campaign/sanction/wikis/test-page#fixes1
  • Andrew_Hart
    Andrew_Hart
    Posts: 22
    Cheers Chainsaw

    Can you do me one last favour and please have a "look here":http://www.obsidianportal.com/character/blank45asheet and tell me if there are any changes that I should make for the code to function better/look better.

    I'm over the moon with it, I really couldn't have done it without your help!

    Thanks
    Andy
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    That looks solid man - well done. Glad I could help. :)
  • Gravedigga
    Gravedigga
    Posts: 8
    I am trying to use html table to do some light weight formatting of pages on my wiki, and used this thread as a place to get some code examples and learn a few things. My first goal was to duplicate ChainsawXIV's wiki "main page":http://www.obsidianportal.com/campaign/sanction/wikis/main-page .

    It took me forever to figure out how to get the borders to the cells to turn off, but I eventually produced "this result":http://www.obsidianportal.com/campaign/new-campaign/wikis/test . (look at the second table with "header1", "header2", "header3"). Using this code:





    header1the first cellanotheranother


    header2the second cellanotheranother


    header3[[the third cell]]anotheranother





    I'm getting to a question here, I promise! I decided to try to add a background color, mimicking Andrew_Hart's table at the bottom of "this page":http://www.obsidianportal.com/character/blank45asheet (as linked in this thread, above). I tried this (truncating to save space):



    header2the second cellanotheranother



    I also tried using numbers (######) instead of naming the color ("blue"). Nothing I managed to do got that table to have any color in it. Any idea why? I copied some textile table code off a helpful website to produce the table farther down on "my test page":http://www.obsidianportal.com/campaign/new-campaign/wikis/test that has some colored cells in it, but I can't get colored cells into the table I wrote myself using the above code.

    One other question: at some point, last night, I couldn't access OP. I got a message about "down for maintenance" or similar, and it came back up after not too long. I found no mention of this anywhere on the forums. Since that time, I can't get *any borders* in any of my tables (I use Firefox 3.5.3, if that matters). I spent all night getting rid of the borders, and now no table I view on OP, including "Andrew_Hart's":http://www.obsidianportal.com/character/blank45asheet , which used to have black borders around the cells, has any borders around cells.

    There are several tables on my "test page": , and some should have borders but don't. I tried changing the code (written out, above) to have "border-style:dotted;" instead of none, and that didn't work. Where did my borders go? Is anyone else experiencing this change? It may be the case that I should submit a bug report, but I am not convinced that I am doing everything right. I wanted to eliminate user error first.

    With many thanks,

    P
  • Acetaminophen
    Acetaminophen
    Posts: 20
    I can't help with the table borders... I can't say I noticed it before, and after testing some I found that your analysis was correct.

    I can help with the HTML for cell backgrounds. In your second code space, replace:


    with



    and that should do the trick. I believe it will work in all TABLE, TR & TD tags in the style attributes.

    Incedently, this would give you the ability to put the graphic in the background...



    That won't work if the path has a ~ in it, btw.... Which has made my head explode, since one of my graphic hosts uses ~ before the user name in the host path. *sigh*
  • Gravedigga
    Gravedigga
    Posts: 8
    Acetaminophen, your advice "worked perfectly":http://www.obsidianportal.com/campaign/new-campaign/wikis/test and I really appreciate the help. I am also glad you could at least confirm you are seeing (or, not seeing, to be specific) the same issue with the cell borders on tables.

    Again, many thanks.
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    The reason you're not seeing borders on your tables any more is because they changed the default CSS styling for tables to have a border width of zero. Try adding _border-width:1px;_ to your styling, along with the _border-style_ setting, and you should get borders again. Unfortunately, this means a fair amount of work for folks, since you'll have to add borders to each _td_ tag individually. Of course however, you had to remove them individually before, so it's really just a question of which preference is more common I suppose.
  • Acetaminophen
    Acetaminophen
    Posts: 20
    You're most welcome Thep!

    Chainsaw: I tried those tags in the style sections and I got nothing being shown. I could not get borders to show with style tags in HTML tables at all, even using the old style border tag modifiers. :(
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    I tested it out last night, and it worked fine for me. It required both _border-style:solid_ and _border-width:1px_ to get it to work though. You may also need to set _border-color:#000_ in some cases, although it didn't seem to be required from what I saw. The old school border modifiers would be superseded by their style sheets, so it's no surprise they don't work, but inline CSS definitely should and did for me.
  • Gravedigga
    Gravedigga
    Posts: 8
    Thank you both for the help, "it worked perfectly":http://www.obsidianportal.com/campaign/new-campaign/wikis/test. If it is helpful (to anyone that finds this thread) the garish table on that "test" page, with its first cell outlined in a dotted border, has this code:





    header1the first cellanotheranother


    header2the second cellanotheranother


    header3[[the third cell]]anotheranother





    Also, I'm rather proud of this bit of code:



    Auerbakk Mine

    edit
    top




    As seen to good use on "this page":http://www.obsidianportal.com/campaign/new-campaign/wikis/geography. The anchors are something I learned from ChainsawXIV in another thread. I think the table of contents and edit/top links for each heading make it very organized. Two questions, is there any way to get those "edit" links to actually take me to the spot on the edit page corresponding to the section from which it was clicked? I tried fooling with anchors on the edit page, but only managed to mess things up.

    Also, does anyone have any other suggestions on page organization tips that might improve what I am doing?

    Again many thanks!
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    That's looking good Thep. Glad I could lend a hand. Now, for your questions.

    There isn't currently a way to auto-scroll the edit field to the corresponding line. It's not technically impossible, at least in the web at large, but it would require some slick javaScript to make it work, and we're not allowed to embed scripting here for various (good) reasons. Section style editing, as seen on some other wiki types, could also be implemented on the server end, but that would be a pretty significant new feature, and therefore a lot of work that's probably low priority.

    As for organization, one of my biggest realizations so far is that I need to shorten up my pages. One great thing about the wiki style presentation is that the user can follow a chain of links to get just the information he's looking for, but when pages get long this tends to break down. It becomes hard to find any given item on the page, and the pages become overwhelming and hard to digest. With that in mind, I've been breaking up a few of my bigger pages into more specific and specialized chunks, and I think the whole thing is much easier to navigate because of it.
  • Acetaminophen
    Acetaminophen
    Posts: 20
    My attempt at shortening pages has led me to utilize tags to a greater effect. My concern, however, is that eventually I'll just end up with a huge list of tags, too. :(

    Incedently, how the heck do you get an HTML table to be centered when it is set to 350 (or something other than full width for the screen)?
  • ChainsawXIV
    ChainsawXIV
    Posts: 530
    To center the table in the space, give the table tag the _margin-left:auto_ and _margin-right:auto_ styles. For older versions of internet explorer, you may also need to enclose the table in a _div_ tag with _width:100%_ and _text-align:center_, but I don't have an old version to test with.
  • WoozleWozzle
    WoozleWozzle
    Posts: 9
    Hi, what do I need to do to this code to get it to work in the wiki - borders, bolded top row, and all?







    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    padding: 5px;
    text-align: center;
    }






    First Name
    Last Name
    Points


    Jill
    Smith
    50


    Eve
    Jackson
    94
  • Bortas
    Bortas
    Posts: 645
    Well, simply put, you can't edit the HTML of any page, so any of your header information is out.

    The input boxes you use, add specific HTML to certain specified areas of the body section. All the HTML must be input there.

    For the vast majority of styling, if you can't accomplish it in simple HTML, you will need to go into your campaign's advanced settings, and make use of custom CSS.

    -bort
    "Morwindl":https://morwindl.obsidianportal.com

    Morwindl - Rising Tide

    Campaign of the Year - 2018

Sign In or Register to comment.

April 2024
Season of Strife

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions

Categories