HTML-表格table-2018.07.05
2018-07-05 本文已影响0人
侯小强2018
HTML表格-table
基本格式
<table>
<tr>
<td></td>
<th> </th>
</tr>
</table>
<tr> 代表行，格式<tr> </tr>
<td>代表列，格式<td></td>,所有的单元格内容都在td中进行输入
<th>代表此行加粗,和td是一样的，只不过字体加粗。
实际操作：
<table >
<tr>
<td> ID</td>
<td> NAME</td>
<td> QQ</td>
</tr>
<tr>
<td> 001</td>
<td> 智智</td>
<td> 111111</td>
</tr>
<tr>
<td> 002</td>
<td> 佩佩</td>
<td> 222222</td>
</tr>
<tr>
<td> 003</td>
<td> 娟娟</td>
<td> 333333</td>
</tr>
</table>
小白解释：
在界面中有4对<tr></tr>就代表即将输入四行文字
每行文字中包涵了3对<td>,代表表格有三列
但如果不给于单元格附加宽/高的话，会默认为填满页面
如图：
四行三列表格已经生成
关于合并单元格
横向合并 colspan;
纵向合并 rowspan
colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数。
一般写：
<td colspan="3" style="text-align: center "> 人员统计</td>
指定单元格的宽度，高度，用<style>属性添加width和height
<td style="width:25%" ;height:20px>
如果增加到表头，那么就是多增加一行一列
<tr >
<td colspan="3" style="text-align: center; width: 25%;height: 20px;"> 姓名统计</td>
</tr>
小白解释：
Q1.为什么colspan中数值等于"3"：
因为横跨的是三列，就是想合并几列单元格就可以写数字几，如果写2，情况如下：
<tr>
<td colspan="2" style="text-align: center; width: 25%;height: 20px;"> 姓名统计</td>
</tr>
<tr>
<td> ID</td>
<td> NAME</td>
<td> QQ</td>
</tr>
显示如图：
将前两个单元格合并
Q2.为什么第一个<tr>中只有一个<td>？ 如果也写三个<td>会如何？
之所以写一个<tr>因为首行只有标题“人员统计”这一个单元格，所以只需要将所需要的信息写进去就可以。
那么如果多写了两个空的没有用的单元格，会将原来合并的三个视为一组，后面会多加出来两个单元格，也就是说，加上下面的单元格，会变成了5列。
<tr>
<td colspan="3" style="text-align: center; width: 25%;height: 20px;"> 姓名统计</td>
<td> </td> 这里输入两个空的单元格
<td> </td>
</tr>
<tr>
<td> ID</td>
<td> NAME</td>
<td> QQ</td>
</tr>
实际效果如图：
多输入两个单元格之后
所以，新手小白要多去实验，不要怕错，老师不可能面面俱到的讲到每一点，更重要的是自己进行实际操作。只有错了才会真的体验到正确的！！
综合操作;
最后的表格样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>这里是title</title>
</head>
<body>
<table style="width: 50%; text-align: center; background-color: yellow;">
<tr>
<td colspan="4" style="text-align: center;"> 姓名统计</td>
</tr>
<tr>
<td> ID</td>
<td> NAME</td>
<td> QQ</td>
<td> 备注</td>
</tr>
<tr>
<td> 001</td>
<td> 智智</td>
<td> 111111</td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> 002</td>
<td> 佩佩</td>
<td> 222222</td>
</tr>
<tr>
<td> 003</td>
<td> 娟娟</td>
<td> 333333</td>
</tr>
</table>
</body>
</html>
学习体会：
