我能使用CSS在<td>标签中放置图片吗？

Question

I have the following HTML:

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

但我想知道是否可以将其更改为类似以下内容：

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

或者：

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

我可以在CSS文件中定义图片的样式吗？如果可以，应该怎么做？这种方式更好吗？

- Newbtophp

---

你为什么要使用表格来布局？ - Šime Vidas

如果使用得当，表格对于布局非常好用。为什么你不喜欢表格呢？ - andrewk

如果您要显示“表格”数据，那么表格是完全有效的标记。 - Andre

1. 表格布局不像CSS布局那样灵活。
2. 使用表格进行设计会将演示逻辑添加到标记中（演示和内容应分离）。
3. 嵌套表格很麻烦。
4. 表格使搜索引擎难以索引您的页面。
5. 直到解析完表格及其所有子元素后，才能呈现表格。
6. 表格适用于表格数据...我需要继续吗？

- Šime Vidas

Answer 1

我不建议用CSS替换<img>标签的width和height属性。位图图像文件具有固有的像素宽度和高度，这些信息在CSS文件下载和解析之前对浏览器（用于页面布局）很有用。

然而，如果你想完全摆脱<img>标签，那么如果你有以下HTML：

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

您可以通过以下方式在其中显示图像：

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

请注意，CSS 中图片的文件路径是相对于 CSS 文件的。

- Paul D. Waite

Answer 2

您需要一个后代CSS选择器，以便可以针对特定类/ID中的图像元素进行定位，该类/ID位于<td>中。

- Dave Anderson

Answer 3

如果你想让表格单元格中嵌入的所有图片具有相同的宽度和高度，可以使用以下代码：

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

- Paul S

Answer 4

你是指像这样吗？

CSS:

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

HTML：

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

- Douglas

Answer 5

当然可以！这样做会更好。只需确保您不再使用它们来进行布局。表格应仅用于制作表格数据。

如果您的HTML代码是：

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

那么你的CSS可以是这样的

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

例如，当然。

- KTastrophy