Member Avatar for tqmd1

Dear Experts

I have following codes

<html>
<head><h1>Image and data in table column</h1></head>

<style type="text/css">

.bg	{widht:100%;height:100%}
.al	{text-align:center;}


</style>

<body>

<table width="50%" height="100px" border="1" cellpadding='0' cellspacing="0">
	<tr>
		<td widht="25%" background="DREAM.JPG" tabindex="2" title="The Code Project"><h3 class="al">Hello</h3></td>		

		<td widht="25%" bgcolor=pink><h3>world</h3></td>
		
	</tr>
</table>

</body>
</html>

In column I want to stretch the image that is in attached file

Please help

DREAM3.JPG 20.19 KB
  • 4 Contributors
  • 7 Replies
  • 195 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dandello
Member Avatar for simplypixie

Use CSS NOT tables for your layout

Member Avatar for Dandello

And there no such attribute at widht.

Member Avatar for migcosta

you can't do it on a table but you can do it using div's, image and absolute positions on the divs.. google it and you will find how ;)

Member Avatar for tqmd1

These codes work fine for me

<html>
<head><h1>Image and data in table column</h1></head>
 
<style type="text/css"> 
 
.bg	{
	position:absolute;
	z-index:-1;
	width:98%;
	height:91px;
	top:70px;
	left: 15px;
}
 
.al	{text-align:center;}
 
 
</style>
 
<body>
 
<table width="50%" height="100px" border="1" cellpadding='0' cellspacing="0">
	<tr>
		<td width="25%"><img class="bg" src="DREAM.JPG">
	  <h3 class="al">Hello</h3></td>		
 
		<td width="25%" bgcolor=pink><h3>world</h3></td>
		
	</tr>
</table>
 
</body>
</html>

Let me know about my code method.

Member Avatar for simplypixie

SOrry but I think you need to learn some more on HTML before you do anything else and then CSS.

Firstly, the <head> tag in HTML is for head information like the title of your page, meta tags and links to external style sheets, not somewhere to put a <H1> heading - that goes in the body of your HTML.

Secondly, if you are using CSS to style your page (as you should) then there is no need whatsoever to use tables for layout and mixing the two makes even less sense, plus don't set inline stlyes as you have done for the td bgcolor=pink.

Move your CSS to an external stylesheet and then apply your background image to the body tag or a div that is set for the main container of your content (if the background image changes on different pages for example).

Then use your divs/classes to set the layout and content (based on your code, set the background image in the #container div in your CSS and use to classes to format your words in your h3 heading):

<body>
  <h1>Image and data in table column</h1>
  <div id="container">
    <h3><span class="a1">Hello</span>
    <span class="world">World</span>
    </h3>
  </div>
</body>

Much neater and semantic.
commented: inappropriate comment that don't help in any way to resolve the problem -1
commented: The problem here is bad coding, I fully agree. +14
Member Avatar for tqmd1

Dear Sir,

If you want to teach me something then tell me about positions.

Member Avatar for Dandello

Rule 1- make sure your code is valid (http://validator.w3.org/)
When asking for advice to correct a detail, if the basic code is broken, nothing we advise will make that detail right until the overall html is right. See Purplepixie's comment above.

Edited by Dandello because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.