前端入门：HTML（表格）

1.表格的基础信息

两行三列，tr代表行，td代表列，td必须在tr中间，每个tr里的td数量是相同的

<table>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

2.table标签的修饰属性

3.表格行tr的属性

当父标签和子标签中都有相同属性的时候，选择就近原则，即tr标签中的属性。

可以设置高度：height

默认align:"left",valign="居中对齐"

案例：

源代码：

<table border="1" width="500" hight="150" cellspacing="0" cellpadding="0" align="center"

    bgcolor="pink" bordercolor="green">

        <tr height="50" align="right" valign="bottom">

            <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>

4.单元格td属性

width,height,align,valign,bgcolor

案例：

源代码：

<table width="300" height="300" border="1">

        <tr>

            <td width="150" height="150" bgcolor="pink" align="right" valign="bottom">1</td>

            <td>2</td>

            <td>3</td>

        </tr>

        <tr>

            <td>4</td>

            <td>5</td>

            <td>6</td>

        </tr>

        <tr>

            <td>7</td>

            <td>8</td>

            <td>9</td>

        </tr>

    </table>

5.合并单元格

colspan:跨列 rowspan:跨行

案例1：

源代码：

<table width="300" height="300" border="1">

        <tr>

            <td colspan="4"></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td rowspan="2"></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td rowspan="3"></td>

            <td></td>

        </tr>

        <tr>

            <td colspan="2"></td>

            <td></td>

        </tr>

        <tr>

            <td></td>

            <td></td>

            <td></td>

        </tr>

    </table>

案例2：

源代码：

    </table>

    <table width="540" height="385" border="1" cellspacing="0" cellpadding="0">

        <tr bgcolor="deepskyblue">

            <th></td>

            <th>星期一</th>

            <th>星期二</th>

            <th>星期三</th>

            <th>星期四</th>

            <th>星期五</th>

        </tr>

        <tr bgcolor="skyblue">

            <td>早自习</td>

            <td>&nbsp;</td>

            <td></td>

            <td></td>

            <td></td>

            <td></td>

        </tr>

        <tr>

            <td rowspan="4" 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" 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 bgcolor="skyblue">晚自习</td>

            <td colspan="5"></td>

        </tr>

    </table>

&nbsp;:如果不加这个空格，那么每行的行高不会一致，要想实现不加这个实现效果，那么需要学习CSS

th:这个是加粗

6.表格标题和结构分组

知识点：

1.<colgroup span="1" bgcolor="#91C5D4"></colgroup>：设置第一列为一组，设置背景颜色，span="?"(几列为一组，就写几）

2.<caption>阿里职级薪资</caption>：存放表格的标题

3.可以将表格的行分为多个部分，thead和tfood只能有一个，tbody可以有多个

<thead></thead>:表格的头部

<tbody></tbody>:表格的身体

<tfood></tfood>:表格的脚部

4.表格的合并，行合并（rowspan），列合并（colspan）

案例：

源代码：

<table width="600" border="1" align="center"  bordercolor="#ffffff"" bgcolor="#CDE7ED" cellspacing="0" cellpadding="0">

        <caption>阿里职级薪资</caption>

        <!-- 设置第一列为一组，设置背景颜色，span="?"(几列为一组，就写几） -->

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

        <!-- 表格的头部 -->

        <thead>

            <tr align="center" bgcolor="66A98D">

                <th rowspan="2">序号</th>

                <th colspan="6">技术岗与管理岗的职级薪资</th>

            </tr>

            <tr align="center" bgcolor="91C5D4">

                <th>P序列</th>

                <th>P级序列</th>

                <th>M序列</th>

                <th>M级序列</th>

                <th>薪资</th>

                <th>股票</th>

            </tr>

        </thead>

        <!-- 表格的身体 -->

        <tbody>

            <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>

            <tr align="center" bgcolor="D7E1C5">

                <th bgcolor="B0CC7F">说明</th>

                <th colspan="6">P-Profession M-Manage</th>

            </tr>

        </tfoot>

    </table>