HTML 学习笔记(八)表格

一、表格

<!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实现多行多列 -->
        <!-- 一般来说每个table中的每个tr中所包含的td的个数应该是相等的 -->
        <table>
            <!-- 表格行 -->
            <!-- 不要在table和tr中包裹其他标签,需要的话可将其加入td标签中 -->
            <tr>
                <!-- 表格数据单元 -->
                <td></td>
                <td></td>
            </tr>
        </table>

    </body>
</html>

1.创建一个表格实例:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <!-- 实例 table>tr*4>td*5 -->
        <h2><i><strong>1.实例 table>tr*4>td*5:</strong></i></h2>
        <table>
            <tr>
                <td>数量</td>
                <td>位置</td>
                <td>试剂名称</td>
                <td>保存条件</td>
                <td>CAS号/货号</td>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7 \T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

2.用th替换td可实现表头加粗居中显示:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>2.用th替换td可实现表头加粗居中显示:</strong></i></h2>
        <table>
            <tr>
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7 \T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

3.为table添加border属性可以添加表格线的效果,其值为表格线的粗细

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>3.为table添加border属性可以添加表格线的效果,其值为表格线的粗细:</strong></i></h2>
        <table border="1">
            <tr>
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7 \T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

4.通过给table添加width和height属性来定义表格的宽度和高度

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>4.通过给table添加width和height属性来定义表格的宽度和高度:</strong></i></h2>
        <table border="1" width="800" height="200">
            <tr>
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7/T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

5.通过cellspacing来定义单元格之间的距离,通过cellopadding定义单元格边框于文本之间的距离

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>5.通过cellspacing来定义单元格之间的距离,通过cellopadding定义单元格边框于文本之间的距离:</strong></i></h2>
        <table border="1" width="800" height="200" cellspacing="0" cellpadding="5">
            <tr>
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td align="center">2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td align="center">不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td align="center">密封冷藏</td>
                <td>1077-28-7/T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

6.通过align设置表格居中显示,bgcolor设置表格底色,bordercolor设置表格边框颜色

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>6.align设置居中显示,bgcolor设置表格底色,bordercolor设置表格边框颜色:</strong></i></h2>
        <table border="1" width="800" height="200" cellspacing="0" cellpadding="5"
            align="center" bgcolor="skyblue" bordercolor="green">  
            <tr>
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7/T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

二、行(tr)的属性

1.创建一个表格实例作为对比

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>1.作为对比</strong></i></h2>
        <table border="1" width="800" height="200" cellspacing="0" cellpadding="5"
            align="center" bgcolor="" bordercolor="skyblue">  
            <tr>
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7/T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

2.指定每一行的行高

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>2.指定每一行的行高</strong></i></h2>
        <table border="1" width="800" height="200" cellspacing="0" cellpadding="5"
            align="center" bgcolor="" bordercolor="red">  
            <tr height="150">
                <th>数量</th>
                <th>位置</th>
                <th>试剂名称</th>
                <th>保存条件</th>
                <th>CAS号/货号</th>
            </tr>
            <tr height="100">
                <td>1</td>
                <td>R1</td>
                <td>L-谷胱甘肽(还原型)</td>
                <td>2-8<sup>o</sup>C</td>
                <td>70-18-8</td>
            </tr>
            <tr>
                <td>2</td>
                <td>R3</td>
                <td>硼氢化钠</td>
                <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                <td>16940-66-2\452882-100G</td>
            </tr>
            <tr>
                <td>2</td>
                <td>C2</td>
                <td>硫辛酸</td>
                <td>密封冷藏</td>
                <td>1077-28-7/T5625-25G</td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

