HTML 一个页面左边是表格,后边展示图片
时间: 2024-09-19 15:13:06 浏览: 20
HTML中创建一个页面,通常会将内容分为两个部分:左侧的表格区域和右侧的图片区域。你可以使用`<table>`标签来构建表格,而图片则通过`<img>`标签插入。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>HTML左右布局示例</title>
<style>
/* 可选的CSS样式,用于美化和调整布局 */
.container {
display: flex;
justify-content: space-between;
}
table {
width: 40%; /* 表格宽度 */
}
</style>
</head>
<body>
<div class="container">
<!-- 左侧表格 -->
<table border="1">
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>行1列1</td>
<td>行1列2</td>
</tr>
<!-- 添加更多表格行 -->
</tbody>
</table>
<!-- 右侧图片展示 -->
<img src="your-image.jpg" alt="你的图片描述" style="width:50%; margin-left:1em;"> <!-- 将 'your-image.jpg' 替换为你实际的图片路径 -->
</div>
</body>
</html>
```
在这个例子中,`.container`类使用了Flexbox布局,使得左侧的表格和右侧的图片并排显示。你可以根据需要调整表格和图片的尺寸、间距等属性。