Aligning Tables

  • Resolved pmb30

    (@pmb30)


    12 years, 1 month 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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have a plugin that provides Custom CSS functionality?

    Thread Starter pmb30

    (@pmb30)

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

    Thanks

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the Custom CSS section, add this;

    #container tbody {
 float: left;
}

    Thread Starter pmb30

    (@pmb30)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

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

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

    Thread Starter pmb30

    (@pmb30)

    Andrew,

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

    Peter

    Thread Starter pmb30

    (@pmb30)

    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>

    https://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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@pmb30)

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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

    (@pmb30)

    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.