1、表格
- 表格是用来表示一些格式化的数据，在网页里也可以创建表格
- 在HTML中使用table标签来创建一个表格(空白表格)
- 在table标签中，使用tr来表示表格中的一行，有几行就有几个tr
- 行有了之后就要创建单元格了，使用td来创建一个单元格，有几个单元格，就有几个td
- 在表格里面默认没有边框，所以看不见表格
- 合并单元格：
- 1、colspan横向合并单元格
- 2、rowspan用来设置纵向的合并单元格
<body>
<table border="1" width="40%" align="center">
<tr>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td rowspan="2">哈哈哈哈</td>
</tr>
<tr>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
</tr>
<tr>
<td>哈哈哈哈</td>
<td>哈哈哈哈</td>
<td colspan="2">哈哈哈哈</td>
</tr>
</table>
</body>
2、表格的样式
- 注意：table也是一个块元素
- table和td边框之间默认有一个距离
- 通过border-spacing属性来设置距离
- 这里虽然是0距离，但是两个边框只是挨紧了，而不是重叠
- 所以看起来有点粗
- 通过border-collapse可以设置表格的边框合并
- 如果设置了border-collapse，那么border-spacing自动失效
- 可以使用th标签来表示表头中的内容，用法和td一样
<style type="text/css">
table{
width:300px;
margin:0 auto;
border:1px solid black;
border-spacing:0px;
border-collapse:collapse;
background-color:#F96;
}
td , th{border:1px solid black;border-spacing:0px;}
tr:nth-child(even){background-color:#6FC;}
tr:hover{background-color:#FF6;}
</style>
<body>
<table>
<tr>
<th>学号</th>
<th>姓名</th>
<th>
本文详细介绍了HTML中的表格和表单元素及属性。表格包括创建、样式调整、长表格处理和布局；表单涉及
最低0.47元/天 解锁文章
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
