<td width="83" height="30">
时间: 2024-03-30 12:31:06 浏览: 10
<td width="83" height="30">是HTML中的一个标签,用于定义表格中的单元格。它可以设置单元格的宽度和高度。其中,width属性用于设置单元格的宽度,height属性用于设置单元格的高度。
例如,可以使用以下代码来创建一个具有指定宽度和高度的单元格:
<td width="100" height="50">内容</td>
这将创建一个宽度为100像素、高度为50像素的单元格,并在其中显示内容。
相关问题
<table border="0" cellspacing = "0" id = "shoppingcartinfo"> <thead> <th width = "135px" height = "42px">编号</th> <th width = "150px" height = "42px">商品名</th> <th width = "150px" height = "42px">单价</th> <th width = "240px" height = "42px">购买数量</th> <th width = "150px" height = "42px">小计</th> <th width = "135px" height = "42px">操作</th> </tr> </thead> <tbody><tr> <td width = "135px" height = "42px"><%=application.getAttribute("id") %></td> <td width = "150px" height = "42px"><%=application.getAttribute("goods_name")%></td> <td width = "150px" height = "42px" class="price"> <img src="yuan.jpg" width="20" heigth="20"> <%=application.getAttribute("goodspic")%> </td> <td width = "240px" height = "42px" id="car"> <input type="button" class="decrease" value="-"> <input type="text" class="quantity" value="0"/> <input type="button" class="increase" value="+"> </td> <td width = "150px" height = "42px"> <span class="subtotal"></span> </td> <td width = "135px" height = "42px"> <input type="button" class="deldet" value="删除此商品"> </td> </tr>根据此代码美化表格
<body>
<table border="1" cellspacing="0" id="shoppingcartinfo">
<thead>
<tr>
<th width="135px" height="42px">编号</th>
<th width="150px" height="42px">商品名</th>
<th width="150px" height="42px">单价</th>
<th width="240px" height="42px">购买数量</th>
<th width="150px" height="42px">小计</th>
<th width="135px" height="42px">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td width="135px" height="42px"><%=application.getAttribute("id") %></td>
<td width="150px" height="42px"><%=application.getAttribute("goods_name")%></td>
<td width="150px" height="42px" class="price">
<img src="yuan.jpg" width="20" height="20">
<%=application.getAttribute("goodspic")%>
</td>
<td width="240px" height="42px" id="car">
<input type="button" class="decrease" value="-">
<input type="text" class="quantity" value="0"/>
<input type="button" class="increase" value="+">
</td>
<td width="150px" height="42px">
<span class="subtotal"></span>
</td>
<td width="135px" height="42px">
<input type="button" class="deldet" value="删除此商品">
</td>
</tr>
</tbody>
</table>
</body>
<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>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<input type="checkbox" id="selectAll"> 学生编号 学生学号 学生姓名 学生性别 学生出生日期 学生地址 学生电话 学生照片 学生班级 操作 <c:forEach items="${list.list }" var="student" varStatus="status"> <input type="checkbox" name="idCheckbox" value="${student.stuId }"> ${student.stuId } ${student.stuNo} ${student.stuName } ${student.stuSex } ${student.stuBirth } ${student.stuAddress } ${student.stuPhone } ![]()
${student.classes.className } 美化一下
ACT
Particle
ACT
Particle
ACT
Particle
ACT
<input type="file" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
<input type="file" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
<input type="file" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
<input type="file" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
<input type="file" onchange="previewImage(this);selectCell(this)" onclick="showPopup(this.src)" style="width: 100px; height: auto;">
Particle
这我的表头,以及表格填充行,我需要怎么为以下格式<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="file" name="image1">
<button type="submit">提交</button>
</form>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> 0">
{{bk.bookName}} ¥{{bk.bookPrice}} <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> <script src="/BookShopSystem_war/layui/layui.js"></script>这是完整的html代码,请结合你给出的分页功能整合出完整的代码
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书商城-图书列表</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> 0">
{{bk.bookName}} ¥{{bk.bookPrice}} <iframe src="footer.html" frameborder="0" scrolling="no" width="100%" height="245px"></iframe> <script src="/BookShopSystem_war/layui/layui.js"></script>这是完整的html代码,请结合你给出的分页功能整合出完整的代码
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pptx](https://img-home.csdnimg.cn/images/20210720083543.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)