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

Posted by Louise O'Brien
Louise O'Brien
425 Points

HTML table extra cell

Hi there,

I am trying o build a simply HTML email and I seem to have an extra cell, I don't know why it is there. I am using the code of another HTML email as a base and HTML beginner. In the second row, between the first and second cell there is a huge extra cell creating a large gap between the first and second. Here is the code:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
</head>

<body style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; color: #818181; background-color: #ffffff; margin: 0; padding: 0;" bgcolor="#000000">
<table cellpadding="0" cellspacing="0" border="0" width="100%"><tr>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; color: #818181;">
            <table cellpadding="0" cellspacing="0" border="0" width="600" align="center">


<tr> 
<td width="600" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/header.jpeg" width="600" height="75" alt="revolution" border="0" style="display: block;"></td> 
</tr>

<tr> 
<td width="91" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/link_1.jpeg" width="91" height="75" alt="cocktails" border="0" style="display: block;">
</td>

<td width="91" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/link_2.jpeg" width="75" height="75" alt="cocktails" border="0" style="display: block;">
</td>

<td width="91" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/link_3.jpeg" width="108" height="75" alt="cocktails" border="0" style="display: block;">

<td width="91" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/link_4.jpeg" width="56" height="75" alt="cocktails" border="0" style="display: block;">
</td>

<td width="91" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/link_5.jpeg" width="132" height="75" alt="cocktails" border="0" style="display: block;">
</td>

<td width="91" style="font-family: Helvetica, Arial, sans-serif; font-size: 25px; font-weight: normal; color: #ffffff; line-height: 1.1em;"> <img src="images/link_6.jpeg" width="138" height="75" alt="cocktails" border="0" style="display: block;">
</td>
</tr>

</body>
</html>

Is anybody able to help? Thank you

Louise O'Brien
Louise O'Brien
425 Points

That is not the whole code how do I delete this question?

Stanley Thijssen
Stanley Thijssen
22,831 Points

are you just testing in the browser or are you testing in a e-mail client?

Stanley Thijssen
Stanley Thijssen
22,831 Points

you can edit your question to post the full code

Konrad Pilch
Konrad Pilch
2,435 Points

Inspect your element and magnifice glass put on the extra cell. You do that be right click and inspect element and then on the left of it, look for a magnify glass and select the extra cell and look oin it in the source etc.. just do something and see the effects.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Louise O'Brien, I've added a code block to your question to make it possible for others to see the actual HTML code.

Please refer to the Markdown Cheatsheet linked under the text box for questions/answers/comments for instructions on how to add code blocks.

3 Answers

Alice Thompson
Alice Thompson
8,970 Points
Alice Thompson
Alice Thompson
8,970 Points

A couple things that I noticed right away:

I don't see your closing </table> tag. That should go at the bottom of your table information (before the closing body tag).

If I'm looking at your code correctly, you're missing several <tr> and <td> tags. Make sure that each <tr> has a closing </tr> and each <td> has a closing </td>.

Also, you don't need to declare the font style in each table row if it's the same throughout your table. It's just redundant code. It looks like you've declared the font family at the beginning of your body style and again at the beginning of your table. Remove the rest if it's the same font.

Those are the main things I see at a quick glance of your code.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Hi Alice Thompson, I had to edit your answer to escape the angle brackets, otherwise the HTML tags you're trying to display are actually getting converted into real HTML!

You use the following HTML entities to print the angle brackets:

&lt; = <
&gt; = >
Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Looks like you have a table nested within another table, but only one closing table tag.

Try indenting each new tag with two spaces and on it's own line, and with each closing tag also on its own line. Then you should be able to spot where you're missing the closing tags.

Alice Thompson
Alice Thompson
8,970 Points
Alice Thompson
Alice Thompson
8,970 Points

Thanks Iain. Sorry for the confusion. (My first time posting here).