3.属性获取的就近原则

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>3.属性获取的就近原则</strong></i></h2>
         <table border="1" width="800" height="200" cellspacing="0" cellpadding="5"
             align="center" bgcolor="yellow" bordercolor="red">  
             <tr height="150" bgcolor="green">
                 <th>数量</th>
                 <th>位置</th>
                 <th>试剂名称</th>
                 <th>保存条件</th>
                 <th>CAS号/货号</th>
             </tr>
             <tr height="100">
                 <td>1</td>
                 <td>R1</td>
                 <td>L-谷胱甘肽(还原型)</td>
                 <td>2-8<sup>o</sup>C</td>
                 <td>70-18-8</td>
             </tr>
             <tr>
                 <td>2</td>
                 <td>R3</td>
                 <td>硼氢化钠</td>
                 <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                 <td>16940-66-2\452882-100G</td>
             </tr>
             <tr>
                 <td>2</td>
                 <td>C2</td>
                 <td>硫辛酸</td>
                 <td>密封冷藏</td>
                 <td>1077-28-7/T5625-25G</td>
             </tr>
         </table>
    </body>
</html>

在这里插入图片描述

4.指定对齐方式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>4.对齐方式</strong></i></h2>
         <h3>align属性指定tr内单元格的水平对齐方式: <b>left:</b>左侧对齐,<b>center:</b>居中对齐,<b>right:</b>右侧对齐</h3>
         <h3>valign属性指定tr内单元格的垂直对齐方式: <b>top:</b>顶部对齐,<b>middle:</b>居中对齐,<b>bottom:</b>底部对齐</h3>
         <h4>(默认对齐方式是水平左侧对齐,垂直居中对齐)</h4>
         <table border="1" width="1000" height="200" cellspacing="0" cellpadding="5"
             align="center" bgcolor="yellow" bordercolor="red">  
             <tr>
                 <th>数量</th>
                 <th>位置</th>
                 <th>试剂名称</th>
                 <th>保存条件</th>
                 <th>CAS号/货号</th>
             </tr>
             <tr align="center" valign="top">
                 <td>1</td>
                 <td>R1</td>
                 <td>L-谷胱甘肽(还原型)</td>
                 <td>2-8<sup>o</sup>C</td>
                 <td>70-18-8</td>
             </tr>
             <tr align="left" valign="middle">
                 <td>2</td>
                 <td>R3</td>
                 <td>硼氢化钠</td>
                 <td>不超过30℃,防光直射,与氧化剂、氟、氯酸等分开</td>
                 <td>16940-66-2\452882-100G</td>
             </tr>
             <tr align="right" valign="bottom">
                 <td>2</td>
                 <td>C2</td>
                 <td>硫辛酸</td>
                 <td>密封冷藏</td>
                 <td>1077-28-7/T5625-25G</td>
             </tr>
         </table>
    </body>
</html>

在这里插入图片描述

三、单元格(td)的属性

1.创建一个表格实例作为对照

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
        <h2><i><strong>1.对照</strong></i></h2>
        <table width="300" height="300" border="1" cellspacing="0">
            <tr>
                <td >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>
    </body>
</html>

在这里插入图片描述

2.改变任一单元格的属性都会改变其所在列的全部单元格的相应属性

替换body中的内容

        <h2><i><strong>2.改变任一单元格的宽度都会改变其所在列的全部单元格的相应宽度,改变任一单元格的高度都会改变其所在行的全部单元格的相应高度</strong></i></h2>
        <h4>(同样就近原则,后面的属性会覆盖前面的属性设置)</h4>
        <table width="300" height="300" border="1" cellspacing="0">
            <tr>
                <td width="150" height="200">1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td width="200">4</td>
                <td>5</td>
                <td>6</td>
                </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>

在这里插入图片描述

3.align属性,valign属性,bgcolor属性

		<h2><i>3.align属性,valign属性,bgcolor属性</i></h2>
        <table width="300" height="300" border="1" cellspacing="0">
            <tr>
                <td width="150" height="150" align="right" valign="bottom" bgcolor="yellow">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>

在这里插入图片描述

四、单元格合并

1.简述

  合并时可以每一行单独计算,每一行有几个单元格就该tr中就有几个td(合并后的单元格算一个),每个其占据的单元格宽度(横向合并单元格数量)由colspan属性指定
  其纵向合并的单元格数量由rowspan属性指定,需要特别说明的是单元格纵向合并后,在计算后面行所具有的单元格的个数时不再计算已被占据的单元格

