Resize columns and put colour in a table heading

  • Unknown's avatar
    catherineandalex · Member ·

    I am struggling with two aspects of tables – column width and putting colour into the first row.

    This is the coding I have for four rows and two columns. The first row is merged across two columns. The table has colour but I am wanting to make the first row a different colour as well as having different column widths. I have reduced the size of the table to 80% of the space available.

    <tbody>
    <tr>
    <td style=”text-align: center;” colspan=”2″>Heading</td>
    </tr>
    <tr>
    <td width=”20%”>Great parent</td>
    <td width=”80%”>John Joe</td>
    </tr>
    <tr>
    <td width=”20%”>Grandparent</td>
    <td width=”80%”>Paddy Mac</td>
    </tr>
    <tr>
    <td width=””>Parent</td>
    <td width=”80″>PJ</td>
    </tr>
    </tbody>
    </table>

    I am using the free theme Toujours with WordPress.com

    Any enlightenment would earn my undying gratitude!
    Thanks.

    Linked to: https://en.forums.wordpress.com/topic/help-with-html-columns?replies=16#post-2861464

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Can you also link us to your post? It’ll help us to see this in context. Thanks :)

  • Unknown's avatar
    catherineandalex · Member ·

    Hi supernova

    I have two tables in the linked page that I want to tidy up
    https://wordpress.com/page/nicholsonfamilyhistory.wordpress.com/4

    Please see page 9 of the attached for an example of what I want to achieve:
    https://www.dropbox.com/s/c4g9gb5bmbzfq7x/STOAKES%20FAMILY%20TREE%20AND%20SCRAPBOOK%20in%20Word%20%20Mar%202012.pdf?dl=0

    The objective is to record my family tree as a interesting website and accessible to friends and family rather than have it as a pdf.

    Many thanks.

  • supernovia · Staff ·

    That sounds like a great project :) Can you try this for the first part of your code?

    <table style="border-collapse: collapse; border-spacing: 0; margin: 0 auto; background-color: #ffffe0;">
<tbody>
<tr>
<th style="font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; padding: 5px 20px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; text-align: center; vertical-align: top; background-color: black; color: white;" colspan="3">The Person</th>
</tr>

    You’ll want to use links like this instead, since the one you sent isn’t public.
    https://nicholsonfamilyhistory.wordpress.com/ancestors-deerpark/

  • Unknown's avatar
    catherineandalex · Member ·

    Hi supernova. This works for the header – many thanks. I’m still stuck with getting the columns widths of different sizes, i.e. column 1 = 20% and column 2 = 80% or the balance. I have tried various combinations that work when looking at various websites but when I copy them through to my file they revert to same size columns. Example of website http://www.corelangs.com/html/tables/width-height.html
    Maybe I’m not inserting the code in the correct part of the table which now looks like the below.

    <tbody>
    <tr>
    <th style=”font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; padding: 5px 20px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal; text-align: center; vertical-align: top; background-color: black; color: white;” colspan=”2″>The Person</th>
    </tr>
    <tr>
    <td width=”20%”>Great parent</td>
    <td width=”80%”>John Joe</td>
    </tr>
    <tr>
    <td width=”20%”>Grandparent</td>
    <td width=”80%”>Paddy Mac</td>
    </tr>
    <tr>
    <td width=”20%”>Parent</td>
    <td width=”80%”>PJ</td>
    </tr>
    </tbody>
    </table>

    Appreciate any advice you can provide.
    As usual, many thanks for your efforts.

  • supernovia · Staff ·

    I noticed as soon as I use colspan above the cells, my cell widths are thrown out. This appears to be a browser bug, however I’m finding consistent behavior between multiple browsers, so perhaps there’s some standard I’m missing.

    I did find a better way to go about it though. Try something like this:

    <table style="background-color: #ffffe0; table-layout: fixed; width: 80%;">
  <caption style="background-color: black; color: white;">Something</caption>
  <tr>
    <td style="width: 20%">This one should be 20%</td>
    <td>This one should be 80% since that's what is left of the full width. No need to specify a width in this case.</td>
  </tr>
  <tr>
    <td>No need to specify a width because the cell above has it covered for me.</td>
    <td>This will be 80% -- just like the cell above it.</td>
  </tr>
</table>
  • Unknown's avatar
    catherineandalex · Member ·

    Perfect! This is example what I want. Many many thanks.

  • supernovia · Staff ·

    You bet. And if you ever get a plan that allows CSS (it comes with Premium) you can dramatically reduce the amount of code needed. Let us know if you go that route and we’ll help you get that trimmed down. Cheers!

  • Unknown's avatar
    catherineandalex · Member ·

    Difficulty with Premium is that it is a monthly fee rather than a once off fee. I have five static sites (not blogs or interactive sites) so, as a private individual, not a business, I don’t want to pay a monthly fee per site or for a number of sites that are essentially an online filing cabinet. I do realise Premium would make my life a lot easier but at an ogoing cost and I intend leaving the family history websites as a legacy to my family and subsequent generations! Does WordPress offer an archival facility for a once off fee?

  • supernovia · Staff ·

    Oh it’s actually charged once per year, plus you get chat-based support 24 hours on business days.

    We don’t have any built-in ways to charge multiple years at once, but you could ask a happiness engineer to invoice you for extra years.

  • The topic ‘Resize columns and put colour in a table heading’ is closed to new replies.