用html画一个出库单
时间: 2023-07-20 20:46:16 浏览: 51
好的,以下是一个简单的出库单 HTML 示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>出库单</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
table td, table th {
border: 1px solid black;
padding: 8px;
text-align: center;
}
table th {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>出库单</h1>
<table>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr>
<td>001</td>
<td>商品A</td>
<td>10</td>
<td>100</td>
<td>1000</td>
</tr>
<tr>
<td>002</td>
<td>商品B</td>
<td>5</td>
<td>200</td>
<td>1000</td>
</tr>
<tr>
<td colspan="4" style="text-align: right;">合计:</td>
<td>2000</td>
</tr>
</table>
</body>
</html>
```
这个示例中,我们使用了 HTML 和 CSS 来创建一个简单的出库单,包括商品编号、商品名称、数量、单价和金额等信息。我们使用了 `table` 元素来创建表格,并使用 CSS 控制样式。其中,`border-collapse: collapse` 用于去除边框之间的间隙,`text-align: center` 用于居中对齐文本,`background-color` 用于设置表头的背景颜色。
相关推荐
![exe](https://img-home.csdnimg.cn/images/20210720083343.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)
![](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)
![](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)