up vote 3 down vote favorite
1

I am trying to learn by doing. Here is the first problem that I have solved. I have actually not done it perfectly. The table header should cover both the text and the image but it is only above text. If you can help me out with the design I will be thankful.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<table>
        <th ><h3>Food you love to eat</h3></th>
        <tr> 
                <td>I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.</td>
                <td width="170"> <img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" /> </td>
        </tr>
</table>
</body>
</html>
share|improve this question

2 Answers

up vote 4 down vote accepted

The HTML you submitted was invalid. I changed the following things so your html would be valid:

  1. Don't put <h3> tags inside a table. Header tags are used for headings only. Don't use headings to make text BIG or bold. Use CSS for positioning and font sizing.

  2. In a table, the <tr> tag is the first tag that should appear.

  3. In the <img> tag, the attribute alt is required. The alt attribute specifies alternate text for an image if the image cannot be displayed.

Your HTML validated:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
    <h3>Food you love to eat</h3>
<table>
        <tr> 
                <td>I love eating food . All types of food are good for health. I like fruits in them. Fruits are good for health.</td>
                <td width="170"> <img src ="http://www.htmliseasy.com/exercises/fruitbowl.gif" alt="Fruit Bowl" /> </td>
        </tr>
</table>
</body>
</html>
share|improve this answer
Now that I think of it, I believe I know why you put the <h3> tags in the table. This is how you go about doing what you were wanting: <td colspan="2" align="center"><font size="5"><b><i>Food you love to eat</i></b></font></td> – Eric Anderson Jun 29 '11 at 21:03
1  
use td or th? th tag would be better for it I personally think – Fahad Uddin Jun 29 '11 at 22:09
If you would like to use <th> tags, there's no problem with that, just don't put header tags within them. – Eric Anderson Jun 30 '11 at 1:11
@Eric: Yes, you got it right. I wanted to do the same as you mentioned. Thanks :) – Fahad Uddin Jun 30 '11 at 14:17
1  
@Fahad: Cool, I'm glad thing's are working out for you. Good luck learning HTML. :) – Eric Anderson Jun 30 '11 at 18:28
show 1 more comment
up vote 4 down vote

This is a great start, but I would recommend finding resources that are more up to date. Nowadays tables are largely reserved for containing data, rather than structuring pages or most content.

I highly suggest going to Youtube, and finding some starter videos containing HTML5. Table tutorials won't get you anywhere but 1996. Keep up the good work.

share|improve this answer
Thanks. By this time I am almost done with html and css. Now PHP, Python and .NET on the way :) – Fahad Uddin Sep 8 '12 at 5:37
Glad to hear. Sounds like you're moving along quickly! – danchet Sep 10 '12 at 15:54

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

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