选择器的优先级

选择器优先级的权重计算：

● 行内样式： 1000

● id：100

● 类：10

● 标签名：1

important>内联样式>id>类|属性>标签>通配符>继承>浏览器默认

5、css 的三大特性(背)

• 继承性
• 层叠性
• 优先级

继承性 参考链接：blog.csdn.net/qq_41803637…

1、table元素的基础元素组成

• 一个可选的 元素
• 一个可选的 元素
• 下列任意一个:

• • 零个或多个
  • 零个或多个
  • 零个或多个
  • 零个或多个

• 一个可选的 元素

2、table的基础使用

• table是表格的最外层
• caption： 展示一个表格的标题， 它常常作为 的第一个子元素出现，同时显示在表格内容的最前面
• tr就是表格的每一行
• th表示表头单元格 默认居中和加粗
• td表示普通单元格

    <table>
        <!-- 作为table的第一个子元素 -->
        <caption>1206班就业表</caption>
        <!-- tr指的是每一行 -->
        <tr>
            <!-- th指的是表头，会有一些默认样式：加粗 居中 -->
            <th>姓名</th>
            <th>就业薪资</th>
            <th>备注</th>
        </tr>
        <tr>
            <!-- td指的是普通单元格 -->
            <td>小王</td>
            <td>15</td>
            <td></td>
        </tr>
        <tr>
            <td>老王</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>王中王</td>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>大王</td>
            <td>18</td>
            <td></td>
        </tr>
    </table>



最简单表格

   <table border="1">
<tr>
<th>语文</th>
<th>数学</th>
<th>外语</th>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>

thead tbody tfoot位置摆放

  table>
        <!-- thead tbody tfoot 随便怎么摆放位置，最终展示都是 thead tbody tfoot这样的顺序 -->
        <thead>
            <tr>

                <th>姓名</th>
                <th>就业薪资</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td>小王</td>
                <td>15</td>
                <td></td>
            </tr>
            <tr>
                <td>老王</td>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <td>王中王</td>
                <td>14</td>
                <td></td>
            </tr>
            <tr>
                <td>大王</td>
                <td>18</td>
                <td></td>
            </tr>
        </tbody>

    </table>  

table的常用属性

官方文档：developer.mozilla.org/zh-CN/docs/…

border：（废弃）

• 使用像素，定义了表格边框的大小如果设置为1，表示表格具有1px大小的边框。

cellpadding ：（废弃）

• 这个属性定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边

cellspacing ：（废弃）

• 这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上）

width ：（废弃）

• 该属性定义了表格的宽度。宽度可能是一个像素或者是一个百分比值，宽度的百分比值将被定义为表格容器的宽度。

 <table width="400" border="1" cellpadding="10" cellspacing="10">

合并单元格

• colspan:设置跨列，谁合并，给谁设置
• rowspan：设置跨行,谁合并，给谁设置

   <table width="400" border="1" cellpadding="10" cellspacing="10">
    <caption>1206班就业表</caption>
    <tr>
      <th>姓名</th>
      <th>就业薪资</th>
      <th>备注</th>
    </tr>
    <tr>
      <td>小王</td>
        哪里跨列就写在哪里（合并列）
      <td colspan="2">12</td>
      <!-- <td></td> -->
    </tr>
    <tr>
      <td>老王</td>
        哪里跨行就在哪里写（合并行）
      <td rowspan="2">13</td>
      <td></td>
    </tr>
    <tr>
      <td>王中王</td>
      <!-- <td>14</td> -->
      <td></td>
    </tr>
    <tr>
      <td>大王</td>
      <td>15</td>
      <td></td>
    </tr>
  </table>

效果图


table样式

• 合并边框线：border-collapse:collapse
• 宽度平均分布：table-layout：fixed （前提：table 要写宽度）

   <style>
    table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 320px;
    }
  </style>

效果图