Trouble with tables

kaos_xiloscient
kaos_xiloscient

Hey gang, I'm a self-taught html gremlin having trouble with html tables within a page. For some reason the rowspan and colspan tags aren't doing anything, which is kinda messing up my format. I'm trying to go for a system where I can do multiple mechanics fields on one side and a single large spell description on the other, but it winds up being
















Title

Lorem ipsum dolor sit amet, vis ut suas liber. Qui abhorreant liberavisse et, ferri graece iisque ut nam. Altera platonem euripidis sea an, eam ad minimum singulis. Pro ad solum vivendo, te sea pertinax efficiantur. Eum ferri numquam ne, albucius ponderum ne has. Sit accusam ancillae at, at nisl nominavi ponderum nec.

Mechanic1  
Mechanic2  

Instead of














Title

Lorem ipsum dolor sit amet, vis ut suas liber. Qui abhorreant liberavisse et, ferri graece iisque ut nam. Altera platonem euripidis sea an, eam ad minimum singulis. Pro ad solum vivendo, te sea pertinax efficiantur. Eum ferri numquam ne, albucius ponderum ne has. Sit accusam ancillae at, at nisl nominavi ponderum nec.

Mechanic1
Mechanic2

On the actual page. I'm really not sure why the second one appears to work here. Any thoughts as to what I'm doing wrong?

 

