adding a table

  • Resolved dutchguru

    (@dutchguru)


    14 years, 11 months ago

    Because the default editor (Tinymce) has no table facility, I’ve setup a table in the html part like this :
    ———>
    <table style=”border-right: 3px outset orange; border-bottom: 3px outset orange; width: 220px; float: left; margin-right: 10px; font-size: 9pt; border-collapse: collapse;” border=”0″ summary=”measure-table”>
    <tbody>
    <tr style=”background-color:#FDF9F1;”>
    <td style=”width: 20%; font-size: 9pt;”>xxs</td>
    <td style=”width: 40%; font-size: 8pt;”>M 70-78</td>
    <td style=”width: 40%; font-size: 8pt;”>V 66-74</td>
    </tr>
    <tr style=”background-color:#CCCCCC;”>
    <td style=”width: 20%; font-size: 9pt;”>xs</td>
    <td style=”width: 40%; font-size: 8pt;”>M 78-86</td>
    <td style=”width: 40%; font-size: 8pt;”>V 74-82</td>
    </tr>
    <tr style=”background-color:#FDF9F1;”>
    <td style=”width: 20%; font-size: 9pt;”>s</td>
    <td style=”width: 40%; font-size: 8pt;”>M 86-94</td>
    <td style=”width: 40%; font-size: 8pt;”>V 82-90</td>
    </tr>
    <tr style=”background-color:#CCCCCC;”>
    <td style=”width: 20%; font-size: 9pt;”>m</td>
    <td style=”width: 40%; font-size: 8pt;”>M 94-102</td>
    <td style=”width: 40%; font-size: 8pt;”>V 90-98</td>
    </tr>
    <tr style=”background-color:#FDF9F1;”>
    <td style=”width: 20%; font-size: 9pt;”>l</td>
    <td style=”width: 40%; font-size: 8pt;”>M 102-110</td>
    <td style=”width: 40%; font-size: 8pt;”>V 98-106</td>
    </tr>
    <tr style=”background-color:#CCCCCC;”>
    <td style=”width: 20%; font-size: 9pt;”>xl</td>
    <td style=”width: 40%; font-size: 8pt;”>M 110-118</td>
    <td style=”width: 40%; font-size: 8pt;”>V 107-119</td>
    </tr>
    <tr style=”background-color:#FDF9F1;”>
    <td style=”width: 20%; font-size: 9pt;”>xxl</td>
    <td style=”width: 40%; font-size: 8pt;”>M 118-129</td>
    <td style=”width: 40%; font-size: 8pt;”>V 119-131</td>
    </tr>
    <tr style=”background-color:#CCCCCC;”>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr style=”background-color:#FDF9F1;”>
    <td style=”width: 20%; font-size: 9pt;”>3xl</td>
    <td style=”width: 40%; font-size: 8pt;”>M 129-141</td>
    <td style=”width: 40%; font-size: 8pt;”>V 131-143</td>
    </tr>
    <tr style=”background-color:#CCCCCC;”>
    <td style=”width: 20%; font-size: 9pt;”>4xl</td>
    <td style=”width: 40%; font-size: 8pt;”>M 141-154</td>
    <td style=”width: 40%; font-size: 8pt;”>V 143-155</td>
    </tr>
    <tr style=”background-color:#FDF9F1;”>
    <td style=”width: 20%; font-size: 9pt;”>5xl</td>
    <td style=”width: 40%; font-size: 8pt;”>M 154-166</td>
    <td style=”width: 40%; font-size: 8pt;”>V 155-167</td>
    </tr>
    </tbody></table>
    <——–

    In the WYSIWYG-part of the editor it looks completely correct, every row has it’s own background-color.
    Only displaying after publish : the table has one – other – color, each row the same, and only if one moves the mouse over the table, hovering the row will result in a specific other color.
    Has WordPress it’s own hidden format for table – layout ???

Viewing 6 replies - 1 through 6 (of 6 total)
  • figaro

    (@figaro)

    14 years, 11 months ago

    You do have one row with no text entered that’s collapsed, but other than that, it seems to be displaying okay here:

    http://educhalk.org/blog5/

    Thread Starter dutchguru

    (@dutchguru)

    14 years, 11 months ago

    Thanks , figaro, for your help. I used this kind of table layout earlier in standard html, in the default wordpress editor it looks good, but not in the wordpress layout. Your answer and example was reason to check the CSS of the template : Arclite template, indeed, table layout was included.

    I removed it as comment, and the result was > just as in your example.
    That is the solution BUT, normally inline CSS goes over the standard CSS-sheet. Do you have an idea, why in this particular situation, the inline CSS is ignored ?

    (in my Firefox developer-screen/pagesource all inline-CSS looks good)

    Mark / t31os

    (@t31os_)

    14 years, 11 months ago

    Easiest way to see if the inline CSS is taking priority or not is to add..

    !important
    EXAMPLE
    style="color:red!important"

    If the inline styling then works, then you know something else is taking priority over the inline styling normally..

    Thread Starter dutchguru

    (@dutchguru)

    14 years, 11 months ago

    Hi t31os_,

    regarding to CSS in my experience building static (x)html pages, the priority is:
    1 – external css sheet
    2 – css in the header of the html
    3 – inline css
    where 3 has the highest prio, tested many times in IE and FF.

    New for me, included in WordPress ( I’m totally new in WordPress) as CMS, is working with layout-templates and database-templates. It’s a matter of understanding how it works.

    Mark / t31os

    (@t31os_)

    14 years, 11 months ago

    I’m not totally sure in honesty, but i believe what you have is right…

    Had a look here, but couldn’t figure out an absolute answer…

    http://www.w3.org/TR/REC-html40/present/styles.html

    The !important test will just help determine if the inline styling is working, if it does with !important, then something else is over-riding the styling when it’s not being used…..

    Thread Starter dutchguru

    (@dutchguru)

    14 years, 11 months ago

    The !important test > sure, I agree to that.

    But if……. already the highest prio using, what could overule it?
    It’s my lack of knowledge, not understanding the prio’s of templates.

    Nevertheless, I stumbled upon this page : cascading-order-and-inheritance-in-css , it might have the solution, have to study on it.
    Thanks for helping.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘adding a table’ is closed to new replies.

Tags