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
  • 217 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

Practical, future‑proof options for stretching the image in that table cell — two safe approaches depending on whether you must keep the table or can convert the layout to CSS.

As and suggested, prefer CSS-based layout. If you must keep a table for tabular data, apply the image with CSS on the cell rather than the deprecated background or bgcolor attributes (and fix typos such as the widht -> width that noticed).

Option 1 — CSS background on the TD (stretches the image)

<td class="cell-bg">
  <h3 class="al">Hello</h3>
</td>
.cell-bg {
  background-image: url("DREAM.JPG");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%; /* stretch to exactly fill the cell (may distort) */
  width: 25%;
  height: 100px;
}

Use background-size: cover; instead if you want the image to fill the area while preserving aspect ratio (it will crop instead of distort).

Option 2 — an <img> that fills the cell (better when you need an accessible image)

<td class="img-cell">
  <div class="img-wrap">
    <img src="DREAM.JPG" alt="decorative" class="fill">
    <h3 class="overlay">Hello</h3>
  </div>
</td>
.img-wrap { position: relative; width: 100%; height: 100px; overflow: hidden; }
.img-wrap img.fill {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.img-wrap .overlay { position: relative; z-index: 1; margin: 0; text-align: center; }

object-fit: cover; preserves aspect ratio and crops as needed. Use object-fit: fill; to stretch.

Quick troubleshooting notes

  • Keep document structure valid (put headings in the body, not in <head>).
  • Avoid z-index: -1 for background images; layer with relative positioning and higher z for text.
  • background-size and object-fit are supported in modern browsers—provide a simple fallback (static image or CSS background) if you must support very old IE.
  • Run an HTML/CSS validator and correct typos like widht → width.

Either option will give a clean, maintainable result; pick the one that best fits your accessibility and browser-support needs.

Recommended Answers

All 7 Replies

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.