Solved

Creating Tables on Webpage

Posted on 2011-03-16
12
370 Views
Last Modified: 2012-05-11
So, I have a blank page and I want to split the page with rows and colums by creating tables.  I did so just fine.  My real problem is:

when i create next row and split that row with 2 or 3 colums, they seem to move with the above row and column.  I unable to keep the above row and column fixed while i move the next row and column to fit my needs

is there anyway to fix a certain rows properties while the column in the next row is being changed?
0
Comment
Question by:kaushalk
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 16

Expert Comment

by:rbudj
ID: 35152787
Can you display your code? Keep in mind though that you need to specify a width for each data cell that equals the total width of the table including any borders and padding.
0
 

Author Comment

by:kaushalk
ID: 35152910
This is just part of the code from the beginning
<table id="Table_01" width="1000" height="526" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td height="397" colspan="4"><img src="images/General_01.gif" width="1000" height="397" alt=""></td>
	</tr>
	<tr>
		<td height="41" colspan="4">
			<img src="images/General_02.gif" width="1000" height="41" alt=""></td>
	</tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan="4" align="center" bgcolor="#e3f3bc"><span style="font-size: 20px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;"><strong>Duct Cleaning: The Rotobrush Way</strong></span></td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td width="82" bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc">What's inside my Duct?</td>
	  <td width="79" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc">Most people would gag if they could see what's inside their homes' ductwork. Here are just a few of the allergens, pathogens, and irritants commonly found inside HVAC ducts:</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td width="229" bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" width="15" height="15" align="absmiddle"> Dust</td>
	  <td width="610" bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Dirt</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Soil</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Animal Dander</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>

Open in new window

0
 
LVL 16

Expert Comment

by:rbudj
ID: 35152950
Noticed you are missing the end </tr></table> tags. In adding them back I am looking at your table. What row are you working on and what are you trying to do with it?
0
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 

Author Comment

by:kaushalk
ID: 35152954
so let's say i want to add an image in one of the colums, well the column width moves to fit the image but it also shift the columns above and below the row that i am working with
0
 
LVL 16

Expert Comment

by:rbudj
ID: 35153042
Yes. This is correct. This is the way tables work. If you did not want the cell to expand, the first thing you want to do is make sure you do not put an oversized image in the cell. If that is not possible then you will need to combine the cells in the other top or bottom rows, and then nest (insert a new table) inside that column to have stagering cells as compared to the rest of the table. Try the code below. I took the first "Dirt" row and nested a table. Now if you insert an oversized image next to the second Dirt, you will notice the row above keep its column widths.
<table id="Table_01" width="1000" height="526" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td height="397" colspan="4"><img src="images/General_01.gif" width="1000" height="397" alt=""></td>
	</tr>
	<tr>
		<td height="41" colspan="4">
			<img src="images/General_02.gif" width="1000" height="41" alt=""></td>
	</tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan="4" align="center" bgcolor="#e3f3bc"><span style="font-size: 20px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;"><strong>Duct Cleaning: The Rotobrush Way</strong></span></td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td width="82" bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc">What's inside my Duct?</td>
	  <td width="79" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc">Most people would gag if they could see what's inside their homes' ductwork. Here are just a few of the allergens, pathogens, and irritants commonly found inside HVAC ducts:</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" width="15" height="15" align="absmiddle">
      <table>
      <tr><td width="229">Dirt</td>
      <td width="610"></td>
      </tr>
      </table>
      </td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td width="229" bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Dirt</td>
	  <td width="610" bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Soil</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Animal Dander</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
      </tr>
      </table>

Open in new window

0
 

Author Comment

by:kaushalk
ID: 35153108
OK.  so i got the image fine.  please see attached image for visual explanation

if i move column B, it also moves column C or on the other side, if i move column A, it also moves column D.  how do i fix that?
Columns.pdf
0
 
LVL 16

Expert Comment

by:rbudj
ID: 35153291
That is correct. This is the way tables are. If you have one table and you specifiy the width for a data cell, that width will be applied to all other data cells in that table. The only way around this is to nest your tables. See this code. I did this for you in the D line. Try moving the other cells now and you will notice the nested table retains its cell widths.
<table id="Table_01" width="1000" height="526" border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td height="397" colspan="4"><img src="images/General_01.gif" width="1000" height="397" alt=""></td>
	</tr>
	<tr>
		<td height="41" colspan="4">
			<img src="images/General_02.gif" width="1000" height="41" alt=""></td>
	</tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan="4" align="center" bgcolor="#e3f3bc"><span style="font-size: 20px; font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;"><strong>Duct Cleaning: The Rotobrush Way</strong></span></td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td width="82" bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc">What's inside my Duct?</td>
	  <td width="79" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">
      <table width="1000">
      <tr>
      <td width="82">k</td>
      <td>Most people would gag if they could see what's inside their homes' ductwork. Here are just a few of the allergens, pathogens, and irritants commonly found inside HVAC ducts:</td>
      <td width="79">d</td>
      </tr>
      </table>
      </td>
  </tr>
	<tr>
	  <td colspan="4" bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td colspan="2" bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" width="15" height="15" align="absmiddle">
      <table>
      <tr><td width="229">Dirt</td>
      <td width="610"></td>
      </tr>
      </table>
      </td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td width="229" bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Dirt</td>
	  <td width="610" bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Soil</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
  </tr>
	<tr>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc"><img src="images/ltgrnball.gif" alt="" width="15" height="15" align="absmiddle"> Animal Dander</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
	  <td bgcolor="#e3f3bc">&nbsp;</td>
      </tr>
      </table>

Open in new window

0
 
LVL 16

Expert Comment

by:rbudj
ID: 35153336
btw, I will go ahead and be the first to say that you should not be using tables for layouts. If you are new to tables, you should spend the time learning CSS instead of tables for layouts. It is no more difficult to learn and understand and you will be much happier you did when you need to make changes. Just my suggestion because someone will always say this when you post a question about using tables as a layout.
0
 

Author Comment

by:kaushalk
ID: 35153337
Great.  So i my assumption that everytime i work with rows and colums that i need to nest a second within it to make sure that a particular row or column doesn't expand with others?
0
 

Author Comment

by:kaushalk
ID: 35153343
wow.  ok.  so i guess i should learn CSS, huh?
0
 
LVL 16

Accepted Solution

by:
rbudj earned 500 total points
ID: 35153351
That is correct. Any time you want columns to not line up with the main table, you must nest a table within that data cell. And yes. If you want to design your webpage the right way, you should learn CSS. Here is a resource to get you started: http://www.w3schools.com/css/default.asp
0
 

Author Comment

by:kaushalk
ID: 35153398
Thanks
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question