Improve company productivity with a Business Account.Sign Up

x
?
Solved

Need help with table with using html

Posted on 2014-03-28
5
Medium Priority
?
247 Views
Last Modified: 2014-03-28
Hi,
    I have a table on my webpage which covers the header, it currently is set to 1000px, however I now want it so the colours etc spread across the page 100%.  I have attached an image to show what I want.  How can this be done?

The ee-before shows how the site is now, and the ee-after, with the sides stretched.

I tried creating a new table with 3 columns, dropping the existing table into the middle column with a fixed 1000px width, then the two new side columns had tables with rows to give the colours, but i couldn't get these to then stretch to 100%....

Thanks
ee-after.png
ee-before.png
0
Comment
Question by:damianb123
  • 2
  • 2
5 Comments
 
LVL 12

Expert Comment

by:Tej Pratap Shukla ~Dexter
ID: 39961107
Hey there

I have a simple solution for you, why don't you use div tag and there style the div container accordingly.
If you need help reply with a sample of the page code.

Feel free to revert back

Thanks
~Dex
0
 
LVL 55

Expert Comment

by:Scott Fell, EE MVE
ID: 39961113
Forget the table and use div's and li's

  <div class="container">
      <div class="header">
          <div class="topheader">
             <!-- logo etc -->  
          </div>
          <div class="midheader">
             <!-- blue style ul as horizontal list -->
            <ul><li>stuff</li><li>stuff</li><li>stuff</li></ul>
          </div>
          <div class="bottomheader">
             <!-- yellow style ul as horizontal list -->
            <ul><li>stuff</li><li>stuff</li><li>stuff</li></ul>
          </div>
        
       </div>  
  </div>

Open in new window


Otherwise, will you please show us your code.  Make a test case (use fake data, only add what is necessary) http://css-tricks.com/reduced-test-cases/.  There are a number of ways to do what you are asking and we can't tell what you have done from an image.  

Just going on what you are showing, I would use the way I suggested.
0
 

Author Comment

by:damianb123
ID: 39961127
Hi,
    Please find attached the current code which is live and working, so the edges need to be extended to 100%, but the middle part (1000px) needs to stay central.

Thanks for all your help

Damian
header-revision.html
0
 
LVL 55

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 39961219
You really should update all of this to not use tables for your layout and revert all of your inline styles to css.  

I simply removed using a table inside of a table.  For now, I created a header container and 4 divs each containing their own table.  You take it from here.  fyi, I took out some of the php to make it readable in jsbin.  http://jsbin.com/ruzacaqi/1/

<div><!-- container -->
    <div><!-- div for each table -->
        <table> <!-- keep orig inner table -->

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="header_container">  
<div align="center">
  
  <!-- top header -->
<table cellspacing=0 cellpadding=0 width=1000 border=0>
      
     <tr>
		<td width=426>
                <font face="Arial" size="2">
                <strong><span style="color: #000000;"><a style="color: #000000;" href="http://www.testdomain.co.uk">Home</a> |</span></strong>
 				<strong><span style="color: #000000;"><a style="color: #000000;" href="/contact_us/">Contact Us</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/customer/account/">My Account</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/customer/account/login/">Login</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/customer/account/logout/">Logout</a> |</span></strong>
                <strong><span style="color: #000000;"><a style="color: #000000;" href="/questions/">FAQ's</a></span></strong></td>
 
		<td width=38 height=35 bgcolor="#CCCCCC" align="center" bordercolor="#000000" style="border-left-style:solid; border-left-width:1px; border-right-style:none; border-right-width:medium; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px">
               
				<img src="<?php echo $this->getSkinUrl('images/trolley.gif') ?>" width="27" height="22"></td>

		<td width=150 bgcolor="#CCCCCC" valign="middle" bordercolor="#000000" style="border-left-style:none; border-left-width:medium; border-right-style:solid; border-right-width:1px; border-top-style:solid; border-top-width:1px; border-bottom-style:solid; border-bottom-width:1px">
                <font face="Arial" size="2"><b><div align="center"></div></td>
 
		<td width=352 height=35 bgcolor="#FFFFFF" alin="right" align="right">
                <a href="https://www.facebook.com/ct" style="text-decoration: none"><img src="<?php echo $this->getSkinUrl('images/facebook.gif') ?>" alt="Follow us on Facebook" title="Follow us on Facebook" border="0"></a>&nbsp;
                <a href="https://twitter.com/are"><img src="<?php echo $this->getSkinUrl('images/twitter.gif') ?>" alt="Follow us on Twitter" title="Follow us on Twitter" border="0"></a>&nbsp;
				<a href="https://plus.google.com/112304283907169205731/posts" style="text-decoration: none"><img src="<?php echo $this->getSkinUrl('images/google.gif') ?>" alt="Follow us on Google Plus" title="Find us on Google Plus" border="0"></a>&nbsp;
				<a href="https://www.testdomain.co.uk/ourblogs/" style="text-decoration: none"><img src="<?php echo $this->getSkinUrl('images/blog.gif') ?>" alt="Check out our blog!" title="Check out our blog!" border="0"></a></td>
