表格
- 表格：table、caption、tr、th、 td、border、width等
- 作用：用于表格、行、列、宽度、边框的制作
- 示例：制作商品库存表
- table 表格标签
- caption 大标题，要写在table标签下面
- tr 代表行
- th 加粗居中的单元格
- td 为普通单元格
- border属性 边框
- width属性 宽度
- 例子：
<html>
<head>
<title>first.html</title>
</head>
<body>
<table border="1px" width="600px">
<caption>用户信息表</caption>
<tr>
<th>姓名</th>
<th>密码</th>
<th>邮箱</th>
</tr>
<tr>
<td>张三</td>
<td>123</td>
<td>123</td>
</tr>
<tr>
<td>李四</td>
<td>345</td>
<td>456</td>
</tr>
</table>
</body>
</html>
合并表格
- 合并行列：colspan、rowspan
- 作用：用于将表格内的某些行、列进行合并
- 合并原则：从第一行、第一列开始合并，除第一个外，其余合并行（列）需要删除
- 例题：合并表格标题等位置
- 代码：
<html>
<head>
<title>first.html</title>
</head>
<body>
<table border="1" width="600px">
<caption>商品库存表</caption>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
<tr>
<!--合并2行-->
<td rowspan="2">家电类</td>
<td>冰箱</td>
<td>台</td>
<td>520</td>
</tr>
<tr>
<td>洗衣机</td>
<td>台</td>
<td>13</td>
</tr>
<tr>
<td>辅料</td>
<td>插线板</td>
<td>个</td>
<td>14</td>
</tr>
<tr>
<!--合并4列-->
<td colspan="4">备注：</td>
</tr>
</table>
</body>
</html>
表格属性标签
- 属性标签：caption（标题）、tbody（主体）、tfoot（页脚）、 thead（页眉）
- 作用：用于分组设置表格的格式
小贴士
- Firefox、Chrome以及Safari 仅支持colgroup元素的span和width属性。