<!-- 单元格合并 -->
<!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="600" height="400" border="1" cellspacing="0">
            <!-- 1 -->
            <tr> 
                <td colspan="4"></td>
            </tr>
            <!-- 2 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 3 -->
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 4 -->
            <tr>
                <td></td>
                <td rowspan="3"></td>
                <td></td>
            </tr>
            <!-- 5 -->
            <tr>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <!-- 6 -->
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>


    </body>
</html>


在这里插入图片描述

  如图中的第三行第一列通过rowspan="2"合并掉了第四行的第一个单元格,则此时第四行只具有3个单元格(td)

2.实现一个课程表的例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
       
        <table width="600" height="550" border="2" cellspacing="0" cellpadding="0" align="center">
            <!-- 1 -->
            <tr bgcolor="deepskyblue" align="center" valign="middle" align="center" valign="middle">
                <td height="50"></td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <!-- 2 -->
            <tr bgcolor="skyblue">
                <td height="50" align="center" valign="middle">早自习</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 3 -->
            <tr bgcolor="white">
                <td rowspan="4" bgcolor="skyblue" align="center" valign="middle">上午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 4 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 5 -->
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 6 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 7 -->
            <tr bgcolor="white">
                <td rowspan="4" align="center" valign="middle" bgcolor="skyblue">下午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 8 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 9 -->
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 10 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 11 -->
            <tr>
                <td bgcolor="skyblue" height="50" align="center" valign="middle">晚自习</td>
                <td colspan="5" bgcolor="white"></td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

五、表格的行分组列分组等标签

1.表格标题由caption标签实现

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
       
        <!-- 1.表格标题由caption标签实现 -->
        <table width="600" height="550" border="1" cellspacing="0" cellpadding="0" align="center">
            <caption>课程表</caption>
            <!-- 1 -->
            <tr bgcolor="deepskyblue" align="center" valign="middle" align="center" valign="middle">
                <td height="50"></td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <!-- 2 -->
            <tr bgcolor="skyblue">
                <td height="50" align="center" valign="middle">早自习</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 3 -->
            <tr bgcolor="white">
                <td rowspan="4" bgcolor="skyblue" align="center" valign="middle">上午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 4 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 5 -->
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 6 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 7 -->
            <tr bgcolor="white">
                <td rowspan="4" align="center" valign="middle" bgcolor="skyblue">下午</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 8 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 9 -->
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 10 -->
            <tr bgcolor="skyblue">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <!-- 11 -->
            <tr>
                <td bgcolor="skyblue" height="50" align="center" valign="middle">晚自习</td>
                <td colspan="5" bgcolor="white"></td>
            </tr>
        </table>
    </body>
</html>

在这里插入图片描述

2.行分组标签:表格头thead,表格体tbody和表格尾tfoot(其均为table的子标签)

