HTML Table Formatting

ladycallistadaring
ladycallistadaring

So I'm brand new to formatting in all of its forms, but I've been doing ok so far.  I'm trying to include a table in one of my wiki pages. So far, I've figured out how to get the background color to match the overall background I put into the CSS ... but it's only affecting every other row, my font color has changed back to black, and there's a big white border around it..... erg.  I'm assuming I need to ... add the background-color bits to some other section in my formatting, but I can't get any of my guesses to work.  I'd also like the font to be white again, and to get rid of the border.  Any suggestions?

The page in question:   https://thewitheredrose.obsidianportal.com/wikis/drhadhakti

The table html I have at the moment:

<table>

<table style="background-color:rgba(8, 53, 68, 0.9)">

<tbody>

  <tr>

    <th>1d10</th>

    <th style="text-align:left;">Trait</th>

  </tr>

  <tr>

    <td>1</td>

    <td>You have an obsessive desire for a particular food or drink which your bonded spirit has consumed but you do not particularly enjoy.</td>

  </tr>

  <tr>

    <td>2</td>

    <td>You gesture wildly when speaking to your bonded spirit, but are generally a very restrained individual otherwise. </td>

  </tr>

  <tr>

    <td>3</td>

    <td>You sometimes say what your bonded spirit is thinking instead of expressing your own opinions, and later have to explain your contradictory words.</td>

  </tr>

  <tr>

    <td>4</td>

    <td>You occasionally speak in a language you don't understand, especially during times of high emotion or stress.</td>

  </tr>

  <tr>

    <td>5</td>

    <td>You always respond to your bonded-spirit out loud, and aren't aware that other people can't hear the spirit's side of the conversation.</td>

  </tr>

  <tr>

    <td>6</td>

    <td>You sometimes laugh at inappropriate times, and later can't explain why.</td>

  </tr>

  <tr>

    <td>7</td>

    <td>You have two "favorites" (food, color, clothing, etc) that changes at the drop of a hat.  You no longer remember which is your favorite and which is your bond spirit's.</td>

  </tr>

  <tr>

    <td>8</td>

    <td>You occasionally remember events or people that you have neither experienced or met.</td>

  </tr>

  <tr>

    <td>9</td>

    <td>You sometimes display extreme emotional reactions to stimuli that is outside of your own experience.</td>

  </tr>

  <tr>

    <td>10</td>

    <td>You have two traits, roll again and take both results. No matter how many times you roll a "10" you can only ever have two traits.</td>

  </tr>

</tbody>

</table>

 

Comments

  • Kallak
    Kallak
    Posts: 1,090

    To combat the issue of the table striping (the every other row issue), you're going to want to add some CSS to target your tr elements on an even/odd basis. You do this with the nth-child selectors. One for tr:nth-child(even) one for tr:nth-child(odd). If you check out w3schools, they've got a decent writeup on table styling, with "try it yourself" areas so you can play with it.

    Once you've got your background colors situated, you just need to overwrite the default font color for table, tr and td elements. If you still need help after looking at that, let me know.

    All the best,
    - Kallak
  • ragnarhawk
    Posts: 168

    I have had a lot of luck getting tables looking the way I want using DivTable.com.  It generates the table HTML and the CSS.  If you want to use inline CSS you can then copy the styles over from the CSS section.  Otherwise you should be able to use the CSS feature of an Ascendant subscription to set it up as an option across the whole campaign.

  • ladycallistadaring
    ladycallistadaring
    Posts: 7

    So I very vaguely understand what you're both saying, but I'm putting the info in the wrong spot or bracketing incorrectly or something... 

    Inline CSS would be using HTML with

    <style>

    </style>

    and putting the CSS coding between those (yes?no?) then applying that to the page itself, as opposed to the entire campaign?

    I've tried that. Nada. I've also tried the advanced CSS on the settings page and gotten jack.  I clearly have an education gap here somewhere.

    I've been poking about with w3schools and divtable, and figured out a few other minor changes, but this one is stumping me still. I have succesfully used your suggestions on those websites, gotten the results I want in the previews, but when it comes time to port it over to OP, nothing changes.  I'm probably missing a single punctuation mark or something.. 

  • ragnarhawk
    Posts: 168 edited March 2020
    I just realized that what I had here was not particularly helpful.

    New post follows
    Post edited by ragnarhawk on
  • ragnarhawk
    Posts: 168

    You need to update each tr with this:

     <tr style="background-color:rgba(8, 53, 68,.1);">

    and each td with: 

     <td style="color:white;">

    This should get you something close to the results that you want.  I set the opacity on the background to .1 so that they don't stack noticeably - otherwise the rows end up much darker

  • ragnarhawk
    Posts: 168

    Also, if you add 

    border:none; border-collapse:collapse;

    to the style section for the table, it will remove all borders

  • ladycallistadaring
    ladycallistadaring
    Posts: 7

    That's amazing.  Thank you very much Ragnar.  It makes a ton of sense, now that I'm seeing the changes happen one by one that I'd need each line edited.  I kept trying to include it high in the table style like the border suggestion you made, like an override.  I should be able to fiddle with it from here till I get exactly what I want.  I really appreciate it

  • Kallak
    Kallak
    Posts: 1,090

    @ladycallistadaring, I'm liking the overall aesthetic you've got going. Obviously there's still some work to do, but it's a really solid start. Looking forward to seeing more.

    All the best,
    - Kallak
  • ladycallistadaring
    ladycallistadaring
    Posts: 7

    @kallak Thanks so much!  This is the first time I've had multiple months to prepare a new game before play starts. It's been really fun.  I'm trying to make one major (and several minor) updates each week so by the time we get to character creation and talking about what kind of game the PCs want to run, I'll have a really well fleshed out wiki/game setting for them to play around with and get inspired by.  I feel like I'm getting to use OP the way I wanted to from the first time I saw it several years ago.

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