Strech image in table column

Question

tqmd1 0 Junior Poster

13 Years Ago

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

web-design

4 Contributors
7 Replies
195 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by Dandello

simplypixie 123 Posting Pro in Training

13 Years Ago

Use CSS NOT tables for your layout

Dandello 8 Posting Whiz in Training

13 Years Ago

And there no such attribute at widht.

Reply to this topic

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.

migcosta 13 Junior Poster · Answer 1 · 2011-11-09T21:10:13+00:00

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

tqmd1 0 Junior Poster · Answer 2 · 2011-11-10T11:37:15+00:00

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.

simplypixie 123 Posting Pro in Training · Answer 3 · 2011-11-10T13:18:37+00:00

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.

inappropriate comment that don't help in any way to resolve the problem

tqmd1 0 Junior Poster · Answer 4 · 2011-11-10T14:42:06+00:00

Dear Sir,

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

Dandello 8 Posting Whiz in Training · Answer 5 · 2011-11-11T01:35:17+00:00

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.