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

HTML HTML Tables Table Basics Create a Basic Table

Posted by Hyun Tae Choi
Hyun Tae Choi
1,747 Points

I am using Sublime Text 2 to code

I am using sublime text 2 to code and when I finish coding and preview what I have coded, the preview looks very different from the example given from the video. For example, the table is aligned to the far left corner of the page rather than being centered. Any idea why this might be happening? Any suggestion would be appreciated.

Thank you.

Mike Hickman
Mike Hickman
19,817 Points
Mike Hickman
Mike Hickman
19,817 Points

Hi Hyun,

Would you mind posting your code so we could take a look and try to help?

Thanks, Mike

Hyun Tae Choi
Hyun Tae Choi
1,747 Points

Hi Mike,

Here's the code.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Employee Information</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body>

<table>
  <tr>
    <td>Name</td>
    <td>E-mail</td>
    <td>Job Role</td>
  </tr>
</table>

</body> </html>

4 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Hyun,

The positioning of the table is all down to CSS, I'm not sure how far along in the course you are but maybe if your watching the video on tables and you have missed some lessons on CSS positioning or you have not reached those lessons yet, then that is why your positioning is different from the tutors.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Hyun,

Do you get the same results when previewing the site in different browsers?
Have you tried pasting your code into workspaces to see how it looks?

Hyun Tae Choi
Hyun Tae Choi
1,747 Points

Yes, I have tried it on Safari and Firefox but get the same results. It looks great if I post the code on workspaces, it's just when I try previewing it through sublime text 2 that the problem occurs.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

It could be something to do with the location of your CSS file in the sublime text folder then. If it works in workspace but not in sublime that seems like the problem to me.
Can you double check the location of the CSS file in your sublime folder and the path in your HTML.

Hyun Tae Choi
Hyun Tae Choi
1,747 Points

I just downloaded the file, "more-table-tips" and opened the files with sublime text 2 without changing any of the coding. Then saved the file onto my desktop and tried opening it on my browser to preview it and the problem is still occurring.

Jeremy Lindstrom
Jeremy Lindstrom
6,646 Points
Jeremy Lindstrom
Jeremy Lindstrom
6,646 Points

make sure your css is loading, put something like 

* { 
    background-color:red;
 }

and make sure it's loading properly.

Prashant Kumar
Prashant Kumar
1,992 Points
Prashant Kumar
Prashant Kumar
1,992 Points

It just because your code is executing without CSS file. Copy the CSS codes from the workspace and save them in the same folder and in header link them. Your codes will look similar.