Tables

NikMak
NikMak
edited July 2014 in General Archive
hi all,

I am putting a table into one of my wiki pages (in all likelihood it will be the only table in the campaign web site, but i expect it to get a fair amount of traffic as the campaign develops) - and was hoping for a few suggestions on how to go about it.

here is what i have so far, and i dont much like it!

https://the-great-pendragon.obsidianportal.com/wikis/groups-and-nations

please, when offering your suggestion, keep in mind that I am very lazy, and want to get away with as little work as possible! :)

Cheers

Nick

Comments

  • Basileus
    Basileus
    Posts: 585
    I would set the table width to 85 or 100% of the wiki page, and text alignment to center. If you want to do that inline, just throw this in the line above the table:

    @table{width:85%; text-align: center;}.@

    I would also think about creating more contrast between the background and the text color. Maybe darken the background and desaturate the text (palegreen or mediumaquamarine might be good for the text)?
  • NikMak
    NikMak
    Posts: 379 edited July 2014
    hmm,

    that hasn't worked very well for me (using chrome FYI)... the command displays on the screen no matter where I place it (before the '' command, in the table command or just after it)... suggestions?

    additionally - how do i display boarders on tables?

    as for the link colour - I have been messing around with that for a while, I welcome all suggestions on that as well. But I think the current 3F3 works just as well as the 9F9 (pale green) and the 6DA (Medium aqua) - they are all three equally illegible! ;)


    --------
    edit (17:22 30/07/2014 Zulu time):

    this is the new command to add a little life to the table; its starting to get better - still ugly, but getting better.
    Post edited by NikMak on
  • Basileus
    Basileus
    Posts: 585 edited July 2014
    Ah, you're using HTML to build your tables instead of the default Textile formatting, so things will be a bit more involved. There are a couple approaches.

    The simpler is to throw some inline CSS into the statement. Something like this:

    @@

    However if you want to do more with your table(s), you'll want to make it custom CSS for your campaign. A statement along the lines of:

    @.campaign-public-layout #content table {width:85%; text-align: center;}@

    If you want cell borders and some additional cell padding (always looks nice) as well, use this instead:

    @.campaign-public-layout #content table {width:85%; text-align: center; border-collapse: collapse;}
    .campaign-public-layout #content td, th {border: 1px solid green; padding: 1em;}@

    I'm not 100% on the selectors I used above (haven't gotten a chance to test).
    Post edited by Basileus on
  • NikMak
    NikMak
    Posts: 379
    hmm, '1em' for padding (in the individual cell i assume?) , what does that mean then?

    also if i do a set of CCS commands for the table, is that like a div call kind of command, so i need to call the 'table' as: div style="table" ?

    Cheers

    Nick
  • Basileus
    Basileus
    Posts: 585 edited July 2014
    As a general rule, 1 "em" is equal to the height of normal text characters (whatever that happens to be set at in your campaign). I find it to be a nice sizing when I can't use percentages and don't want to muck about with exact pixels - usually looks good too (nice balance of whitespace for things like padding).

    CSS is typically stored in a separate file from the webpage called a stylesheet. Obsidian Portal lets Ascendant users add custom CSS statements to the stylesheet for their campaign under Settings > Advanced > Custom CSS. So if you have access to this feature, you could just copy and paste those lines into that field and save. This is handy because it lets you apply styling across many elements across your campaign without modifying what you have on individual pages.

    The other way to use CSS is called "inline" CSS, where you are using HTML code (such as table, div, etc...) and add the "style=" statement inside the tag. Its quick and easy, and also the only option if you aren't an Ascendant member, but the downside is that you have to repeat the code every time you want to use it anywhere in your campaign (and only where you can add/edit HTML elements).

    Hopefully helpful?


    EDIT: -You know, if you aren't worried about blocking off part of the background image, you could set the "background-color" property on the table. That would help with the legibility. Something like this would be the inline CSS:-

    @@

    -I'd still recommend switching to a less saturated green for the links, but that's just my personal taste.-

    Nevermind, works on the table cells so inline would be a pain to set up.
    Post edited by Basileus on
  • NikMak
    NikMak
    Posts: 379 edited July 2014
    ok, the table definitely looks different... I think I like it... time will tell. I tried to put a parchment background in just for you Basileus, but it only shows every other line for some reason.

    https://the-great-pendragon.obsidianportal.com/wikis/groups-and-nations?campaign_id=the-great-pendragon

    also it turns out I do have one other table... slap bang on my home page! its so long since i messed with i forgot i used a table format. hey ho; as usual i fix one thing and break another! Any suggestion on how to align my nav buttons on the home menu to 'centre' ? it may be sleep deprivation, but I cant seem to figure it out!

    https://the-great-pendragon.obsidianportal.com/wikis/home-page

    ok, night all I will check back tomorrow

    Nick

    ------
    Edit 11:36 (31/07/2014) zulu time

    changed the fill from parchment to chainmail
    Post edited by NikMak on
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998

    Just trying to help out.

  • NikMak
    NikMak
    Posts: 379
    oh yeah, 'ER' not 'RE' in centre, doh!
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    OP uses American, not English, as a language....

    Just trying to help out.

  • NikMak
    NikMak
    Posts: 379
    yeah, Ive been using the 'ER' spelling for years on this site and others, but just could not make the mental switch over last night for some reason.. my English teacher would be proud! :)

    what does everyone think of the chain effect in the tables? I think the one in the 'groups' column works ok, but i think the front page one looks a bit naff...


    --------

    on an unrelated topic, I have finally started reformatting character portraits for the new (N)PC layout I'm planning - its a big job but I'm very pleased with the overall look of the things ( https://practice2.obsidianportal.com/characters ), once ive got it nailed and have converted all portraits to the new format I will set it up on the main KAP character pages... should only take about a year ;)
  • Basileus
    Basileus
    Posts: 585 edited July 2014
    If you wanted, you could assign a class to the table on the groups page and select only that class with your CSS. That way you could leave your front page table as it is/was.

    Basically, on the page you would add a "class=" statement into the table tag, like so:

    @@

    And then in the campaign CSS, modify the selector with the specific class, like this:

    @.campaign-public-layout #content table.classname@

    Above is pseudo-code.

    *

    For the every other line thing, I recall the Reforge added some default formatting to tables like this. I don't recall who formulated this code, but the fix I think was this:

    @#content tr:nth-child(even) {background-color: transparent;}@

    Should be suitable for copypasta.
    Post edited by Basileus on
  • SkidAce
    SkidAce
    Posts: 830 edited July 2014
    Here is some table code showing how you can have one color for a header, and two other alternating colors for rows.

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

    "Example":https://unconquered-kingdoms.obsidianportal.com/wikis/reactions-and-diplomacy
    Post edited by SkidAce on
  • Basileus
    Basileus
    Posts: 585
    Pretty slick looking!
  • NikMak
    NikMak
    Posts: 379 edited August 2014
    not had time to look at these yet, but will get back to you soon; many thanks for all the help :)

    ---------
    EDIT 19:38 (01/08/2014) Zulu time

    hmmm, thats quite a versatile way of doing thing; i will play around with it and see what happens; many thanks :)

    fyi - the '#content tr:nth-child(even) {background-color:transparent}' goes solid white instead of transparent for me
    Post edited by NikMak on
  • Bortas
    Bortas
    Posts: 645
    Sorry for the necro...

    I've been playing with some of the suggesttions above for "my own page":https://morwindl.obsidianportal.com/wikis/warden-of-ryndanhaven

    Can any body help me with why there is such a GIANT space between my text and the start of my table? The code looks like
    @* Skill points per level: 6 +INT modifier.

    .....
    @

    Regards,
    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • Thorvaldr
    Thorvaldr
    Posts: 141
    Bortas: Try adding a return between your list item for "Skill points per level" and "
  • Bortas
    Bortas
    Posts: 645
    That does reduce it, but it still seems like a mammoth space between the end of the text and the start of the table.

    Regards,
    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • Bortas
    Bortas
    Posts: 645
    Ah ha!

    I changed:
    @Listen, Ride, Search, Sense Motive, Spot, Survival, Swim, Tumble, Use Rope.
    * Skill points per level: 6 +INT modifier.

    *Level**BAB**Fort**Refl**Will**Special*@

    To:
    @Listen, Ride, Search, Sense Motive, Spot, Survival, Swim, Tumble, Use Rope.
    * Skill points per level: 6 +INT modifier.


    *Level**BAB**Fort**Refl**Will**Special*@

    As Thorvaldr suggested, which helped a bunch, but code inspection still showed a br in there. So I changed again to:
    @Listen, Ride, Search, Sense Motive, Spot, Survival, Swim, Tumble, Use Rope.
    * Skill points per level: 6 +INT modifier.

    *Level**BAB**Fort**Refl**Will**Special*@

    Bringing the first TR up onto the same row as my TABLE open did the trick! So much for coding conventions of the last 20 years for me! ;-)

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
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