WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Aligning Tables (12 posts)

  1. pmb30
    Member
    Posted 1 year ago #

    Hello,

    I am creating tables in the Pinboard theme

    Any ideas I can align them next to each other (with some padding) as opposed to one below the other? Is this something to do with Pinboard theme CSS or can I adjust table settings?

    Thanks in advance

  2. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Do you have a plugin that provides Custom CSS functionality?

  3. pmb30
    Member
    Posted 1 year ago #

    Hi Andrew - the Pinboard theme has a Custom CSS section, don't have a seperate plugin

    Thanks

  4. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    In the Custom CSS section, add this;

    #container tbody {
     float: left;
    }
  5. pmb30
    Member
    Posted 1 year ago #

    Andrew,

    Thanks - that's done the trick - now they're aligned left, any idea how I can get horizontal padding between each table?

    Peter

  6. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Yeah, you can add some margin,
    E.g;

    #container tbody {
     float: left;
     margin-right: 20px;
    }
  7. pmb30
    Member
    Posted 1 year ago #

    Andrew,

    Brilliant, thanks for your prompt responses, timetables can now be sorted!

    Peter

  8. pmb30
    Member
    Posted 1 year ago #

    Code doesn't seem to work now and is as follows:

    <table style="width: auto; border: 1px solid #000;">
    <tbody>
    <tr>
    <td style="vertical-align: top; border: 1px solid #000; padding: 5px;" colspan="7">
    <p align="center"><span style="color: #000000;">March 2013</span></p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">M</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">T</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">W</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">T</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">F</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">S</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">S</td>
    </tr>
    <tr>
    <td valign="top" width="10"></td>
    <td valign="top" width="10"></td>
    <td valign="top" width="10"></td>
    <td valign="top" width="10"></td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">1</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">2</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">3</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">4</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">5</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">6</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">7</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">8</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">9</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">10</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">11</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">12</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">13</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">14</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">15</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">16</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">17</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">18</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">19</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">20</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">21</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">22</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">23</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">24</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">25</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">26</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">27</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">28</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">29</td>
    <td style="“vertical-align: top; width: 10px; border: 1px; background-color: #006d4c;"><span style="color: #ffffff;">30</span></td>
    <td style="“vertical-align: top; width: 10px; border: 1px; background-color: #006d4c;"><span style="color: #ffffff;">31</span></td>
    </tr>
    </tbody>
    </table>
    <table style="width: auto; border: 1px solid #000;">
    <tbody>
    <tr>
    <td style="vertical-align: top; border: 1px solid #000; padding: 5px;" colspan="7">
    <p align="center"><span style="color: #000000;">March 2013</span></p>
    </td>
    </tr>
    <tr>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">M</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">T</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">W</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">T</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">F</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">S</td>
    <td style="vertical-align: top; width: 10px; border: 1px solid #ddd; text-align: center; padding: 10px;">S</td>
    </tr>
    <tr>
    <td valign="top" width="10"></td>
    <td valign="top" width="10"></td>
    <td valign="top" width="10"></td>
    <td valign="top" width="10"></td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">1</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">2</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">3</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">4</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">5</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">6</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">7</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">8</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">9</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">10</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">11</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">12</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">13</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">14</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">15</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">16</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">17</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">18</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">19</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">20</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">21</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">22</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">23</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">24</td>
    </tr>
    <tr>
    <td style="“vertical-align: top; width: 10px; border: 1px;">25</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">26</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">27</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">28</td>
    <td style="“vertical-align: top; width: 10px; border: 1px;">29</td>
    <td style="“vertical-align: top; width: 10px; border: 1px; background-color: #006d4c;"><span style="color: #ffffff;">30</span></td>
    <td style="“vertical-align: top; width: 10px; border: 1px; background-color: #006d4c;"><span style="color: #ffffff;">31</span></td>
    </tr>
    </tbody>
    </table>

    http://www.kerrsminiaturerailway.co.uk/timetable-fares/

    Also a margin is created on the right on each table, presumably on 20px.

    Any ideas? Am sure it's a simple solution and very close to what I'm after.

  9. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    They are now separated out into two tables, before they were in one table.
    You need to change this;

    #container tbody {
     float: left;
     margin-right: 20px;
    }

    To this;

    #container table {
     float: left;
     margin-right: 20px;
    }

    CSS is dependent on HTML.

  10. pmb30
    Member
    Posted 1 year ago #

    Andrew, thanks, now works.

    Will have 12 seperate tables in all, so changing as so will do the trick.

    Just got to work out why there's a massive gap under March 2012 before M/T/W/T/F/S/S then I'm sorted!

  11. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    The gap's caused by the default styling applied to paragraphs; the calendar titles (March 2013, etc.) are in paragraphs.

    To override this default styling, try adding this CSS;

    #container table p {
     margin: 0;
    }
  12. pmb30
    Member
    Posted 1 year ago #

    Great, thanks very much Andrew, once again works a treat!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.