web前端系统学习——HTML（二）

web前端系统学习——HTML（二）

本篇的内容主要为表格和表单

表格

表格的基本格式为
<table> #表格标签
  <tr> #表格行标签
    <td></td> #表格单元格标签
  </tr>
</table>
下面是一个简单表格的示例：

   <table border="1" wide="500" height="150" cellspacing="0" cellpadding="0" align="center">
        <tr>
            <th>序号</th>
            <th>王者英雄</th>
            <th>王者性别</th>
            <th>所属位置</th>
            <th>详情</th>
        </tr>
        <tr>
            <td>1</td>
            <td>王昭君</td>
            <td>女</td>
            <td>中路</td>
            <td>
                <a href="">点击查看详情</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>亚索</td>
            <td>男</td>
            <td>对抗路</td>
            <td>
                <a href="">点击查看详情</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>虞姬</td>
            <td>女</td>
            <td>发育路</td>
            <td>
                <a href="">点击查看详情</a>
            </td>
        </tr>
    </table>

但是这是针对一个规整表格的写法。如果表格并不是一个规整的等分表格，我们该采取什么办法呢？
答案是使用rowspan参数和colspan参数。rowspan参数是纵向合并单元格，colspan参数是横向合并单元格。
使用rowspan参数时，需要去你想合并的单元格所在行标签<tr>下删除一个<td>单元格标签
使用colspan参数时，删除当前行下你想合并的<td>单元格标签

    <table width="540" height="385" border="1" cellspacing="0" cellpadding="0" align="center">
        <tr align="center" bgcolor="deepskyblue">
            <td></td>
            <td><b>星期一</b></td>
            <td><b>星期二</b></td>
            <td><b>星期三</b></td>
            <td><b>星期四</b></td>
            <td><b>星期五</b></td>
        </tr>
        <tr bgcolor="skyblue">
            <td align="center">早自习</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="4" align="center" bgcolor="skyblue">上午</td>
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="skyblue">
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="skyblue">
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="4" align="center" bgcolor="skyblue">下午</td>
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="skyblue">
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr bgcolor="skyblue">
            <td>&nbsp</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td align="center" bgcolor="skyblue">晚自习</td>
            <td colspan="5"></td>
        </tr>
    </table>

tips:一个个敲<tr>和<td>标签很麻烦，在VScode中可以使用 table>tr*n>td*m + TAB键 的操作生成一个n行m列的表格

<table>表格标签下还有<thead><tbody><tfoot>标签分别表示表格头，表格主体还有表格尾
还可以用<caption>标签为表格添加一个标题

<table width="600" border="1" align="center" bgcolor="CDE7ED" cellspacing="0" cellpadding="0" bordercolor="#ffffff">
        <caption>阿里职级薪资</caption>

        <colgroup span="1" bgcolor="#91C5D4"></colgroup>

        <thead align="center">
            <tr bgcolor="#66A9BD">
                <th rowspan="2">序号</th>
                <th colspan="6">技术岗与管理岗的职级薪资</th>
            </tr>
            <tr bgcolor="#91C5D4">
                <th>P序列</th>
                <th>P级名称</th>
                <th>M序列</th>
                <th>M级名称</th>
                <th>薪资</th>
                <th>股票</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>1</td>
                <td>P6</td>
                <td>资深工程师</td>
                <td>M1</td>
                <td>主管</td>
                <td>20W-35W</td>
                <td>基本不授予</td>
            </tr>
            <tr>
                <td>2</td>
                <td>P7</td>
                <td>技术专家</td>
                <td>M2</td>
                <td>经理</td>
                <td>30W-50W</td>
                <td>2400股</td>
            </tr>
            <tr>
                <td>3</td>
                <td>P8</td>
                <td>高级专家</td>
                <td>M3</td>
                <td>高级经理</td>
                <td>45W-80W</td>
                <td>6400股</td>
            </tr>
            <tr>
                <td>4</td>
                <td>P9</td>
                <td>资深专家</td>
                <td>M4</td>
                <td>总监</td>
                <td>80W-100W</td>
                <td>16000股</td>
            </tr>
            <tr>
                <td>5</td>
                <td>P10</td>
                <td>研究员</td>
                <td>M5</td>
                <td>高级总监</td>
                <td>150W+</td>
                <td>20000股</td>
            </tr>
        </tbody>
        <tfoot align="center">
            <tr bgcolor="#D7E1C5">
                <th bgcolor="#B0CC7F">说明</th>
                <th colspan="6">P-Profession M-Manage,马云在阿里的级别是M0</th>
            </tr>
        </tfoot>
    </table>