请制作一个HTML页面,包含了以下表格的内容(注意颜色与文字格式),请同学列示HTML内码内容: Global Co. Ltd. Sale Report Items Sold August 2016 Clothes Accessories Trousers Skirts Dresses Bracelets Rings Belgium Antwerp 56 22 43 72 23 Gent 46 18 50 61 15 Brussels 51 27 38 69 28 The Netherlands Amsterdam 89 34 69 85 38 Utrecht 80 12 43 36 19
时间: 2024-02-11 19:07:31 浏览: 126
常用工具软件实用教程-翻译软件与内码转换(共32张PPT).pptx
以下为该表格的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sale Report</title>
<style>
{
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
text-align: center;
padding: 10px;
border: 1px solid black;
}
th {
background-color: #F0E68C;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #F5DEB3;
}
</style>
</head>
<body>
<h1>Global Co. Ltd. Sale Report</h1>
<h2>Items Sold August 2016</h2>
<table>
<tr>
<th></th>
<th colspan="4">Clothes</th>
<th colspan="2">Accessories</th>
</tr>
<tr>
<th></th>
<th>Trousers</th>
<th>Skirts</th>
<th>Dresses</th>
<th>Bracelets</th>
<th>Rings</th>
</tr>
<tr>
<td>Belgium</td>
<td>Antwerp</td>
<td>56</td>
<td>22</td>
<td>43</td>
<td>72</td>
<td>23</td>
</tr>
<tr>
<td></td>
<td>Gent</td>
<td>46</td>
<td>18</td>
<td>50</td>
<td>61</td>
<td>15</td>
</tr>
<tr>
<td></td>
<td>Brussels</td>
<td>51</td>
<td>27</td>
<td>38</td>
<td>69</td>
<td>28</td>
</tr>
<tr>
<td>The Netherlands</td>
<td>Amsterdam</td>
<td>89</td>
<td>34</td>
<td>69</td>
<td>85</td>
<td>38</td>
</tr>
<tr>
<td></td>
<td>Utrecht</td>
<td>80</td>
<td>12</td>
<td>43</td>
<td>36</td>
<td>19</td>
</tr>
</table>
</body>
</html>
```
注意,此处省略了HTML文档的基本结构,只提供了表格相关的内容。具体解释:
- `<table>`: 表示一个表格,包含了整个表格的内容。
- `<tr>`: 表示一行,包含了该行的所有单元格。
- `<th>`: 表示表头单元格,通常加粗、居中、背景色不同。
- `<td>`: 表示数据单元格,通常左对齐、居中或右对齐。
- `colspan` 和 `rowspan`: 分别表示一行或一列中的单元格合并,可以将多个单元格合并为一个单元格。
- `text-align` 和 `vertical-align`: 分别表示文本在单元格中的水平和垂直对齐方式。
- `border-collapse` 和 `border`: 分别表示表格边框的合并方式和单元格的边框样式。
- `background-color` 和 `color`: 分别表示单元格的背景色和前景色(即字体颜色)。
- `nth-child`: 表示指定的子元素,可以用来设置表格行的交替颜色。
阅读全文