<tr> <td><img class="imga" src="img/t_recommen/cup.jpg" alt="">商品1</td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr>错在哪
时间: 2023-07-19 21:14:14 浏览: 36
这是一个 HTML 表格的代码,其中有一个错误在于 `img` 标签的 `class` 属性值应该为 `img-responsive` 而不是 `imga`。`img-responsive` 是 Bootstrap 提供的一个类,可以使图片自适应父容器。另外,这段代码中也没有指定表格的表头部分,应该使用 `thead` 标签来定义表头。
相关问题
<table class="table table-hover"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <div><tr> <td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯 </td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价:</td> <td colspan="2">600</td> </tr> </div> </tfoot> </table>让总体居中
要让整个表格居中,可以将表格放在一个 div 元素中,并给这个 div 元素添加 text-align: center 样式。也可以直接给表格添加 margin: 0 auto 样式,这样会使表格在水平方向上居中。以下是修改后的代码:
```html
<div style="text-align: center;">
<table class="table table-hover" style="margin: 0 auto;">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/t_recommen/cup.jpg" width="200" height="150"><br>健身水杯 </td>
<td>100</td>
<td><input type="number" value="1" min="1"></td>
<td>100</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<td><img src="img/t_recommen/xiaomi.jpg" width="200" height="150"><br>商品2</td>
<td>200</td>
<td><input type="number" value="1" min="1"></td>
<td>200</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<td><img src="img/mobile/m2.jpg" width="200" height="150"><br>商品3</td>
<td>300</td>
<td><input type="number" value="1" min="1"></td>
<td>300</td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总价:</td>
<td colspan="2">600</td>
</tr>
</tfoot>
</table>
</div>
```
完善<div style="text-align: center;" > <table class="table table-hover tar" style="margin: 0 auto;"> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>总价</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><img src="img/t_recommen/cup.jpg" width="220" height="170"><br>健身水杯 </td> <td>100</td> <td><input type="number" value="1" min="1"></td> <td>100</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/t_recommen/xiaomi.jpg" width="220" height="170"><br>商品2</td> <td>200</td> <td><input type="number" value="1" min="1"></td> <td>200</td> <td><button class="btn btn-danger">删除</button></td> </tr> <tr> <td><img src="img/mobile/m2.jpg" width="220" height="170"><br>商品3</td> <td>300</td> <td><input type="number" value="1" min="1"></td> <td>300</td> <td><button class="btn btn-danger">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总价:</td> <td colspan="2">600</td> </tr> </tfoot> </table> </div>让它变得美观
为了让这个购物车页面变得美观,我们可以添加一些 CSS 样式来修饰表格和按钮。以下是一个简单的 CSS 样式示例,可以将其添加到页面的头部区域:
```html
<head>
<style type="text/css">
/* 设置表格的宽度和边框 */
table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ddd;
}
/* 设置表格头部的背景色和字体颜色 */
thead {
background-color: #f2f2f2;
color: #666;
}
/* 设置表格主体中每个单元格的边框 */
tbody td {
border: 1px solid #ddd;
}
/* 设置表格主体中每个单元格的内边距和字体颜色 */
tbody td {
padding: 10px;
color: #666;
}
/* 设置表格主体中每个单元格中商品图片的大小和位置 */
tbody td img {
width: 80px;
height: 80px;
float: left;
margin-right: 10px;
}
/* 设置表格主体中每个单元格中商品名称的字体大小和位置 */
tbody td span {
font-size: 18px;
display: block;
margin-bottom: 5px;
}
/* 设置表格主体中每个单元格中商品单价和总价的字体颜色和位置 */
tbody td .price {
color: #f00;
font-weight: bold;
display: block;
margin-bottom: 5px;
}
/* 设置表格主体中每个单元格中商品数量的位置 */
tbody td .quantity {
display: block;
margin-bottom: 5px;
}
/* 设置表格底部中总价的位置和字体大小 */
tfoot td {
font-size: 24px;
text-align: right;
}
/* 设置删除按钮的背景色、字体颜色和边框 */
.btn-danger {
background-color: #d9534f;
color: #fff;
border: none;
}
/* 设置删除按钮的鼠标悬停效果 */
.btn-danger:hover {
background-color: #c9302c;
color: #fff;
}
</style>
</head>
```
这些 CSS 样式可以让表格看起来更加美观和易于阅读,同时也让删除按钮更加醒目和易于使用。当然,你也可以根据自己的需求来进行样式的调整和修改。