Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points
Posted by Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Why is my coded HTML table formatting differently when input to wordpress website?

Hi,

I have made a simple timetable in HTML and CSS that I am putting into a page on a wordpress site. However I use a plug-in called "html snippet" and when I use this it formats the table slightly different. Are there any ideas as to how to go about this?

I also just tried plugging the HTML code straight into the text editor for the page but this completely horribly formatted it.

Below is a link to my code;

http://9c9.d51.myftpupload.com/group-tuition-2/?preview=true&preview_id=1698&preview_nonce=3c002adeae

2 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Link comes back as I don't have permission.

Without being able to see both what you have and what it's coming out as, I'd look for unexpected CSS properties overriding.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Hi,

Here is the code;

```<!doctype html> <html> <head> <title>South London Tutors</title>

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family:Arial, Helvetica, sans-serif;
        margin:0 auto;
        width:100%;
    }

    table th{

        border-bottom: 1px solid grey;
    }
    table td {

        border-right: 1px solid grey;
    }

    table{
        border-spacing:0;
    }

    th, td{
        text-align:center;
        padding:50px;
    }



</style>

</head>

<body> <table> <tr> <th class="header">Date/Time</th> <th class="header">Tutor/Teacher</th> <th class="header">Subject</th> <th class="header">Level</th> <th class="header">Topic</th> <th class="header">Book</th> </tr>

<tr>
    <td>12/1</td>
    <td><a href="">Mayur</a></td>
    <td>programming</td>
    <td>Level</td>
    <td>anytopic</td>
    <td style="border-right:none;">[stripe description="My Product" amount="1500"]
</tr>

<tr>
    <td>13/2</td>
    <td><a href="">Marcus</a></td>
    <td>Science</td>
    <td>Level</td>
    <td>anytopic</td>
    <td style="border-right:none;">[stripe description="My Product" amount="1500"]
</tr>

<tr>
    <td>13/2</td>
    <td><a href="">Marcus</a></td>
    <td>Science</td>
    <td>Level</td>
    <td>anytopic</td>
    <td style="border-right:none;">[stripe description="My Product" amount="1500"]
</tr>

<tr>
    <td>13/2</td>
    <td><a href="">Marcus</a></td>
    <td>Science</td>
    <td>Level</td>
    <td>anytopic</td>
    <td style="border-right:none;">[stripe description="My Product" amount="1500"]
</tr>

<tr>
    <td>13/2</td>
    <td><a href="">Marcus</a></td>
    <td>Science</td>
    <td>Level</td>
    <td>anytopic</td>
    <td style="border-right:none;">[stripe description="My Product" amount="1500"]
</tr>

</table>

</body> </html>

And here is a link to the image of the table on my wordpress (sorry I could not get it to display on the previous link for some reason, it was set to public so not sure what is happening there)

http://imgur.com/AogwTZl

As can be seen it brings in the extra light grey borders which I do not want. Not sure how to fix this?

Many thanks
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points
Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Sorry no it is not it seemed to chop some of, I have put it into the external link below;

http://www.textsnip.com/0u64hc

Many Thanks