Comments

  • cgregory
    cgregory
    Posts: 780

    Rowspan and Colspan don't work.

    Are you trying to accomplish this?

     

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • DerkG
    DerkG
    Posts: 76

    It'd help if you'd copy the actual code or (even better) link to an example page on your campaign?

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • DerkG
    DerkG
    Posts: 76 edited June 2017

    cgregory I've been making extended use of the rowspan and colspan in textile? E.g. the tables in https://knights-of-the-realm-1.obsidianportal.com/wikis/battle-system-amended

    In textile, the first table looks like this:


    |_/2. |_\4=. Player Roll |
    |_=. |_=. Crit |_=. Success |_=. Fail |_=. Fumble |
    |_/4=. GM Roll |_=. Crit |=. 1v1 |=. 1/2 GM |=. 2/3 Pl |=. Stand v 2/3 GM |
    |_=. Success |/3=. Opportunity |=. 1v1 |=. 1/2 GM |=. Stand v 1/2 |
    |_=. Fail |=. 1/2 PC |=. 1v1 |=. Stand  1v1 |
    |_=. Fumble |=. 1/2 PC Disorder |=. 1/2 PC |=. 1v1 |

    Which gets translated to this HTML:


    <table>
    <tr>
    <th rowspan="2"></th>
    <th style="text-align:center;" colspan="4">Player Roll </th>
    </tr>
    <tr>
    <th style="text-align:center;"></th>
    <th style="text-align:center;">Crit </th>
    <th style="text-align:center;">Success </th>
    <th style="text-align:center;">Fail </th>
    <th style="text-align:center;">Fumble </th>
    </tr>
    <tr>
    <th style="text-align:center;" rowspan="4">GM Roll </th>
    <th style="text-align:center;">Crit </th>
    <td style="text-align:center;">1v1 </td>
    <td style="text-align:center;">1/2 GM </td>
    <td style="text-align:center;">2/3 Pl </td>
    <td style="text-align:center;">Stand v 2/3 GM </td>
    </tr>
    <tr>
    <th style="text-align:center;">Success </th>
    <td style="text-align:center;" rowspan="3">Opportunity </td>
    <td style="text-align:center;">1v1 </td>
    <td style="text-align:center;">1/2 GM </td>
    <td style="text-align:center;">Stand v 1/2 </td>
    </tr>
    <tr>
    <th style="text-align:center;">Fail </th>
    <td style="text-align:center;">1/2 PC </td>
    <td style="text-align:center;">1v1 </td>
    <td style="text-align:center;">Stand 1v1 </td>
    </tr>
    <tr>
    <th style="text-align:center;">Fumble </th>
    <td style="text-align:center;">1/2 PC Disorder </td>
    <td style="text-align:center;">1/2 PC </td>
    <td style="text-align:center;">1v1 </td>
    </tr>
    </table>

    So I'm pretty sure that rowspan and colspan work.... (PS is this editor dumb or what? I insert a code snippet. Which gets laid out perfectly. Previews neatly laid out. Then I hit OK and get the above mess???)

    Post edited by DerkG on

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • kaos_xiloscient
    kaos_xiloscient
    Posts: 2

    @cgregory That's exactly what I'm trying to accomplish. When I try it I wind up with this.

    Code snippet:

    <table style="width:100%">

            <tr>

                <td>

                <strong><a id="palm" name="palm"></a><br />

                Open Palm Caress</strong>

                </td>

                <td rowspan="5">

                <p>From the beginning, things start to go wrong. Righteous heroes find themselves cast as a vicious bullies when they fight a student of the Black Claw&mdash;even if the martial artist picked the fight himself. This charm adds (Socialize)/2 successes to a Join Battle roll.</p>

                <p>Additionally, compare the martial artist&rsquo;s Join Battle roll to the (Awareness + Perception)/2 of all who witness the fight. Anyone it surpasses believes that the Black Claw stylist is acting in self-defense.</p>

                </td>

            </tr>

            <tr>

                <td>

                Cost: 2m; Type: Supplemental

                </td>

            </tr>

            <tr>

                <td>

                Duration: Instant

                </td>

            </tr>

            <tr>

                <td>

                Keywords: Mute

                </td>

            </tr>

                <td>

                Mins: Essence 1, Socialize 2

                </td>

            </tr>

    </table>

    Follow the link to see how it renders on my page. How did you get it to look nice on yours?

  • DerkG
    DerkG
    Posts: 76

    I'm not sure how you're editing (are you using textile or the newfangled editor?) but when I look at the source code of your page, the rowspan did not make it into the actual website code. I'm GUESSING it's something to do with the newfangled editor, but I'm not sure. I personally prefer textile by a mile and then some, as it's easier to predict what it will or will not do.

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • cgregory
    cgregory
    Posts: 780

    Ok so the Texttile colspan/rowspan works but pure html colspan/rowspan does not. That would mean that html generated from the textile parser doesn't go through the same parsers as pure html.

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • DerkG
    DerkG
    Posts: 76

    Guess so! Just made a small test page, and indeed the colspan gets stripped out if I enter raw HTML.

    Annoying and just plain silly, but there it is.

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • Calion
    Calion
    Posts: 144

    Rowspan and Colspan don't work.

    Are you trying to accomplish this?

    That's what I'm trying to accomplish. How did you do that? Is it possible when using CKEditor?

  • Calion
    Calion
    Posts: 144

    Sigh. The table align attribute doesn't work either, does it? It works great in the preview in CKEditor, but apparently the evil parser strips it out.

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998

    @calion  As many have said, the ckeditor is buggy and most of us just use the old textile editor.

    Just trying to help out.

  • Calion
    Calion
    Posts: 144

    Sigh. I would, too, except that I want my players to write the Adventure Logs, and good luck getting them to use Textile. I don't mind background hacking to fix things, but apparently that's impossible.

  • Calion
    Calion
    Posts: 144

    Update: Centering the entire table is possible with CSS.

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 546

    I encourage my players to use the Adventure Log, but i don't expect any of them to do any markup, whether CSS or CKeditor. I'll add that in afterwards.


    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Calion
    Calion
    Posts: 144

    I encourage my players to use the Adventure Log, but i don't expect any of them to do any markup, whether CSS or CKeditor. I'll add that in afterwards

    Sure. But even doing basic text entry is much less intuitive in Textile. 

  • Calion
    Calion
    Posts: 144

    So I've hacked up a substitute for the lack of colspan, but my next question is: How do I get rid of table borders?

     http://syfaerun.obsidianportal.com/adventure-log/adventure-log-template

  • DerkG
    DerkG
    Posts: 76

    Well, again it's easy to do in css. use the border property.

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • Calion
    Calion
    Posts: 144

    Yeah, I figured it out. I should have done that before asking.

  • DerkG
    DerkG
    Posts: 76

    No problem. I'd be able to help more if you'd consider using textile.

    GM: https://knights-of-the-realm-1.obsidianportal.com/ - a Greater Pendragon Campaign

    GM: https://sagaofthenorth..obsidianportal.com/ - a Dungeon World Campaign

    Player/Scribe: https://thepriceofimmortality.obsidianportal.com/ - a Pathfinder Campaign

    "The object of life is not to be on the side of the majority, but to escape finding oneself in the ranks of the insane." - Marcus Aurelius

     

  • Calion
    Calion
    Posts: 144

    Sure. But getting my players to edit tables in Textile…yeah.

  • cgregory
    cgregory
    Posts: 780

    There are a couple of tricks to making textile tables easier to read and edit for your players,  I find a lot of people try and make their textile tables use a minimum of space, but I find adding in lots of extra spaces makes it much easier for my players (and myself) to read the table and enter data.

    At the end of the day my players chose to stick with the textile rather that use the CkEditor, because the textile offers features that the CkEditor doesn't. 

    Plus their are plenty of tools that allow them to convert an excel table into a textile table with a click of a button.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Calion
    Calion
    Posts: 144

    Thanks for the help. I think I've got it working for now, even in CKeditor. I just broke things up into two tables.

  • Calion
    Calion
    Posts: 144

    I'm having a new trouble. I'm trying to use Table IDs, as described at HTML Tables. I'm using <table id="head">, but that doesn't seem to be showing up on the published page. Is the parser stripping that out, or am I doing something wrong?

     

  • Johnprime
    Johnprime
    Posts: 252

    If I remember correctly, you can't use the id tag on anything for OP.

    Johnprime

    Deadwood Deacon Banner

    Where the west is really wild!

    The Valley of Life Banner

    The Valley of Life

  • cgregory
    cgregory
    Posts: 780

    You are correct John. Just use classes instead of IDs. You can achieve the same effect.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Calion
    Calion
    Posts: 144

    Thanks; but I'm unclear how to use nth-child with classes. I'm trying to get back the zebra striping that seems to have disappeared from OP tables in the last few weeks, with something like this:



    table#t01 tr:nth-child(even) {

        background-color: #eee;

    }

    table#t01 tr:nth-child(odd) {

        background-color: #fff;

    }

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 546

    I actually use cut/paste to create all of my tables, then I go back through and edit the background color for every other line. (It's only three letters.)


    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Calion
    Calion
    Posts: 144

    Ugh. What a pain. Alright, I guess I will. What in the world changed, anyway?

  • SkidAce
    SkidAce
    Posts: 830 edited August 2017

    My tables automagically alternate shading, using nth child css etc.

     

    Here is an example:   http://alfaysia.obsidianportal.com/wikis/imperial-temple

     

    Here is my code

    /* TABLE STANDARDS */
    table {margin:0px auto;}
    #content table{background-color:#white; border-style:solid; border-color:#1e90ff;}
    #content tr:nth-of-type(1){background:#1e90ff;}
    #content tr:nth-child(even) {background-color:#ddd}
    #content table {border-collapse:collapse;}

     

     

    Post edited by SkidAce on
  • SkidAce
    SkidAce
    Posts: 830

    Thats my custom CSS for the campaign.

Sign In or Register to comment.

March 2024
Wrath of the Highborn

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