Is it possible to put an image in a <td> tag using CSS?

Question

I have the following HTML:

<td colspan="23"><img src="images/layout_15.gif" width="887" height="115"></td> 

But I was wondering if this could be changed to something like:

 <td colspan="23" class="something"> 

or

 <td colspan="23" id="something"> 

and then can I define the style for the image in the CSS file? If so, how, and is it better to do so?

Answer 1

I would not replace the width and height attributes of the <img> with CSS. Raster image files have a built-in width and pixel height, and this information is useful for the browser (for page layout) before loading and parsing the CSS file.

After re-reading your question, maybe you are trying to completely get rid of the <img> ? If so, if you have this HTML:

 <td colspan="23" class="something"></td> 

You can get an image that will be displayed in it as follows:

 .something { width: 887px; height: 115px; background: url(images/layout_15.gif) left top no-repeat; } 

Note that the path to the image files in CSS refers to the CSS file.

Answer 2

You need the Descendant CSS Selector so that you can orient the image elements in a specific class / id <td> .

Answer 3

If you want all the images embedded in td to have the same width and height, you can use:

 .something img{ width:887px; height:115px; } 

Answer 4

Do you mean this?

CSS

 .something img { border: 10px solid red; } 

HTML:

 <td class="something"><img src="images/layout_15.gif"></td> 

Answer 5

Absolutely! This is much better. Just make sure you are not using them to create layouts. Tables should be used only for tabular data.

if your html:

 <td class="first"></td> 

Then your CSS may be

 .first { background: #ccc; border: 1px solid #999; font-size: 16px; } 

For example, of course.