(一个表格只允许一个thead和一个tfoot,但是可以有多个tbody)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
       
        <table width="600" border="1" cellspacing="0" cellpadding="0" align="center">
            <!-- 表格名称 -->
            <caption>阿里职级薪资</caption>
            <!-- 表格头 -->
            <thead>
                <tr align="center" bgcolor="deepskyblue">
                    <th rowspan="2">序号</th>
                    <th colspan="6">技术岗与管理岗的职级薪资</th>
                </tr>
                <tr align="center" bgcolor="deepskyblue">
                    <th>P序列</th>
                    <th>P级名称</th>
                    <th>M序列</th>
                    <th>M级名称</th>
                    <th>薪资</th>
                    <th>股票</th>
                </tr>
            </thead>
            <!-- 表格体 -->
            <tbody>
                <tr bgcolor="skyblue" align="center">
                    <td bgcolor="deepskyblue"><b>1</b></td>
                    <td>P6</td>
                    <td>资深工程师</td>
                    <td>M1</td>
                    <td>主管</td>
                    <td>20W-35W</td>
                    <td>几乎不授予</td>
                </tr>
                <tr bgcolor="skyblue" align="center">
                    <td bgcolor="deepskyblue"><b>2</b></td>
                    <td>P7</td>
                    <td>技术专家</td>
                    <td>M2</td>
                    <td>经理</td>
                    <td>30W-50W</td>
                    <td>2400股</td>
                </tr>
                <tr bgcolor="skyblue" align="center">
                    <td bgcolor="deepskyblue"><b>3</b></td>
                    <td>P8</td>
                    <td>高级专家</td>
                    <td>M3</td>
                    <td>高级经理</td>
                    <td>45W-80W</td>
                    <td>6400股</td>
                </tr>
                <tr bgcolor="skyblue" align="center">
                    <td bgcolor="deepskyblue"><b>4</b></td>
                    <td>P9</td>
                    <td>资深专家</td>
                    <td>M4</td>
                    <td>总监</td>
                    <td>80W-100W</td>
                    <td>16000股</td>
                </tr>
                <tr bgcolor="skyblue" align="center">
                    <td bgcolor="deepskyblue"><b>5</b></td>
                    <td>P10</td>
                    <td>研究员</td>
                    <td>M5</td>
                    <td>高级总监</td>
                    <td>150W+</td>
                    <td>20000股</td>
                </tr>
            </tbody>
            <!-- 表格尾 -->
            <tfoot>
                <tr  bgcolor="yellow">
                    <th><b>说明</b></th>
                    <td colspan="6">P-Profession M-Manage</td>
                </tr>
            </tfoot>
    
        </table>
    </body>
</html>

在这里插入图片描述

3.通过colgroup实现列分组 其具有属性span,其属性值为多少列为一组

(通过cellspacing=“0” sellpadding=“0” bordercolor=“#ffffff” 可设置白色边框)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>table</title>
    </head>
    <body>
       
        <table width="600" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="CDE7ED" 
        cellspacing="0" sellpadding="0" bordercolor="#ffffff"> 
        
            <!-- 表格名称 -->
            <caption>阿里职级薪资</caption>
            <!-- 取第一列为一组并添加颜色 -->
            <colgroup span="1" bgcolor="#91C5D4"></colgroup>
            <!-- 表格头 -->
            <thead>
                <tr align="center" bgcolor="#66A9BD">
                    <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 align="center">
                    <td><b>1</b></td>
                    <td>P6</td>
                    <td>资深工程师</td>
                    <td>M1</td>
                    <td>主管</td>
                    <td>20W-35W</td>
                    <td>几乎不授予</td>
                </tr>
                <tr align="center">
                    <td ><b>2</b></td>
                    <td>P7</td>
                    <td>技术专家</td>
                    <td>M2</td>
                    <td>经理</td>
                    <td>30W-50W</td>
                    <td>2400股</td>
                </tr>
                <tr align="center">
                    <td ><b>3</b></td>
                    <td>P8</td>
                    <td>高级专家</td>
                    <td>M3</td>
                    <td>高级经理</td>
                    <td>45W-80W</td>
                    <td>6400股</td>
                </tr>
                <tr align="center">
                    <td><b>4</b></td>
                    <td>P9</td>
                    <td>资深专家</td>
                    <td>M4</td>
                    <td>总监</td>
                    <td>80W-100W</td>
                    <td>16000股</td>
                </tr>
                <tr align="center">
                    <td><b>5</b></td>
                    <td>P10</td>
                    <td>研究员</td>
                    <td>M5</td>
                    <td>高级总监</td>
                    <td>150W+</td>
                    <td>20000股</td>
                </tr>
            </tbody>
            <!-- 表格尾 -->
            <tfoot>
                <tr bgcolor="#D7E1C5">
                    <th bgcolor="#B0CC7F">说明</th>
                    <td colspan="6">P-Profession M-Manage</td>
                </tr>
            </tfoot>
    
        </table>
        
    </body>
</html>

在这里插入图片描述

  • 65
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值