一、表格
表格/长表格代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格&表单学习</title> <!-- &转义字符，是&的转义字符 -->
</head>
<body>
<p>
1.align属性：表示table标签在其父标签中的位置；<br />
2.cellspacing属性：表示单元格线条之间的空白；<br />
3.cellpadding属性：表示单元格内容对于单元格边缘的留白；<br />
colspan / rowspan：分别表示合并列 / 行；<br>
4.tr标签中的th标签表示列，同时表示为单元格的表头，页面显示在单元格中居中且字体加粗；<br />
5.tr标签表示行；<br />
6.td / th 标签表示列；<br />
7.浏览器在渲染table表格时没有添加tbody标签时会自动加上，但是程序中依然没有；<br />
8.如果表格是长表格时：需要定义表格的头部、主体、底部，分别以：thead、tbody、tfoot标签表示；<br />
9.长表格根据上面三个标签区分出表格的结构，表格数据过多时可通过css样式实现表格的头部、底部保持不变，滚动屏幕时主体进行滚动；<br />
10.以前在项目开发时也常用表格进行页面的布局，但是现在在项目开发时不使用表格进行页面布局<br />
</p>
<hr color="crimson"/>
<table border="1px" width="50%" height="20%" align="center" cellspacing="0" cellpadding="10">
<!-- width="50%" height="20%" align="center"
该三个属性均是对应table表格父标签的宽度、高度、对齐方式进行的设置，此处的父标签指的是body，即整个网页
-->
<caption>列表标题使用caption</caotion>
<tr>
<td>1</td>
<td>lily</td>
<td>女</td>
<td>19</td>
</tr>
<tr>
<td>1</td>
<td>lily</td>
<td colspan="2">女</td>
</tr>
<tr>
<td>1</td>
<td>lily</td>
<td>女</td>
<td rowspan="2">19</td>
</tr>
<tr>
<td>1</td>
<td>lily</td>
<td>女</td>
</tr>
</table>
<hr /><hr /><hr />
<table border="1" cellspacing="0" height="20%" width="500px" cellpadding="10">
<caption>长表格例子</caption>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>医生</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>医生</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>医生</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>医生</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>共计</td>
<td colspan="2">4人</td>
</tr>
</tfoot>
</table>
</body>
</html>
347
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
