demo4--html表格_html demo-优快云博客

此篇内容将会提到table,tr,td,colgrounp,col标签。

其书写表格的一个大致结构大概是这样

<table>
  <tr>
     <td></td>
     <td></td>
     ...
  </tr>
  <tr>
     <td></td>
     <td></td>
     ...
  </tr>
  
  ...
</table>

其中table将tr包起来，tr将td包起来。table表示的则是总的一个表格，tr则是表示每一行内的元素，

而td则是代表的每一个文本。

现在先了解完html如何进行表格设置，我们先进行一个案例，将下述表格通过使用html做出来

姓名	籍贯	年龄
张三	湖南	17
李四	黑龙江	32


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>籍贯</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>湖南</td>
            <td>17</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>黑龙江</td>
            <td>32</td>
        </tr>
    </table>
</body>
</html>

很快，就可以通过了解到的写出这么一长串，但是出现了一个问题，我们将他显示出来的时候并没有达到我们的一个需求。如上图所示，这其中并每个文本之间根本没有分界线，这时其实就是在table中没有对表格进行配置，table默认是不会给出线条，而线条需要我们去添加。

<table border="1" cellspacing="0" cellpadding="0">

其中border是指的边框宽度，cellspacing 控制表格的单元格之间的距离，cellpadding 控制文字和格子的距离(格内距离)。

右边是没有cellspacing和cellpadding展示出来的图片，两者对比大家可以根据自己喜好设置表格样式。

那么接下来我们再来一个案例

对于这个案例我们可以看到明显的表格宽度有长有短，这个时候colspan就可以排上用场了，colspan可以限定每一栏占据多少单元格，例如colspan="3"就是指其占据三个单元格。回到题目，在其中其实是有很多部分合并了单元格，就比如车牌号后面的长空格。我们需要快速的知道其由多少个单元格合并，其中一种比较简单的方法就是把所有单元格拆成小单元格，我们可以进行适当的划线，如下图

如此一来我们就将其分成了十一小块，每一部分由多少个单元格组成现在也是一目了然，总共是11个单元格，接下来我们进行代码实现。

<table width="800" border="1"  cellspacing="0" cellpadding="0">
        <thead>
            <td>工单号</td>
            <td width="70"></td>
            <td>车牌号</td>
            <td colspan="2"></td>
            <td>车型</td>
            <td></td>
            <td>技师</td>
            <td></td>
            <td>校验时间</td>
            <td width="100"></td>
        </thead>
        <tr>
            <td>序号</td>
            <td colspan="3">维修项目及更新配件</td>
            <td >单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>工时费</td>
            <td>合计</td>
            <td colspan="2">故障原因</td>
        </tr>
</table>

第一行colspan的合并失效以及对其的解决方法

但是我们这么做会发现一个问题，第一行colspan合并失效了，位置在第六行colspan="2"处，对于此问题，作为初学者的我手足无措，不知道如何去解决，因为它是在第一行，在没有上一行做参照的情况下cosplan及其容易失效。

在一开始我的想法是在前面再写一层，但是这最前面多出来的一层不对他进行合并，而是做出来后隐藏其位置，使得合并的一栏有参照物可以顺利得到我想要的结果，于是我进行实践。

<table width="800" border="1"  cellspacing="0" cellpadding="0">
        <tr border="0">
            <td></td>
            <td width="70"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td width="100"></td>
        </tr>
        <tr>
            <td>工单号</td>
            <td width="70"></td>
            <td>车牌号</td>
            <td colspan="2"></td>
            <td>车型</td>
            <td></td>
            <td>技师</td>
            <td></td>
            <td>校验时间</td>
            <td width="100"></td>
        </tr>
        <tr>
            <td>序号</td>
            <td colspan="3">维修项目及更新配件</td>
            <td >单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>工时费</td>
            <td>合计</td>
            <td colspan="2">故障原因</td>
        </tr>
</table>

虽然这个达到了我想要的了，但是其美观不得不提一嘴，最上面那一行倍显粗，我就想着去追求更好的方法，知道我看见了col和colgrounp，我才明白。col是单标签，使用时在表格代码内的开头写上colgrounp，内部包含n个col，有几个col就代指有几个单元格，这样就不会出现第一行合并失效的情况了，其代码如下

<table width="800" border="1"  cellspacing="0" cellpadding="0">
        <colgroup>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
            <col width="100"></col>
        </colgroup>
        <thead>
            <td>工单号</td>
            <td width="70"></td>
            <td>车牌号</td>
            <td colspan="2"></td>
            <td>车型</td>
            <td></td>
            <td>技师</td>
            <td></td>
            <td>校验时间</td>
            <td width="100"></td>
        </thead>
        <tr>
            <td>序号</td>
            <td colspan="3">维修项目及更新配件</td>
            <td >单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>工时费</td>
            <td>合计</td>
            <td colspan="2">故障原因</td>
        </tr>
</table>

在这里因为有十一个单元格，于是我就放入了十一个col，其中的宽度就是代表每一个单元格的宽度，当然咯，如果每个col内宽度设置成一样的，那么他们就会默认等长，其宽度是按照比例x最开始设置表格的宽度。

最后我们来写一个网页用户登录的模板界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table width="400" border="1" cellspacing="0" cellpadding="0" height="200">
        <tr>
            <td rowspan="4" align="center">总体信息</td>
            <td colspan="2" align="center">用户注册</td>
        </tr>
        <tr>
            
            <td align="right" width="100">用户名：</td>
            <td><input type="text" placeholder="填写用户名"></td>
        </tr>
        <tr>
            
            <td align="right" wigth="100">密码：</td>
            <td><input type="text" placeholder="请填写密码"></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
               <button>提交</button>
               <button>重置</button>
            </td>
        </tr>
    </table>
</body>
</html>