</tr>  
</table>
  
  
 <!-- top2 --> 
  
<div align="center" style="background-color:#FED001;width:100%;">
	<table border="0" width="1000" cellspacing="0" cellpadding="0" bgcolor="#FED001">
		<tr>
			<td width="311" bgcolor="#FBD300" rowspan="2">
        <h1 class="logo"><a href="https://www.testdomain.co.uk"><img src="<?php echo $this->getSkinUrl('images/appliance1.jpg') ?>" alt="Any" title=" #1 Apes Company" border="0"></a></td>
			<td bgcolor="#FBD300" colspan="2" align="center">
			<img src="<?php echo $this->getSkinUrl('images/Welcome2.gif') ?>"></td>
			<td width="242" bgcolor="#FBD300" colspan="2" height="32" align="center">       
			<img src="<?php echo $this->getSkinUrl('images/euronics-top-logo.gif') ?>" alt="We are a er" title="We are aaler" border="0">       </td>
		</tr>
		<tr>
			 <td style="background:url('https://www.testdomain.co.uk/media/images/app-search.gif') no-repeat;" height="20" width="286" valign="top">
<div align="right">
	<table border="0" width="97%" cellspacing="0" cellpadding="0" height="36">
		<tr>
			<td align="right">
			<form action="<?php echo $this->helper('catalogSearch')->getResultUrl() ?>" method="get">
			<input name="<?php echo $this->helper('catalogSearch')->getQueryParamName() ?>" style="border:1px solid #ffffff; size="60" class="1" value="Search here..." onclick="this.value='';" size="47"></td>
		    
		</tr>
	</table>
</div>
				</td>
			<td bgcolor="#FED001" width="160" valign="top" align=left>
			<INPUT TYPE="image" SRC="https://www.testdomain.co.uk/media/images/search-field.gif" border="0" Alt="Searcyour favourite part" title="Search t website for your favourite part.         ***Please enter make, model number, description or part number.***">
</td></form>
			<td width="57" bgcolor="#FBD300">       
			<p align="right"><img src="<?php echo $this->getSkinUrl('images/phone-new.gif') ?>"></td>
			<td width="186" bgcolor="#FBD300">       
			<p align="right"><b><font face="Arial" size="5">01253 699009 </font><font style="font-size: 15pt" face="Arial">&nbsp;&nbsp;&nbsp; </font></b></td>
		</tr>
	</table>
</div>
               
               
               
               
<!-- blue -->

	
          
          
          
		<div style="background-color:#173A70;width:100%;">
			<table width="1000" bgcolor="#173A70" height="37" cellspacing="0" cellpadding="0">
				<tr>
					<td width="132" style="cursor: pointer; color:#FFFFFF; border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" align="center" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/appliance-sales-c-1855.html';">
<b>
					<font face="Arial" style="font-size: 11pt" align="center" >

