表格里面加图片 HTML 代码是什么?
示例代码
HTML 代码:
<table>
<tr>
<td><img src="image.jpg" alt="图片描述"></td>
<td>这是表格中的单元格内容。</td>
</tr>
</table>
在上述代码中,<img>
标签用于插入图片。src
属性指定了图片的路径,alt
属性提供了图片的替代文本,用于在图片无法显示时显示给用户。
设置图片大小
HTML 代码:
<table>
<tr>
<td><img src="image.jpg" alt="图片描述" width="200" height="150"></td>
<td>这是表格中的单元格内容。</td>
</tr>
</table>
通过设置 width
和 height
属性,可以指定图片的宽度和高度。这样可以控制图片在表格中的显示大小。
图片对齐方式
HTML 代码:
<table>
<tr>
<td align="left"><img src="image.jpg" alt="图片描述"></td>
<td align="center">这是表格中的单元格内容。</td>
<td align="right"><img src="image.jpg" alt="图片描述"></td>
</tr>
</table>
使用 align
属性可以设置图片在单元格中的对齐方式,可选值为 "left"(左对齐)、"center"(居中对齐)和 "right"(右对齐)。
响应式图片
HTML 代码:
<table>
<tr>
<td><img src="image.jpg" alt="图片描述" style="width: 100%; height: auto;"></td>
<td>这是表格中的单元格内容。</td>
</tr>
</table>
为了使图片在不同设备上自适应显示,可以使用 style
属性并设置 width: 100%; height: auto;
。这样图片将根据父元素的宽度自动调整大小,保持宽高比例不变。
通过使用 标签,并结合设置图片的路径、大小、对齐方式和响应式属性,可以在 HTML 表格中添加图片,并实现不同的显示效果。根据具体需求选择合适的方法来插入和样式化图片。