Solved

Need help with table with using html

Posted on 2014-03-28
5
223 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 11

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 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

757 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now