html layout

html layout probelm

Page 1 of 1

5 Replies - 885 Views - Last Post: 23 September 2008 - 01:41 PM

#1 dreamincodehamza  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: -12
  • View blog
  • Posts: 286
  • Joined: 12-September 08

html layout

Posted 12 September 2008 - 03:07 PM

i wanted to have different width of row one td's like
r1 first td havign width is 20% and other is 80%
and
row 5 first td width is 50% and remaing is 50%
but this is not appliy and workign
can any one help me thanks
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (wallpaper.psd) -->
<table width="750" height="750" border="1" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td width="750"><img src="images/index_01.jpg" width="404" height="72" alt=""></td>
		<td width="750"><img src="images/index_02.jpg" width="346" height="72" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" width="750"><img src="images/index_03.jpg" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="2"><img src="images/index_04.jpg" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" width="750"><img src="images/index_05.jpg" height="70" alt=""></td>
	</tr>
	<tr>
		<td width="200" height="750"> </td>
		<td background="images/spacer.gif"> </td>
	</tr>	
	<tr>
		<td colspan="2">footer</td>		
	</tr>	
</table>
<!-- End ImageReady Slices -->
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: html layout

#2 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 919
  • View blog
  • Posts: 6,443
  • Joined: 07-September 06

Re: html layout

Posted 12 September 2008 - 03:14 PM

The problem is that rows take up the same amount of space in a table, so if one is super wide all the other rows in the column are same width. If you want to have them different widths dependin obn the rows try something like so:

<table>
  <tr>
	<td>
	  <span style="width: 50%">Content</span>
	  <span style="width: 50%">More content</span>
	</td>
  </tr>
  <tr>
	<td>
	  ...
	</td>
  </tr>
</table>


That way you can specify for each of the table rows.

HTH
Was This Post Helpful? 0
  • +
  • -

#3 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 3873
  • View blog
  • Posts: 11,410
  • Joined: 18-April 07

Re: html layout

Posted 12 September 2008 - 03:20 PM

Yeah you won't be able to have two rows of the same table to have two different widths like that. But you have a few choices to get around this...

1) You can make a table within a table where the first row has the 20%/80% and then the 5th row be colspan="2" an in that cell create another table where the width of the table is 100% but that the cells are 50/50.

2) You could create your table to have 10 cells each 10% and have row 1 have a cell that colspans 2 columns followed by another that expands 8 columns. Then on the fifth row have one cell that colspans 5 and another cell that colspans 5.

3) Instead of using a table to organize the content you can instead go with more precise placement and organization with a CSS (cascading stylesheet) solution.

And you could try BetaWars example but instead of using <span> use <div> tags because width attribute in CSS is applied to block level elements which <span> is not.

But those are what I could think of off the top of my head. Hope one of them will work for you. :)
Was This Post Helpful? 0
  • +
  • -

#4 dreamincodehamza  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: -12
  • View blog
  • Posts: 286
  • Joined: 12-September 08

Re: html layout

Posted 21 September 2008 - 02:20 PM

Good suggestion but
can you change this piece of code
for me .
what you are saying just try to change this
code what every you are thinking
waiting for your reply
Was This Post Helpful? 0
  • +
  • -

#5 mohsinsha  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 18-September 08

Re: html layout

Posted 22 September 2008 - 09:26 PM

Try out this table.

<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (wallpaper.psd) -->
<table width="100%" height="750" border="1" cellpadding="0" cellspacing="0" align="center">
	<tr>
		<td width="20%"><img src="images/index_01.jpg" width="404" height="72" alt=""></td>
		<td width="80%"><img src="images/index_02.jpg" width="346" height="72" alt=""></td>
	</tr>
	<tr>
		<td colspan="2"><img src="images/index_03.jpg" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="2"><img src="images/index_04.jpg" height="26" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" width="750"><img src="images/index_05.jpg" height="70" alt=""></td>
	</tr>
	<tr>
		<td background="images/spacer.gif" colspan="2">
			<table cellpadding="0" cellspacing="0" border="1" width="100%" height="200">
				<tr>
					<td width="50%">abc
					</td>
					<td width="50%">xyz
					</td>
				</tr>
			</table>
		</td>
	</tr>	
	<tr>
		<td colspan="2">footer</td>		
	</tr>	
</table>
<!-- End ImageReady Slices -->
</body>
</html>


** Edit ** :code:

This post has been edited by no2pencil: 22 September 2008 - 09:27 PM

Was This Post Helpful? 0
  • +
  • -

#6 dreamincodehamza  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: -12
  • View blog
  • Posts: 286
  • Joined: 12-September 08

Re: html layout

Posted 23 September 2008 - 01:41 PM

Can anyone give me any example layout by using div and tables.
thanks in advance
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1