12
\$\begingroup\$

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>
Improve this question
\$\endgroup\$

4 Answers 4

Reset to default
12
\$\begingroup\$

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>
Improve this answer
\$\endgroup\$
5
  • 2
    \$\begingroup\$ 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> \$\endgroup\$
    – Eric Anderson
    Jun 29, 2011 at 21:03
  • 2
    \$\begingroup\$ use td or th? th tag would be better for it I personally think \$\endgroup\$
    – user1211
    Jun 29, 2011 at 22:09
  • 2
    \$\begingroup\$ If you would like to use <th> tags, there's no problem with that, just don't put header tags within them. \$\endgroup\$
    – Eric Anderson
    Jun 30, 2011 at 1:11
  • \$\begingroup\$ @Eric: Yes, you got it right. I wanted to do the same as you mentioned. Thanks :) \$\endgroup\$
    – user1211
    Jun 30, 2011 at 14:17
  • 1
    \$\begingroup\$ @Fahad: Cool, I'm glad thing's are working out for you. Good luck learning HTML. :) \$\endgroup\$
    – Eric Anderson
    Jun 30, 2011 at 18:28
10
\$\begingroup\$

Something that wasn't mentioned was the Use of the Table header tags

If you want the Table headers it should look something like this

<tr>
    <th colspan="2">Food you love to eat</th>
</tr>
<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>

The Table headers need to be in a row.

I added a colspan property because I don't see that you are going to need two separate table headers for each column. if you have more than 2 columns and you want the header to stretch across all of them then replace "2" with the appropriate number of columns. you can mix and match as well, creating a th that spans the last two and not the first one, or however you need it.

Just because snippets are cool

table {
  border: 3px solid red;
  }
th {
  border: 3px double green;
  }
td {
  border: 3px dashed blue;
<table width="500px">
	<tr>
        <th colspan="2">Food you love to eat</th>
    </tr>
    <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

If you are listing multiple items that you "love to eat" then this would be a very good use of a table structure.

Improve this answer
\$\endgroup\$
2
  • 1
    \$\begingroup\$ Actually, this is mentioned in a comment on Eric's answer. \$\endgroup\$
    – Simon Forsberg
    Feb 13, 2014 at 14:49
  • \$\begingroup\$ @SimonAndréForsberg, not how to properly use th tags and that they are a special type of td tag that needs to be nested inside of a tr \$\endgroup\$
    – Malachi ♦
    Feb 13, 2014 at 14:51
4
\$\begingroup\$

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.

Improve this answer
\$\endgroup\$
6
  • \$\begingroup\$ Thanks. By this time I am almost done with html and css. Now PHP, Python and .NET on the way :) \$\endgroup\$
    – user1211
    Sep 8, 2012 at 5:37
  • \$\begingroup\$ Glad to hear. Sounds like you're moving along quickly! \$\endgroup\$
    – danchet
    Sep 10, 2012 at 15:54
  • 2
    \$\begingroup\$ where is the Review? \$\endgroup\$
    – Malachi ♦
    Feb 13, 2014 at 14:32
  • \$\begingroup\$ this does contain Data, this is actually a good use for a Table, especially if you want to add items dynamically. \$\endgroup\$
    – Malachi ♦
    Feb 13, 2014 at 14:45
  • 1
    \$\begingroup\$ This is such an over-discussed topic, I won't continue it here. Take a look at this thread. stackoverflow.com/questions/83073/… \$\endgroup\$
    – danchet
    Feb 13, 2014 at 18:33
3
\$\begingroup\$

You could change your doctype to HTML5:

<!DOCTYPE html>

You could also use a validator — http://validator.w3.org/ , which will highlight any syntax problems such as missing alt attributes, missing tr element around a td element, etc.

And since you have evolved since, you will find this resource useful: http://developers.whatwg.org/

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.