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>
\$\endgroup\$
13
\$\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>
\$\endgroup\$
  • 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 '11 at 21:03
  • 2
    \$\begingroup\$ use td or th? th tag would be better for it I personally think \$\endgroup\$ – Fahad Uddin Jun 29 '11 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 '11 at 1:11
  • \$\begingroup\$ @Eric: Yes, you got it right. I wanted to do the same as you mentioned. Thanks :) \$\endgroup\$ – Fahad Uddin Jun 30 '11 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 '11 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.

\$\endgroup\$
  • 1
    \$\begingroup\$ Actually, this is mentioned in a comment on Eric's answer. \$\endgroup\$ – Simon Forsberg Feb 13 '14 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 '14 at 14:51
5
\$\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.

\$\endgroup\$
  • \$\begingroup\$ Thanks. By this time I am almost done with html and css. Now PHP, Python and .NET on the way :) \$\endgroup\$ – Fahad Uddin Sep 8 '12 at 5:37
  • \$\begingroup\$ Glad to hear. Sounds like you're moving along quickly! \$\endgroup\$ – danchet Sep 10 '12 at 15:54
  • 2
    \$\begingroup\$ where is the Review? \$\endgroup\$ – Malachi Feb 13 '14 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 '14 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 '14 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/

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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