Jump to content

html layout


hamza

Recommended Posts

help me with this width's of td 's are not setting according to given width

 

<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) -->

PROBLEM:<br>

----------

<br>

the actual problem is in both rows the width of the td is not setting at all

please help me out and set the with of two td's according to specification

thanks

<hr><br><br>

<table width="100%" border="1" align="center">

<tr>

<td width="20%">r1 c1 (width should be 20%)</td>

<td width="80%"> r1 c2 (width should be 80%) </td>

</tr>

<tr>

<td colspan="2"> </td>

</tr>

<tr>

<td colspan="2"> </td>

</tr>

<tr>

<td colspan="2"> </td>

</tr>

<tr>

<td width="40%">r5 c1 (width should be 40%)</td>

<td width="60%">r5 c2 (width should be 60%)</td>

<!-- background="images/spacer.gif" -->

</tr>

<tr>

<td colspan="2">footer</td>

</tr>

</table>

<!-- End ImageReady Slices -->

</body>

</html>

 

Link to comment
https://forums.phpfreaks.com/topic/123670-html-layout/
Share on other sites

I agree, you could use divs easily. If you really wanted to continue using tables, you need to know how tables work. You have to think of them as rows and columns. Every cell in a given column with be the same width. You are trying to set the first column 20% in the first row, and 40% in the 5th row. Since they have to be the same width, it will use the first assigned value and ignore any others.

 

You could use the least common denominator method. As an example, you have four different widths; 20%, 40%, 60%, and 80%. The least common denominator is 20%. Divide this into each of the widths and you get 1x, 2x, 3x, and 4x. Also, 20% into 100% is 5x, which is how many columns you will need. Then you just span each cell to the dividend listed above. Using this method, your table would look like this:

 

<table width="100%" border="1" align="center">

  <tr>

      <td width="20%">r1 c1 (width should be 20%)</td> <!-- colspan="1" is understood -->

      <td width="80%" colspan="4"> r1 c2 (width should be 80%) </td>

  </tr>

  <tr>

      <td colspan="5"> </td>

  </tr>

  <tr>

      <td colspan="5"> </td>

  </tr>

  <tr>

      <td colspan="5"> </td>

  </tr>

  <tr>

      <td width="40%" colspan="2">r5 c1 (width should be 40%)</td>

      <td width="60%" colspan="3">r5 c2 (width should be 60%)</td>

      <!-- background="images/spacer.gif" -->

  </tr> 

  <tr>

      <td colspan="5">footer</td>     

  </tr> 

</table>

 

Hope this helps!

Link to comment
https://forums.phpfreaks.com/topic/123670-html-layout/#findComment-643475
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.