CODEWITHSUNDEEP
htmlcss
Newbtophp
Newbtophp

Reputation: 213

Can I put an image in a <td> tag using CSS?

I have the following HTML:

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

But I was wondering if that can be changed to something like:

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

or:

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

and then can I define a style for the image in a CSS file? If so, how, and is it better doing it that way?

Upvotes: 4

Views: 34255

Answers (5)

Paul S
Paul S

Reputation: 36787

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

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

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98816

I wouldn’t replace the width and height attributes of an <img> tag with CSS ones. Bitmap image files have an inherent pixel width and height, and that information is useful to the browser (for page layout) before the CSS file is downloaded and parsed.

Having re-read your question though, maybe you’re trying to get rid of the <img> tag altogether? If so, if you’ve got this HTML:

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

You can get the image to show up in it like this:

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

Note that the image’s file path in CSS is relative to the CSS file.

Upvotes: 3

Dave Anderson
Dave Anderson

Reputation: 12294

You require a Descendant CSS Selector so that you can target the image elements in a particular class/id of <td>.

Upvotes: 2

KTastrophy
KTastrophy

Reputation: 1739

Absolutely! It is much better. Just ensure that you aren't sill using them to do layouts. Tables should only be used for tabular data.

if your html is:

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

Then your CSS can be

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

For example, of course.

Upvotes: 0

Douglas
Douglas

Reputation: 37761

Do you mean like this?

CSS:

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

HTML:

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

Upvotes: 0

Related Questions