WordPress.org

Support

Support » Themes and Templates » [Resolved] Aligning Tables

[Resolved] Aligning Tables

  • 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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Do you have a plugin that provides Custom CSS functionality?

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

    Thanks

    In the Custom CSS section, add this;

    #container tbody {
     float: left;
    }

    Andrew,

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

    Peter

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

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

    Andrew,

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

    Peter

    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.

    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.

    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!

    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;
    }

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Aligning Tables’ is closed to new replies.
Skip to toolbar