Appliances</font></b></td>
					<td width="61" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF"" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/cooker-spare-parts-c-24.html';">
					<b>
					<font face="Arial" style="font-size: 10pt">
					Cooker<br>Parts</font></b></td>
					<td width="121" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/tumble-dryer-spares-c-21.html';">
					<b>
					<font face="Arial" style="font-size: 10pt">
					Tumble Dryer<br>Spares</font></b></b></td>
					<td width="120" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/washing-machine-spares-c-22.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Washing Machine<br>Spares</font></b></td>
					<td width="126" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/vacuum-cleaner-spares-c-26.html';">					
					<b>					<font face="Arial" style="font-size: 10pt">
					Vacuum Cleaner<br>Spares</b></font></td>
					<td width="106" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/dishwasher-spares-c-25.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Dishwasher<br>Spares</font></b></td>
					<td width="107" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/fridge-freezer-spares-c-23.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Fridge Freezer<br>Spares</font></b></td>
					<td align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/cooker-hood-spares-c-1314.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Cooker Hood<br>Spares</font></b></td>
					<td width="117" align="center" style="cursor: pointer; color:#FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-left-color:#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'; style.color='black'" onmouseout="this.style.backgroundColor='#173A70'; this.style.color='white'" onclick="window.document.location='http://www.testdomain.co.uk/spare-parts-manufacturer-c-190.html';">					<b>
					<font face="Arial" style="font-size: 10pt">
					Spare Parts<br>By Manufacture</font></b></td>
				</tr>
			</table>
		</div>

                                                        
      <!-- bottom -->                                                  
      <div class="bottom_nav" style="background-color:#FED001;width:100%;">                                                  
		<table border="0" width="1000" cellspacing="0" cellpadding="0" height="35" bordercolor="#FFFFFF">
			<tr>
				<td width="69" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-left-style:none; border-left-width:medium; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face=" Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/kettle-spares-c-1733.html" style="text-decoration: none">
				<font color="#000000">Kettle<br>Spares</font></a></font></td>
				<td width="103" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/plumbing-appliances-c-28.html" style="text-decoration: none">
				<font color="#000000">Plumbing For<br>Appliances</font></a></font></td>
				<td width="113" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/storage-heater-spares-c-1739.html" style="text-decoration: none">
				<font color="#000000">Storage Heater<br>Spares</font></a></font></td>
				<td align="center" width="99" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/deep-fryer-spares-c-1313.html" style="text-decoration: none">
				<font color="#000000">Deep Fat<br>Fryer Spares</font></a></font></td>
				<td width="87" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/microwave-spares-c-1720.html" style="text-decoration: none">
				<font color="#000000">Microwave<br>Spares</font></a></font></td>
				<td width="94" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/miscellaneous-c-1927.html" style="text-decoration: none">
				<font color="#000000">Miscellaneous</font></a></font></td>
				<td align="center" width="105" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/spare-parts-manufacturer-c-190/spare-parts-manufacturer-dyson-c-190-211.html" style="text-decoration: none">
				<font color="#000000">Dyson Spares</font></a></font></td>
				<td width="54" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/tools-c-1926.html" style="text-decoration: none">
				<font color="#000000">Tools</font></a></font></td>
				<td width="93" align="center" style="cursor: pointer; border-right-style: solid; border-right-width: 1px; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/specials" style="text-decoration: none">
				<font color="#000000">Special Offers</font></a></font></td>
				<td align="center" style="cursor: pointer; border-right-style:none; border-right-width:medium; border-top-style:none; border-top-width:medium; border-bottom-style:none; border-bottom-width:medium" bordercolor="#FFFFFF" onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				&nbsp;
				<img border="0" src="<?php echo $this->getSkinUrl('images/delivery-info.gif') ?>" width="43" height="19"></td>
				<td align="center" style="cursor: pointer; border-style:none; border-width:medium; " width="122" bordercolor="#FFFFFF"  onmouseover="this.style.backgroundColor='#ffffff'" onmouseout="this.style.backgroundColor='#FED001'">
				<font face="Arial" style="font-size: 9pt">
				<a href="http://www.testdomain.co.uk/delivery" style="text-decoration: none">
				<font color="#000000">Delivery Information</font></a></font></td>
			</tr>
		</table>
  
    
  
  </div>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:damianb123
ID: 39961329
Perfect solution, just what I needed - thank you
0

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

601 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