HTML表格
table:表格区域
tr标签：表格中的行
th标签:表格的表头
td标签：表格单元格
在开发工具HbuilderX中可以用table>tr* 行数 >td * 列数 可快速生成一个表格。
在每个标签内赋予属性，可达到一定的效果；
1.table:表格区域
border边框
width 宽
height 高
bgcolor 背景颜色
background 背景
cellpadding: 内容到边框的距离,
cellspacing: 单元格与单元格之间的距离,一般设置为"0";
align=“center”: 控制表格在本行中的水平位置。
caption 加入表格的标题。
cols 是 列数
rows 是 行数
2. tr:表格行
height 高
bgcolor 背景颜色
background 背景
align=“center” 让本行所有单元格内容居中
valign 设置内容的垂直位置 。 有三个值 top （紧贴边框上部）； middle（居中）； bottom（紧贴边框底部）。
3.td单元格
width 宽
bgcolor背景颜色
background 背景
align=“center”
valign 设置内容的垂直位置 top middle bottom
th:表头,也是单元格,内容加粗居中显示
colspan: 跨列
rowspan:跨行
练习
完成图片所给效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1"align="center"width="800"cellspacing="0">
<caption>财务报表</caption>
<tr align="center"valign="top">
<td colspan="2">品 牌</td>
<td colspan="3">春 装</td>
<td colspan="3">夏 装</td>
</tr>
<tr align="center"valign="top">
<td colspan="2"></td>
<td>男 装</td>
<td>女 装</td>
<td>童 装</td>
<td>男 装</td>
<td>女 装</td>
<td>童 装</td>
</tr>
<tr align="center"valign="top">
<td rowspan="2">JC</td>
<td>牛仔系列</td>
<td>110</td>
<td>50</td>
<td>228</td>
<td>586</td>
<td>255</td>
<td>98</td>
</tr>
<tr align="center"valign="top">
<td>休闲系列</td>
<td>120</td>
<td>500</td>
<td>400</td>
<td>198</td>
<td>88</td>
<td>50</td>
</tr>
</table>
</body>
</html>
效果：
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
