Help - Search - Members - Calendar
Full Version: tables within tables help
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
highthere
I am needing some help with creating tables within tables, I have read examples about it but are just kinda lost and cant figure out how to go about doing this. I have drawn a diagram of what im trying to figure out. If somebody could please help me to do this.

http://ghostclipart.info/index222.html

Darin McGrew
Based on your diagram, you don't need 4 tables. You need just one table.

Your diagram shows 3 rows:
CODE
<table>
<tr><!-- ... --></tr>
<tr><!-- ... --></tr>
<tr><!-- ... --></tr>
</table>


Let's start with the middle row, since it is the one that shows the most columns. It has 7 columns, but the third row divides the second row's 2nd and 6th columns. So let's make each of those two columns, and use colspan to join them. That gives us a total of 9 columns, like this:
CODE
<table>
<tr><!-- ... --></tr>
<tr>
  <td><!-- ... --></td>
  <td colspan="2"><!-- ... --></td>
  <td><!-- ... --></td>
  <td><!-- ... --></td>
  <td><!-- ... --></td>
  <td colspan="2"><!-- ... --></td>
  <td><!-- ... --></td>
</tr>
<tr><!-- ... --></tr>
</table>


Now we can do the first row, which spans all 9 columns. We can also do the third row, which has a cell that spans 2 columns on each end, and a cell that spans 5 columns in the middle:
CODE
<table>
<tr>
  <td colspan="9"><!-- ... --></td>
</tr>
<tr>
  <td><!-- ... --></td>
  <td colspan="2"><!-- ... --></td>
  <td><!-- ... --></td>
  <td><!-- ... --></td>
  <td><!-- ... --></td>
  <td colspan="2"><!-- ... --></td>
  <td><!-- ... --></td>
</tr>
<tr>
  <td colspan="2"><!-- ... --></td>
  <td colspan="5"><!-- ... --></td>
  <td colspan="2"><!-- ... --></td>
</tr>
</table>
Reedly
Darin, thanks for this diagram. While I feel fairly knowledgeable about tables, I learned something new with your layout. I was not aware that a table cell could "straddle" two separate cells in another row. Specifically, cell #2 and #6 in the second row. I was under the impression that even with the colspan attribute the cells had to line up with each other within separate rows.

So, again - thanks for this piece of knowledge!


Reed
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.