05 table表格，form表单

表格的主要内容

① 通过table来做表格，也可以通过div来做表格。
表格的元素挺多，相对繁杂的地方在于表格的装饰这块。
② 通过div来建立表格：将每个div通过css中的display属性显示成对应的表格元素。

表单的主要内容

① form中可以使用下fieldset，将同一类信息汇总到一些。通过legend加上这块的标题。
② 表单中的input种类选择包括了文本、数字、单选、复选(checkbox)、图片上传、大文本。表单即问卷。可以用来做问卷设计了。
③ 每个字段（录入框）可以放到一个div中。这样就不用<br>再去分行。
④ 每个录入框前面的文字说明，最好用label，而且通过for来跟具体的input id绑定。
⑤ 绑定了input id的label，如果有focus或默认功能，鼠标点到label时，鼠标会自动锁定到锁定过去。
⑥ input有一个类型为hidden的，即不显示出来，例如填写的日期时间等可以自动获得的，就可以直接通过这种带过去。
⑦ 密码的临时显示可以通过将input的type从password改为text的方式进行显示。需要用到前面学习的js获取及属性改变的功能。

1、表格及表格的基本元素

a-表格是什么？

表格：数据格式化的工具

b-完整的表格涉及9个标签/元素：

table + caption + colgroup + thead + tbody + tfoot + tr + th + td

常用的:
table + caption + thead + tbody + tr + th + td

简化的: table + caption + tbody + tr + th/td

2、魔法商场购物栏

具体code见下面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔法商店</title>
    <style>
        html{
            font-size: 14px;
        }
        table{
            border-collapse: collapse;
            width: 70%;
            margin: auto;
            color: #666;
            font-weight: lighter;
            text-align: center;
        }
        table thead th, table td{
            border-bottom: 1px solid #bbb;
            padding: 10px;
        }
        table caption{
            font-size: 1.6rem;
            font-style:inherit;
            font-stretch: extra-expanded;
            font-weight: bolder;
            margin-bottom: 15px;
            color: darkblue;
        }
        table th{
            font-weight: lighter;
            color: yellow;
        }
        table thead tr:first-of-type{
            background-color: darkslategray;
        }
        table tbody tr:nth-of-type(even){
            background-color:lightgoldenrodyellow;
        }
        table tbody tr:hover{
            background-color:lawngreen;
            cursor: pointer;
        }
        table tfoot td{
            color: gold;
            background-color: gray;
            font-size: 1.05rem;
            font-weight: bolder;
        }
        body div:last-of-type{
            width: 70%;
            margin: 10px auto;
        }
        body div:first-of-type button{
            float:right;
            widows: 120px;
            height: 32px;
            background-color: slateblue;
            color:gold;
            border:none;
            cursor:pointer;
        }
        body div:first-of-type button:hover{
            background-color: gold;
            font-size: 1.3rem;
            color:black;
        }
    </style>
</head>
<body>
    <table>
        <caption>魔法商店</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>限购</th>
                <th>魔豆</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>壹</td>
                <td>蓝扫把</td>
                <td>仙气五级及以上</td>
                <td>356</td>
            </tr>
            <tr>
                <td>贰</td>
                <td>方金铲</td>
                <td>仙气三级及以上</td>
                <td>498</td>
            </tr>
            <tr>
                <td>叁</td>
                <td>蛇尾绳</td>
                <td>仙气十二级及以上</td>
                <td>9996</td>
            </tr>
            <tr>
                <td>肆</td>
                <td>水边草</td>
                <td>仙气四级及以上</td>
                <td>786</td>
            </tr>
            <tr>
                <td>伍</td>
                <td>鞋底虫</td>
                <td>仙气七级及以上</td>
                <td>1262</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">总括</td>
                <td>15116</td>
            </tr>
        </tfoot>
    </table>
    <div>
        <button>收入囊中</button>
    </div>
</body>
</html>

3、注册页面

自己的没有用到password和复选框，后面有机会可以练习。
```html
<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>魔法世界注册</title>
<style>
body{
color: #555;
}
h3{
text-align: center;
}
form{
width: 450px;
margin: 30px auto;
border-top: 1px solid #aaa;
}
form fieldset{
border: 1px solid steelblue;
background-color: turquoise;
box-shadow: 2px 2px 4px #aaa;
border-radius: 5px;
margin: 20px;
}
form fieldset legend{
background-color: blueviolet;
color: burlywood;
border-radius: 5px;
padding: 5px 15px;
}
form div{
margin: 5px;
}
form p{
text-align: center;
}
form .btn{
width: 75px;
height: 30px;
border: none;
background-color: darkgoldenrod;
color: darkslategrey;
}
form .btn:hover{
background-color: darkturquoise;
color: dimgrey;
cursor: pointer;
}
input:focus{
background-color: dodgerblue;
}
</style>
</head>

<body>
<h3>欢迎来到妖魔神仙世界</h3>
<form action="" method="post">
<fieldset>
<legend>登记造册</legend>
<div>
<label for="" name="" id="">王名
<input type="text" name="" placeholder="您的王名是啥" autofocus>
</label>
</div>

        <div>
            <label for="">王类
                <input type="radio" value="妖怪" name="type" id="type1"> <label for="type1">妖怪</label>
                <input type="radio" value="神仙" name="type" id="type2"> <label for="type2">神仙</label>
            </lable>
        </div>
        <div>
            <label for="">非凡龄
                <input type="int" placeholder="999">
            </label>                
        </div>      
    </fieldset>
    <fieldset>
        <legend>不过你还需要补充下面这些信息</legend>
        <div>
            <label for="">你的牛哭图
                <input type="file" accept="image/png, image/jpg, image/jpeg">
            </label>
        </div>
        <div>
            <label for="">你的作孽/战绩
                <textarea  name="log" id="log" placeholder="作孽多少，战胜妖魔鬼怪多少">