Title: Aligning Tables
Last modified: August 20, 2016

---

# Aligning Tables

 *  Resolved [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/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)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430170)
 * Do you have a plugin that provides Custom CSS functionality?
 *  Thread Starter [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430173)
 * Hi Andrew – the Pinboard theme has a Custom CSS section, don’t have a seperate
   plugin
 * Thanks
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430175)
 * In the Custom CSS section, add this;
 *     ```
       #container tbody {
        float: left;
       }
       ```
   
 *  Thread Starter [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430176)
 * Andrew,
 * Thanks – that’s done the trick – now they’re aligned left, any idea how I can
   get horizontal padding between each table?
 * Peter
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430178)
 * Yeah, you can add some [margin](http://www.w3schools.com/css/css_margin.asp),
   
   E.g;
 *     ```
       #container tbody {
        float: left;
        margin-right: 20px;
       }
       ```
   
 *  Thread Starter [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430179)
 * Andrew,
 * Brilliant, thanks for your prompt responses, timetables can now be sorted!
 * Peter
 *  Thread Starter [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430224)
 * 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/](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.
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430225)
 * 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.
 *  Thread Starter [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430226)
 * 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!
 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430228)
 * 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;
       }
       ```
   
 *  Thread Starter [pmb30](https://wordpress.org/support/users/pmb30/)
 * (@pmb30)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430229)
 * Great, thanks very much Andrew, once again works a treat!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Aligning Tables’ is closed to new replies.

 * 11 replies
 * 2 participants
 * Last reply from: [pmb30](https://wordpress.org/support/users/pmb30/)
 * Last activity: [13 years, 4 months ago](https://wordpress.org/support/topic/aligning-tables/#post-3430229)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
