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>
Malachi
29k11 gold badges86 silver badges188 bronze badges
asked Jun 29, 2011 at 20:37
\$\endgroup\$

4 Answers 4

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>
palacsint
30.3k9 gold badges82 silver badges157 bronze badges
answered Jun 29, 2011 at 20:55
\$\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\$ Commented Jun 29, 2011 at 21:03
  • 2
    \$\begingroup\$ use td or th? th tag would be better for it I personally think \$\endgroup\$ Commented 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\$ Commented Jun 30, 2011 at 1:11
  • \$\begingroup\$ @Eric: Yes, you got it right. I wanted to do the same as you mentioned. Thanks :) \$\endgroup\$ Commented 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\$ Commented 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.

answered Feb 13, 2014 at 14:45
\$\endgroup\$
2
  • 1
    \$\begingroup\$ Actually, this is mentioned in a comment on Eric's answer. \$\endgroup\$ Commented 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\$ Commented 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.

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

answered Feb 13, 2014 at 23:33
\$\endgroup\$

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.