1

The following table is displaying correctly in the back-end. Why is it not displayed correctly in the front-end?

<table border="1" style="margin: 0px; padding: 0px; z-index: 0; text-align: center; width: 833px; height: 204px;" cellspacing="1" cellpadding="1">
                <tbody style="margin: 0px; padding: 0px; z-index: 0;">
                    <tr style="margin: 0px; padding: 0px; z-index: 0;">
                        <td rowspan="2" style="margin: 0px; padding: 0px; z-index: 0;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td>
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><strong style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">&nbsp; REGULAR&nbsp; <br /></span></span></span></strong>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0;">&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</td>
                        <td colspan="3" style="margin: 0px; padding: 0px; z-index: 0; text-align: center;"><strong style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">&nbsp; ASSOCIATE &nbsp;&nbsp; <br /></span></span></span></strong>
                        </td>
                        <td rowspan="2" style="margin: 0px; padding: 0px; z-index: 0;"><strong style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">&nbsp;&nbsp; MOTORSPORTS&nbsp;&nbsp; <br /></span></span></span></strong>
                        </td>
                    </tr>
                    <tr style="margin: 0px; padding: 0px; z-index: 0;">
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Individual &nbsp;&nbsp;</span></span> </span>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0; text-align: center;">&nbsp; &nbsp;<span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;">&nbsp; <span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;">PIDP&nbsp; &nbsp; </span></span>
                            </span><strong style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><br /></span></span></strong>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">Individual</span></span> </span>
                        </td>
                        <td colspan="2" style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; color: #000080;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: medium;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">Group</span></span> </span>
                        </td>
                    </tr>
                    <tr style="margin: 0px; padding: 0px; z-index: 0;">
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: small;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">ERS interventions per year</span></span>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: small;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">4 interventions or 100 km tow distance whichever comes first</span></span>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: small;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">4 interventions or 100 km tow distance whichever comes first</span></span>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: small;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">3 interventions or 60 km tow distance whichever comes first</span></span>
                        </td>
                        <td colspan="2" style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">2 interventions or 40 km tow distance whichever comes first</span></span>
                        </td>
                        <td style="margin: 0px; padding: 0px; z-index: 0; text-align: center;"><span style="margin: 0px; padding: 0px; z-index: 0; font-size: small;"><span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">4 interventions or 100 km tow distance whichever comes first</span></span>
                        </td>
                    </tr>
                </tbody>
            </table>

closed as off-topic by Farahmand, johanpw, Lodder, Valentin Despa Dec 29 '15 at 20:43

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This question does not appear to be about Joomla! administration and development, within the scope defined in the help center" – Farahmand, johanpw, Lodder, Valentin Despa
If this question can be reworded to fit the rules in the help center, please edit the question.

  • At the back end it is OK/fixed and I tried to create a new table in article it is still the same. At the back it is good and fixed, but in front/live it is disarrange. Thank you for the response. – Dee Dec 29 '15 at 7:13
  • Hint: You may want to do some research on colspan which you're using on your td elements. – Lodder Dec 29 '15 at 14:14
  • Have edited to emphasise the Joomla part of the question which is being drowned out by ugly in-line table styling. – Neil Robertson Dec 30 '15 at 9:56
3

The most likely cause that your table looks different in the front-end is table styling in your template.css file or similar.

As it is, much of the existing styling code is duplicated and hard to read and you would be better moving as much of the styling information as possible into CSS.

Ideally, custom CSS should be placed in a custom.css file or similar (assuming your template has this feature) or you could add a custom CSS file using a third party extension like CSSConfig or similar.

For example you could simplify your table cell HTML from this:

<td style="margin: 0px; padding: 0px; z-index: 0; text-align: center;">
  <span style="margin: 0px; padding: 0px; z-index: 0; font-size: small;">
    <span style="margin: 0px; padding: 0px; z-index: 0; font-family: Arial;">
      4 interventions or 100 km tow distance whichever comes first
    </span>
  </span>
</td>

to this:

<td>
  4 interventions or 100 km tow distance whichever comes first
</td>

by creating some CSS like this:

td {
  margin: 0px;
  padding: 0px;
  z-index: 0;
  text-align: center;
  font-size: small;
  font-family: Arial;
}

Once simplified as per the above example, it will likely be easier to see why the table looks different in the front-end and be able to fix it easily in CSS.

2

Keep in mind that creating constant layouts with tables isn't that easy or flexible and also can easily break. Especially when you are using too much inline-css and try to fill in cell's space with non-breaking spaces. Also regarding any differences you see in the front-end, consider that your table most likely is affected by css that is loaded with your template.

The best approach would be to have a totally plain table, containing only the data, give this table a special class or id, and then target and style it with css from an external css file e.g. custom.css of your template.

Not the answer you're looking for? Browse other questions tagged or ask your own question.