The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Need help with html5 tables.
htmlbeginner
post Sep 27 2015, 03:13 AM
Post #1





Group: Members
Posts: 1
Joined: 27-September 15
Member No.: 23,580
Hey guys,

I know this is very nooby, but I'm new to web designing and having some trouble replicating this picture! I have tried so many things for the past 2 hours. Can you guys help me to see what's wrong with my coding?? sad.gif

this is my coding:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Food Colours</title>
</head>

<body>

<h1>Fruits & Vegetables</h1>
<table border="1">

<tr>
<th colspan="2">Peppers</th>
<th colspan="4">Apples</th>
<th></th>

</tr>

<tr>
<td colspan="6"><img src="https://c2.staticflickr.com/6/5131/5572058548_f4f783b617_s.jpg"></td>
<td rowspan="2"><img src="https://c2.staticflickr.com/8/7208/6877124307_9afefc7644_s.jpg"></td>
<td rowspan="2"><img src="https://c2.staticflickr.com/4/3640/3461410603_304f7609a1_s.jpg"></td>
<td rowspan="2">Green</td>
</tr>

<tr>
<td colspan="6"><img src="https://c1.staticflickr.com/1/40/100625701_9e86f990c0_s.jpg"></td>
</tr>
</table>
<table border="1">
<tr>
<td><img src="https://c2.staticflickr.com/8/7269/7102418379_2c7c1d895e_s.jpg"></td>
<td><img src="https://c1.staticflickr.com/1/143/328059366_93714e5329_s.jpg"></td>

</tr>
</table>
</html>





and I'm supposed to replicate this
Attached Image

Thanks so much in advanced

This post has been edited by htmlbeginner: Sep 27 2015, 03:28 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 27 2015, 02:06 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Tables can be tricky to get your head around. You are missing a TR, a TD and two images, have one table too many and some rowspans and colspans are wrong. smile.gif

The easiest is, IMO, to start with a complete table grid, but empty. Your table should have 5 columns and 5 rows. Like this.


CODE
<table>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>



Then you start to enter content to one cell at the time, starting with the top left one. Work your way through one row at the time. When you need a colspan or rowpan you delete those cells that are no longer needed. This way it's easier to keep track of rows and columns than if you try to write it out as you want it right off.

You should end up with this.

CODE
<table border="1">
   <tr>
      <th colspan="2">Peppers</th>
      <th colspan="2">Apples</th>
      <th></th>
   </tr>
   <tr>
      <td colspan="2"><img src="https://c2.staticflickr.com/6/5131/5572058548_f4f783b617_s.jpg"></td>
      <td rowspan="2"><img src="https://c2.staticflickr.com/8/7208/6877124307_9afefc7644_s.jpg"></td>
      <td rowspan="2"><img src="https://c2.staticflickr.com/4/3640/3461410603_304f7609a1_s.jpg"></td>
      <td rowspan="2">Green</td>
   </tr>
   <tr>
      <td colspan="2"><img src="https://c1.staticflickr.com/1/40/100625701_9e86f990c0_s.jpg">y</td>
   </tr>
   <tr>
      <td><img src="https://c2.staticflickr.com/8/7269/7102418379_2c7c1d895e_s.jpg"></td>
      <td><img src="https://c1.staticflickr.com/1/143/328059366_93714e5329_s.jpg"></td>
      <td colspan="2" rowspan="2">Image is missing here</td>
      <td rowspan="2">Red</td>
   </tr>
   <tr>
      <td colspan="2">Image is missing here</td>
   </tr>
</table>


Also, use the validator and add alt texts to the images.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kelly008
post Oct 6 2015, 11:55 AM
Post #3


Newbie
*

Group: Members
Posts: 15
Joined: 1-April 15
Member No.: 22,440
Try to use <table> inside the <td> elements.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Kelly008
post Oct 6 2015, 11:56 AM
Post #4


Newbie
*

Group: Members
Posts: 15
Joined: 1-April 15
Member No.: 22,440
Try to use <table> inside the <td> elements. It will help you to style them independently.

This post has been edited by Kelly008: Oct 6 2015, 11:57 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 6 2015, 12:47 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
Why? There's no reason to nest tables for this.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 25th April 2024 - 01:11 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC